封装Echarts组件

          <Chart
            :id="'chart'"
            key="id"
            :style="{ width: '100%', height: '280px' }"
            :option="LineChartOption"
          />

//表单配置项
 LineChartOption: {
        color: COLORLIST,
        title: {
          text: '分类占比分析',
          left: 'center'
        },
        dataset: {
          source: []
        },
        tooltip: {},
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        // legend: {
        //   // icon: 'circle',
        //   orient: 'vertical',
        //   left: '5px',
        //   top: '30px'
        // },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '55%'],
            avoidLabelOverlap: true,
            emphasis: {},
            label: { formatter: '{@2012} ({d}%)', alignTo: 'labelLine' },

            labelLine: {
              show: true,
              position: 'inner'
            }
          }
        ]
      },


//组件化
<template>
  <div
    :id="id"
    class="echartsLine"
    :style="style"
  />
</template>
<script>
export default {
  props: {
    id: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: 'false'
    },
    height: {
      type: String,
      default: 'false'
    },
    option: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      MyEcharts: '' // echarts实例
    }
  },

  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  watch: {
    // 监听数据
    option: {
      handler (newVal, oldVal) {
        if (this.MyEcharts) {
          if (newVal) {
            this.MyEcharts.setOption(newVal, true)
          } else {
            this.MyEcharts.setOption(oldVal, true)
          }
        } else {
          this.InitCharts()
        }
      },
      deep: true
    }
  },
  mounted () {
    this.InitCharts()
  },
  methods: {
    InitCharts () {
      this.MyEcharts = this.$echarts.init(document.getElementById(this.id))
      this.MyEcharts.clear() // 适用于大数据量的切换时图表绘制错误,先清空在重绘
      this.MyEcharts.setOption(this.option, true) // 设置为true可以是图表切换数据时重新渲染
       this.MyEcharts .off('click')
      this.MyEcharts .on('click', function(params) {
        //  var a = params.dataIndex
        console.log(params, '我被点击了')
      })
// 窗口变化
      const that = this
      window.addEventListener('resize', function () {
        that.MyEcharts.resize()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.echartsLine {
    // margin-top: 15px;
}
</style>