vue中使用echarts 5版本
- 先下载echarts5
npm i echarts --save
- 在mian.js中按需导入
import * as from echarts from "echarts/core"
import { BarChart } from "echarts/charts"
import {
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
} from "echarts/components"
import { CanvasRenderer } from "echarts/renderers";
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
LegendComponent,
BarChart,
PieChart,
CanvasRenderer,
])
Vue.propotype.$echarts=echarts;
- 在页面中新建一个div,必须设置宽高
<div ref="barChart" style="width:500px;height:300px;"></div>
- 在mounted生命周期函数中写如下代码
export default {
mounted() {
this.drawChart();
},
methods: {
drawChart() {
let echart = this.$echarts.init(this.$refs.barEchart);
echart.setOption({
title: {
text: "柱状图",
},
tooltip: {},
legend: {
data: ["销量"],
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
},
yAxis: {},
series: [
{
name: "销量",
type: "bar",
data: [5, 20, 36, 10, 10, 20],
},
],
});
},
},
};
- 效果