vue+echarts点击toolbox工具栏切换数据源

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '350px'
      },
      // select选择框切换数据时
      // 接口一次性返回xAxis1.series1.xAxis2.series2
      // 第一次只渲染xAxis1.series1
      echartInfor: {
        type: Object,
        require: true
      },
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      echartInfor: {
        deep: true,
        handler(dataInfor) {
          this.setOptions(dataInfor)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.setOptions(this.echartInfor)
      },
      setOptions({
        xAxis1,
        series1
      } = {}) {
        let minLine
        let maxLine
        if (xAxis1 && xAxis1.length > 0) {
          minLine = null
          maxLine = null
        } {
          minLine = 0
          maxLine = 500
        }

        let that = this
        this.chart.setOption({
          toolbox: {
            top: "top",
            right: "10%",
            show: true,
            feature: {
              mark: {
                show: true
              },
              /**自定义的工具栏 */
              myTool1: {
                show: true,
                title: '切换为折线图1',
                icon: 'path://M85.333333 896h853.333334v42.666667H85.333333z,M85.333333 85.333333h42.666667v853.333334H85.333333zM575.317333 650.325333l-187.946666-177.28-168.064 163.413334-29.781334-30.592 197.376-191.914667 188.757334 178.048 321.152-295.168 28.885333 31.402667z', //可以复制阿里矢量图标的svg代码，path多个值用“，”隔开
                iconStyle: {
                  borderColor: "rgba(151,184,216,1)" //修改icon颜色
                },
                //click切换数据源在渲染echarts时无效,第一次进入会记录数据,所以这里将渲染提出
                onclick: function () {
                  that.firstData()
                }
              },
              myTool2: {
                show: true,
                title: '切换为折线图2',
                icon: 'path://M929.28 896h-864V623.68l184.448-184.448C261.76 444.736 275.072 448 289.28 448s27.456-3.264 39.552-8.768l129.216 129.216c-5.568 12.032-8.768 25.408-8.768 39.552 0 52.992 43.008 96 96 96s96-43.008 96-96c0-14.144-3.264-27.52-8.768-39.552l317.44-317.44c13.824-13.76 13.824-36.096 0-49.92-13.76-13.76-36.096-13.76-49.92 0L581.76 519.296c-11.264-4.672-23.552-7.296-36.48-7.296s-25.28 2.624-36.544 7.296L377.984 388.48A94.665 94.665 0 0 0 385.28 352c0-52.992-43.008-96-96-96s-96 43.008-96 96a94.665 94.665 0 0 0 7.296 36.48L65.28 523.84V160c0-17.664-14.336-32-32-32s-32 14.336-32 32v437.312a33.462 33.462 0 0 0 0 12.864V928c0 17.664 14.336 32 32 32h896c17.664 0 32-14.336 32-32s-14.336-32-32-32z m-384-320c17.664 0 32 14.336 32 32s-14.336 32-32 32-32-14.336-32-32 14.272-32 32-32z m-256-256c17.664 0 32 14.336 32 32s-14.336 32-32 32-32-14.336-32-32 14.272-32 32-32z', //可以复制阿里矢量图标的svg代码，path多个值用“，”隔开
                iconStyle: {
                  borderColor: "rgba(2,146,65,1)"
                },
                onclick: function () {
                  that.secondData()
                }
              },
              magicType: {
                show: false,
                type: ["line", "line"],
              },
              restore: {
                show: false
              },
            },
            width: "120px"
          },
          xAxis: {
            type: 'category',
            data: xAxis1
          },
          yAxis: {
            type: 'value',
            min: minLine,
            max: maxLine
          },
          series: [{
            data: series1,
            type: 'line'
          }]
        })

      },
      firstData() {
        this.chart.setOptions({
          xAxis: {
            data: this.echartInfor.xAxis1
          },
          series: [{
            data: this.echartInfor.series1,
          }]
        })
      },
      secondData() {
        this.chart.setOptions({
          xAxis: {
            data: this.echartInfor.xAxis2
          },
          series: [{
            data: this.echartInfor.series2,
          }]
        })
      }
    }
  }

</script>