SpringBoot, vue3.0, echarts 实现绘制图形

1 vue页面

<template>
  <el-button type="primary" @click="handleClick">测试按钮</el-button>
  <div id="customerChart" style="width: 300px;height: 300px">

  </div>
</template>

<script>
  import { onMounted, getCurrentInstance } from 'vue'
  import * as echarts from './assets/echarts'
  export default {
    name: 'App',
    components: {},
    setup () {
      const { proxy } = getCurrentInstance();
      let myChart;
      onMounted(() => {
        myChart = echarts.init(document.getElementById("customerChart"));
      });

      const handleClick = () => {
        proxy.$http.post('/graphic/getJsonstr', {
        }).then(res => {
          myChart.setOption(res);
        });
        window.onresize = function () {//自适应大小
          myChart.resize();
        }
      };
      return {
        handleClick
      }
    }
  }
</script>

<style>
</style>

2 后台返回图形JSON接口

package com.kern.controller;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Created by caoshi at 16:44 2022/2/9
 */
@RestController
@RequestMapping("/graphic")
public class GraphicController {

    @RequestMapping("/getJsonstr")
    public String draw() {
        JSONObject resjson = new JSONObject();
        JSONObject title = new JSONObject();
        title.put("text", "测试标题");
        resjson.put("title", title);
        JSONObject tooltip = new JSONObject();
        resjson.put("tooltip", tooltip);
        JSONObject xAxis = new JSONObject();
        JSONArray data = new JSONArray();
        data.add("1-1");
        data.add("1-2");
        data.add("1-3");
        data.add("1-4");
        xAxis.put("data", data);
        resjson.put("xAxis", xAxis);
        JSONObject yAxis = new JSONObject();
        resjson.put("yAxis", yAxis);
        JSONArray series = new JSONArray();
        JSONObject seriesItem = new JSONObject();
        seriesItem.put("name", "用户量");
        seriesItem.put("type", "pie");
        JSONArray dataarray = new JSONArray();
        dataarray.add(5);
        dataarray.add(10);
        dataarray.add(15);
        dataarray.add(20);
        dataarray.add(20);
        seriesItem.put("data", dataarray);
        series.add(seriesItem);
        resjson.put("series", series);

        return resjson.toJSONString();
    }

}

3 echarts 文件是静态的js文件

4 效果

点击按钮立刻展示图形.