简述vue项目中如何使用ECharts图表
1、安装
npm install echarts
2、项目中
<template>
<div>
<div id="main" style="width: 1000px;height:400px;" ref="main"></div>
</div>
</template>
<script>
import echarts from "echarts"; //导入EChats
import { http } from "../../network/index"; //网络请求模块
export default {
mounted() {
this.save();
},
methods: {
save() {
var myChart = echarts.init(this.$refs.main);
//请求数据
http.getreports().then((res) => {
myChart.setOption({
title: {
text: "用户来源",
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#6a7985",
},
},
},
toolbox: {
// 工具箱
show: true,
feature: {
dataZoom: {
yAxisIndex: "none",
},
dataView: { readOnly: false },
magicType: { type: ["line", "bar", "stack", "tiled"] },
restore: {},
},
},
...res.data.data,
});
});
},
},
};
</script>
<style>
</style>