第一步,下载echarts ,并导入
npm install echarts --save
import echarts from "echarts";
import _ from "lodash";
第二部,在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<body>
<!-- 为 ECharts 准备一个具备大小(宽高)的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
第三步请求后台数据,
data() {
return {
options: {
title: {
text: "用户来源"
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "cross",
label: {
backgroundColor: "#E9EEF3"
}
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: [
{
boundaryGap: false
}
],
yAxis: [
{
type: "value"
}
]
}
};
},
methods: {
async getDataList() {
var myChart = echarts.init(document.getElementById("main"));
let res = await getDataList();
if (res.data.meta.status !== 200) return this.$message("获取折线图数据失败!");
const result = _.merge(res.data.data, this.options);
myChart.setOption(result);
}
}
};
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/2570230192ab9db7a09fbe0e6a55ec08.png)