Vue echarts封装——可根据浏览器窗口大小同步更新echart视图

1、安装相关依赖包

• npm install --save echarts
• npm intsall --save element-resize-detector

2、echart.vue文件

注：引入了chartResize.js文件，代码在下面

<template>
  <div :id="id"
       :class="className">
  </div>
</template>

<script type="text/ecmascript-6">
import echarts from 'echarts'
import chartResize from '@/assets/option/chartResize'
export default {
  mixins: [chartResize],
  props: {
    // 数据源
    options: {
      type: Object,
      default: function () {
        return {}
      }
    },
    // div的class
    className: {
      type: String,
      default: function () {
        return ''
      }
    },
    // div的id
    id: {
      type: String,
      default: function () {
        return ''
      }
    }
  },
  data () {
    return {
      // chart对象
      chart: null
    }
  },
  watch: {
    options: {
      handler (newVal, oldVal) {
        this.initChart()
      },
      deep: true
    }
  },
  mounted () {
    /* 图标初始化 */
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    /* 释放图表实例 */
    this.chart.dispose()
    /* dispose 会释放内部占用的一些资源和事件绑定，但是解除实例的引用我们是做不到的，所以需要重新赋值为null */
    this.chart = null
  },
  methods: {
    /**
     * 初始化图表
    */
    initChart () {
      const echartsDom = document.querySelector(`#${this.id}`)
      this.chart = echarts.init(echartsDom)
      this.chart.clear(this.options)

      this.chart.setOption(this.options)
      this.chart.resize()
      window.onresize = () => {
        this.chart.resize()
      }
    }
  }
}
</script>

3、chartResize.js文件

import ResizeListener from 'element-resize-detector'
export default {
  methods: {
    /* 对chart元素尺寸进行监听，当发生变化时同步更新echart视图 */
    chartEleResizeListener () {
      const chartInstance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      });
      chartInstance.listenTo(this.$el, () => {
        if (!this.chart) return
        this.chart.resize()
      })
    },

    /* 当窗口缩放时，echart动态调整自身大小 */
    windowResizeListener () {
      if (!this.chart) return
      this.chart.resize()
    }
  },
  mounted () {
    window.addEventListener('resize', this.windowResizeListener)
    this.chartEleResizeListener()
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.windowResizeListener)
  }
}

4、引入封装好的echarts组件，在其他组件中使用

主要代码
// options为图表配置项

 <Echarts 	:options="lineOption"    // options为图表配置项
	         className="lineEchart"
	         id="lineEchart"></Echarts>

记得给图表容器设置宽高，具体代码如下

<template>
	<div>
	// 主要代码
	  <Echarts :options="lineOption"
	            className="lineEchart"
	            id="lineEchart"></Echarts>
	</div>
</template>
<script>
import Echarts from '@/components/Echarts'
data(){
	return{
		// 图表配置项
		lineOption:{
          title: {
            text: '999',
            subtext: '案件总数',
            left: 'center',
            top: '40%',
            textStyle: {
              color: 'rgba(0,0,0,0.9)',
              fontSize: 28,
              align: 'center'
            },
            subtextStyle: {
              color: 'rgba(0,0,0,0.4)',
              fontSize: 14,
              fontStyle: 'normal',
              fontWeight: 'normal'
            }
          },
          series: [
            {
              name: '警情类型',
              type: 'pie',
              radius: ['45%', '60%'],
              emphasis: {
                label: {
                  show: true,
                  fontSize: '20',
                  fontWeight: 'bold'
                }
              },
              label: {
                formatter: '{name|{b}}\n{time|{c}}',
                lineHeight: 15,
                rich: {
                  name: {
                    fontSize: 14,
                    color: 'rgba(0,0,0,0.4)'
                  },
                  time: {
                    fontSize: 14,
                    color: 'rgba(0,0,0,0.7)'
                  }
                }
              },
              data: [
                { value: 1048, name: '治安', itemStyle: { color: '#2080F7' } },
                { value: 735, name: '纠纷', itemStyle: { color: '#36C4F7' } },
                { value: 580, name: '求助', itemStyle: { color: '#4FDB5D' } },
                { value: 484, name: '举报投诉', itemStyle: { color: '#F5E836' } },
                { value: 100, name: '安全隐患', itemStyle: { color: '#FFD138' } },
                { value: 30, name: '刑事', itemStyle: { color: '#FF9C38' } },
                { value: 400, name: '其他', itemStyle: { color: '#FE5332' } }
              ]
            }
          ]
        }
	}
}
</script>
<style>
 #lineEchart{
	 height:300px;
	 width:500px;
 }
</style>

结果