vue2 Echart 设置图表、resize并自定义tooltip

【关键思路】

1.在data中设置一个 chartArr 变量来存放每一个echart Init的实例，后面再想操作各个图表的 resize 的时候就可以直接循环 chartArr 数组来实现

2.在写 drawChart 方法的时候，将id和option抽离出去（同理后面也可以把数据data等抽出去，自己组合想要的内容），然后在mounted里调用各个表的id和option。如  this.drawChart("chartBarLine", optionBarLine);  即可

3. tooltip中的icon需要在 iconfont 中自行下载

【完整代码】

<template>
  <div>
    <div id="chartBarLine" :style="{ width: '100%', height: '200px', marginTop: '100px' }"></div>
    <div id="chartBarLine2" :style="{ width: '100%', height: '200px', marginTop: '100px' }"></div>
  </div>
</template>

<script>

// 柱状折线图
const optionBarLine = {
  tooltip: {
    show: true,
    trigger: "axis",
    backgroundColor: "#fff",
    textStyle: {
      color: "#333",
      fontSize: 12
    },
    padding: [0, 8, 8, 8],
    extraCssText: 'box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);',
    formatter: function (params) {
      var html = [];
      html.push('<div style="font-size:12px;">');
      html.push('<div style="margin :15px 0 6px  0;">' + params[0].name + '</div>');
      for (var i = 0; i < params.length; i++) {
        html.push('<div style="margin :0 0 8px  0; min-width:120px" ><span style="display: inline-block;vertical-align: middle;margin-right: 8px; width: 6px;height: 6px;background: ' + params[i].color + ';border-radius: 50%;"></span><span style="display: inline-block; margin-right: 3px;color: #666;">' + params[i].seriesName + '</span>');
        html.push('<span>' + params[i].value + '</span>');
        html.push('<span style="display: inline-block; margin: 0 8px 0 16px;color: #666;">text2: </span>');
        html.push('<span>' + params[i].value + '%</span> <i class="iconfont icon-decline" style="color: #e14f1b; font-size: 12px;"></i> <i class="iconfont icon-rise" style="color: #0cbb6b; font-size: 12px;"></i>');
        html.push("</div>");
      }
      html.push("</div>");
      console.log(params);
      return html.join("");
    },
  },
  legend: {
    data: ['Evaporation', 'Precipitation', 'Temperature']
  },
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Precipitation',
      min: 0,
      max: 250,
      interval: 50,
      axisLabel: {
        formatter: '{value} ml'
      }
    },
    {
      type: 'value',
      name: 'Temperature',
      min: 0,
      max: 25,
      interval: 5,
      axisLabel: {
        formatter: '{value} °C'
      }
    }
  ],
  series: [
    {
      name: 'Evaporation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ]
    },
    {
      name: 'Precipitation',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + ' ml';
        }
      },
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ]
    },
    {
      name: 'Temperature',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' °C';
        }
      },
      data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
    }
  ]
};
// 柱状折线图 END

export default {
  data() {
    return {
      chartArr: [],
    }
  },
  mounted() {
    this.drawChart("chartBarLine", optionBarLine);
    this.drawChart("chartBarLine2", optionBarLine);
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    if (this.chartArr) {
      for (var i = 0; i < this.chartArr.length; i++) {
        this.chartArr[i].dispose()// 清理图表实例
      }
    }
  },
  methods: {
    drawChart(name, optionName) {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById(name))
      this.chartArr.push(myChart)
      // 配置 option
      let option = optionName
      // 绘制图表
      myChart.setOption(option)

    },
    handleResize() {
      if (this.chartArr) {
        for (var i = 0; i < this.chartArr.length; i++) {
          this.chartArr[i].resize()
        }
      }
    }
  }
}
</script>

<style scoped lang="less"></style>