1 在项目中下载 echarts
安装
npm i echarts@5.1.2
卸载
npm uninstall echarts
2 在要进行使用echarts的页面进行引入
import * as echarts from 'echarts'
3 进行代码的编写
3.1 js 部分
mounted() {
getData().then(({ data }) => {
const { tableData } = data.data;
this.tableData = tableData;
const echarts1 = echarts.init(this.$refs.echarts1);
const echOptions = {};
const { orderData } = data.data;
const xAxis = Object.keys(orderData.data[0]);
const xAxisData = {
data: xAxis,
};
echOptions.xAxis = xAxisData;
echOptions.yAxis = {};
echOptions.legend = xAxisData;
echOptions.series = [];
xAxis.forEach((key) => {
console.log(key);
echOptions.series.push({
name: key,
data: orderData.data.map((item) => item[key]),
type: "line",
});
});
console.log(echOptions);
echarts1.setOption(echOptions);
});
},
};
3.2 html 部分
<el-card style="height: 280px; margin-top: 20px">
<div ref="echarts1" style="height: 280px"></div>
</el-card>