echarts使用方法

如何在页面使用echarts
1.全局安装echarts
npm install echarts --save
2.在要用的页面引入 echarts
var echarts = require(‘echarts’)
3.基于准备好的dom 初始化echarts实例
在mounted中进行初始化
this.ehcarts1 = echarts.init(document.getElementsById(‘echart1’))
4.在页面div中进行挂载<div class="echart1 id="echart1">
然后给.echarts{
width:400px;
height:300px
}
5.调接口 拿到需要渲染的数据 ,然后调取 initEchart1()方法

6.在声明一个新的方法

 initEchart1() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.orderBydayList.length; i++) {
        var dataItem = this.orderBydayList[i];
        xData.push(dataItem.date);
        // 饼图和柱状图对 series的数据格式要求不同  需要对数据变形
        // 参考: https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
        // yData.push(dataItem.count)
        yData.push({
          name: dataItem.date,
          value: dataItem.count,
        });
      }
      console.log("==>", xData, yData);
      var option = {
        // color: 'green',
        title: {
          text: "订单销量统计",
        },
        tooltip: {},

        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "pie", // line  bar  pie
            data: yData,
          },
        ],
      };

      // 绘制图表
      this.echart1.setOption(option);
      // 初始化事件
      this.echart1.on("click", function (params) {
        console.log(params);
      });
    },