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 效果
点击按钮立刻展示图形.