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

Love The Way You Lie 2023-06-07 12:05 8阅读 0赞

<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>