基于ECharts封装的vue折线图组件-蒲公英云

基于ECharts封装的vue折线图组件

<template>
  <div class="qf-e-chart">
    <div class="e-chart-canvas" ref="echarts"></div>
  </div>
</template>
<script>
  import echarts from 'echarts'
  export default {
    name: 'EChart',
    props: {
      options: { type: Object, default: {} },
      clickCall: { type: Function, default: () => {} }
    },
    methods: {
      setChart() {
        // 初始化echarts实例
        const chart = echarts.init(this.$refs.echarts)
        let option = {
          title: {},
          tooltip: {},
          legend: {},
          xAxis: {},
          yAxis: {},
          series: [],
          toolbox: {},
          grid: {}
        }
        Object.assign(option, this.options)
        chart.clear()
        // 绘制图表
        chart.setOption(option, true)
        // 浏览器大小改变时重置大小
        window.onresize = function () {
          chart.resize()
        }
        // 容器大小改变时重置大小
        this.$nextTick(() => {
          chart.resize()
        })
        // 防止重复触发点击事件
        if (chart._$handlers.click) {
          chart._$handlers.click.length = 0
        }
        chart.on('click', (params) => {
          this.clickCall && this.clickCall(params)
        })
      },
      initChart() {
        this.$nextTick(() => {
          this.setChart()
        })
      }
    },
    mounted() {
      this.initChart()
    }
  }
</script>
<style scoped>
  .e-chart-canvas {
    width: 100%;
    min-height: 380px;
    max-height: 400px;
  }
</style>