vue使用echarts

下载引入注册，通过 npm 获取 echarts

npm install echarts --save

在main.js文件里引入并挂载到原型上

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

页面代码：

// 页面准备一个容器放置
<template>
  <div v-resize="resize">
    <div ref="dom" style="width:100%;height:100%"></div>
  </div>
</template>

在methods里写个方法配置图表  具体配置看官网实例更方便 https://echarts.apache.org/examples/zh/index.html

 methods: {
    resize() {
      if (this.dom) this.dom.resize();
    },
    load() {
        let option = {
          color:
          title: {
            text:  //标题
            textStyle: 标题样式
            x: "left",  标题位置
          },
          grid: { //x轴y轴位置
            top: "80px",
            right: "36px",
            left: "36px",
            bottom: "15%"
          },
          tooltip: { //鼠标经过显示
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            },
            formatter: function (params) {  //自定义显示内容
              return `${params[0].name} :<br>${params[0].seriesName}: ${params[0].data}%<br>
              ${params[1].seriesName}: ${params[1].data}%:<br>${params[2].seriesName}: ${params[2].data}%`;
            }
          },
          legend: {  //图标事例自定义
            show: self.passRateData && self.passRateData.length ? true : false,
            data: ['重型货车初检通过率', '轻型货车初检通过率', '微型货车初检通过率'],
            textStyle: {
              fontSize: 12,
              lineHeight: 18,
              color: this.themaColor
            },
            x: "center",
            y: '10%',
            selectedMode: false,
            type: 'scroll',
            pageIconColor: "#FF4B4B",
            pageIconInactiveColor: self.themaColor,
            pageFormatter: "",
            pageButtonItemGap: -6
          },
          calculable: true,
          xAxis: [  //X轴
            {
              type: "category",
              data: self.station,
              axisLine: {
                show: self.passRateData && self.passRateData.length ? true : false, //隐藏X轴轴线
                lineStyle: {
                  color: this.themaColor
                }
              },
              axisLabel: {
                formatter: function (value) {
                  let valueTxt = "";
                  if (value.length > 5 && self.passRateData.length > 3) {
                    valueTxt = value.substring(0, 5) + "...";
                  } else {
                    valueTxt = value;
                  }
                  return valueTxt;
                }
              }
            }
          ],
          yAxis:      //X轴
,
          series: [    //数据 ]
        };

//同一个dom中画多个实例，需要先销毁前一个，才能画后一个需要手动消除,clear是清除画布，而不会清除实例,其会保留点击事件等
        if (self.dom) {
          self.dom.clear();
          self.$echartsc.dispose(self.dom);
          self.dom = null;
        }
        if (self.$refs.dom) {
          self.dom = self.$echartsc.init(self.$refs.dom, "");
          self.dom.setOption(option, true);
        }
      });
    }
  },

加载时调用，在指定钩子销毁

  mounted() {
    this.load();
  },

  beforeDestroy() {
    if (this.dom) {
      this.dom.clear();
      this.$echartsc.dispose(this.dom);
      this.dom = null;
    }
  },