你可以使用如下命令通过 npm 安装 ECharts
npm install echarts
实例:
<template>
<!--图形化容器-->
<div
id="report_optino"
ref="myBox"
style="width: 800px; height: 500px; margin-top: 40px"
></div>
</template>
<script>
//引入下载好的echarts插件
import * as echarts from "echarts";
import { getRepost } from "../../api/index.js";
export default {
data() {
return {};
},
methods: {
async getRepost() {
let { data, meta } = await getRepost();
//基于准备好的dom,初始化echarts实例
let myChart = echarts.init(this.$refs.myBox);
//给data添加一个tooltip属性
data.tooltip = {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
};
//将请求好的数据放入到实例图标选项,会指出图表
myChart.setOption(data);
},
},
created() {
this.getRepost();
},
};
</script>
结果 :
其中最后整合好的数据如下
以上就是个人学习echarts的小demo,如果有什么问题,欢迎回访!