Echarts大屏半饼图（自动轮播高亮、resize）

技术栈：Vue + ECharts.js

简介

某些情况，大屏页面需要实现一些比较美观的图表，常用的图表插件有echarts，此篇的实现效果为饼图半环形图和南丁格尔玫瑰图的结合体。
这两种图具体实例可查看echarts官网
目标图：

echarts示例：

同时实现轮播高亮，采用定时循环操作，先调用echarts的downplay取消所有的高亮，再调用highlight高亮指定数据。
每次窗口大小改变时，进行监听，chart更新，调用resize方法，避免出现错乱效果。

实现

安装echarts插件

npm install echarts --save

页面布局

<template>
  <div>
    <div id="pieChart"></div>
  </div>
</template>
<style>
#pieChart {
     
     
  width: 500px;
  height: 250px;
  margin: 0 auto;
}
</style>

逻辑实现

resize

监听窗口resize事件，及时重绘图表。
其中，需要注意到keep-alive 缓存特殊的两个阶段，activated(组件激活时) 和deactivated(组件停用时) 。

• activated(组件激活时) keep-alive 缓存的组件激活时调用。
• deactivated(组件停用时) keep-alive 缓存的组件停用时调用。

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数。

import {
   
    debounce } from '@/utils'

export default {
   
   
  data() {
   
   
    return {
   
   
      $_resizeHandler: null
    }
  },
  mounted() {
   
   
    this.initListener()
  },
  // 组件激活时
  activated() {
   
   
    if (!this.$_resizeHandler) {
   
   
      // avoid duplication init
      this.initListener()
    }

    // when keep-alive chart activated, auto resize
    this.resize()
  },

  beforeDestroy() {
   
   
    this.destroyListener()
  },

  // 组件停用时
  deactivated() {
   
   
    this.destroyListener()
  },
  methods: {
   
   
    
    // 初始化监听
    initListener() {
   
   
      this.$_resizeHandler = debounce(() => {
   
   
        this.resize()
      }, 100)
      window.addEventListener('resize', this.$_resizeHandler)
    },

    // 销毁监听
    destroyListener() {
   
   
      window.removeEventListener('resize', this.$_resizeHandler)
      this