Vue使用echarts方法及问题小记

echarts官网：http://echarts.apache.org/zh/index.html

安装

npm install echarts -S

引入

安装完成后，由于需要全局引入，所以需要在main.js中配置

Vue.config.productionTip = false
Vue.prototype.$echarts = echarts

此处注意，安装完成后，在package.json中看一下echarts的版本

版本

如果是5.0.0，那么上方的引入会报错，
此时需要改成

import * as echarts from 'echarts';

即可

使用

首先需要在代码块中声明一个div

        <div id="myChart" style="height: 400px"></div>

随后在mounted方法中绘制图表

  mounted() {
    this.drawLine();
  },
methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '每日告警数'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['温度', '湿度', '电流', '电压', '箱门', '水浸', '断电', '无线信号']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '温度',
            type: 'line',
            stack: '总量',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '湿度',
            type: 'line',
            stack: '总量',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      });
    },
  }

这时候！！又出现了一个问题

问题

仔细看，发现Y轴的数量不对劲，
解决办法：
将上面代码中的series中，

stack: '总量',

这句话全部去掉，就好了
至此，echarts的基本使用方法大体已经结束