vue中使用echarts

1.首先下载echarts – npm i echarts -S
** 2. 在需要echarts的页面中导入echarts**

	var echarts = require("echarts"); //引入echarts

3.html样式

 <div id="box"  style="width: 800px; height: 400px"></div>

4.初始化echart

var myChart = echarts.init(document.getElementById("box"));

5.指定图表的配置项

var option = {
  title: {
    text: "ECharts 入门示例",
  },
  tooltip: {},
  legend: {
    data: ["销量"],
  },
  xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  },
  yAxis: {},
  series: [
    {
      name: "销量",
      type: "bar",
      data: [5, 20, 36, 10, 10, 20],
    },
  ],
};

6.使用刚指定的配置项和数据显示图表

 myChart.setOption(option);

以上就是vue中使用echart的步骤了，小小总结一下：下载-引入-初始化-配置表格内容-显示数据，需要注意的是从第四步到第六步是在mounted(){}这个生命周期里面写的，因为mounted这个生命周期完成了DOM的挂载，echarts功能非常强大，可以满足各种需求，没事就去看看吧链接: link.