vue echarts组件 option以及on事件设置

<template>
  <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import {on, off} from '@/libs/tools'

export default {
  name: 'eChart',
  props: {
    option: {
      type: Object,
      default () {
        return {}
      }
    },
    events: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    option () {
      this.setOption()
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    setOption () {
      this.dom.setOption(this.option)
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.dom = echarts.init(this.$refs.dom)
      this.setOption()
      this.events.forEach(event => {
        this.dom.on(event.name, event.method)
      })
      on(window, 'resize', this.resize)
    })
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>

on、off事件

/**
 * @description 绑定事件 on(element, event, handler)
 */
export const on = (function () {
  if (document.addEventListener) {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.addEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event && handler) {
        element.attachEvent('on' + event, handler)
      }
    }
  }
})()

/**
 * @description 解绑事件 off(element, event, handler)
 */
export const off = (function () {
  if (document.removeEventListener) {
    return function (element, event, handler) {
      if (element && event) {
        element.removeEventListener(event, handler, false)
      }
    }
  } else {
    return function (element, event, handler) {
      if (element && event) {
        element.detachEvent('on' + event, handler)
      }
    }
  }
})()

 

写了个例子 顺便实现了切换不同legend显示不同的y轴

<template>
  <eChart :option="option" :events="events"></eChart>
</template>

<script>
import eChart from '@/components/eChart.vue'

export default {
  name: 'testChart',
  components: {
    eChart
  },
  data () {
    return {
      text: '图表例子',
      value: [
        {
          name: 'legend1',
          x: [10, 5, 24, 55],
          y: ['类1', '类2', '类3', '类4']
        },
        {
          name: 'legend2',
          x: [13, 50, 20, 50],
          y: ['类2', '类1', '类5', '类7']
        }],
      legend: [],
      yIndex: 0
    }
  },
  methods: {
    legendselectchanged (params) {
      this.yIndex = this.legend.indexOf(params.name)
    }
  },
  computed: {
    events () {
      return [{name: 'legendselectchanged', method: this.legendselectchanged}]
    },
    option () {
      const series = []
      const yAxis = []
      this.value.forEach((item, index) => {
        this.legend.push(item.name)
        yAxis.push({
          type: 'category',
          position: 'left',
          show: false,
          data: item.y
        })
        series.push({
          name: item.name,
          type: 'bar',
          data: item.x,
          yAxisIndex: index,
        })
      })
      if (this.yIndex < yAxis.length) {
        yAxis[this.yIndex].show = true
      }
      return {
        title: {
          text: this.text
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          data: this.legend,
          selectedMode: 'single'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: yAxis,
        series: series
      }
    }
  }
}
</script>