echarts 饼图

1. 饼图移入修改相关样式以及鼠标事件

1.1 代码

<template>
  <div class="pie-container">
    <div ref="pieChart" class="chart" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      echartInstance: null,
      activeNumIndex: 0,
      numList: [
        { label: '苹果', value: 10 },
        { label: '香蕉', value: 20 },
        { label: '蜜桃', value: 30 },
        { label: '雪梨', value: 40 }
      ]
    }
  },
  mounted() {
    this.initEchart()
  },
  methods: {
    initEchart() {
      this.echartInstance = this.$echarts.init(this.$refs.pieChart)
      window.onresize = () => {
        this.echartInstance.resize()
      }

      const options = this.initOptions()
      this.echartInstance.setOption(options)

      this.echartInstance.on('mousemove', param => {
        const { name } = param

        const index = this.numList.findIndex(n => n.label === name)

        if (this.activeNumIndex === index) return

        // 点击环时， 取消上一次的点击
        this.echartInstance.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.activeNumIndex
        })
        this.handleDataStyle(index, false, true)

        this.activeNumIndex = index
      })

      this.echartInstance.getZr().on('mouseout', param => {
        const target = param.event.target
        // 取消激活
        if (target && target.tagName === 'CANVAS') {
          this.echartInstance.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: this.activeNumIndex
          })

          this.activeNumIndex = -1
          this.handleDataStyle(this.activeNumIndex, true)
        }
      })

      // 监听legend的点击事件
      this.echartInstance.on('legendselectchanged', param => {
        const { name, selected } = param
        if (!selected[name]) {
          this.resetEcharts()
        } else {
          const index = this.numList.findIndex(n => n.label === name)
          this.activeNumIndex = index
          this.handleDataStyle(this.activeNumIndex)
        }
      })

      this.echartInstance.getZr().on('click', param => {
        const { target } = param
        // 点击的外部区域
        if (!target) {
          this.resetEcharts()
        }
      })
    },
    initOptions() {
      return {
        color: ['#FCB466', '#FF7384', '#6BB8E1', '#647CF9'],
        title: {
          subtext: '单位：个',
          top: 10,
          left: '60%',
          subtextStyle: {
            color: '#8C8C8C'
          }
        },
        tooltip: {
          trigger: 'item',
          padding: [6, 8],
          textStyle: {
            color: '#262626',
            lineHeight: 20
          },
          backgroundColor: '#fff',
          formatter: (param) => {
            const { data, marker, dataIndex } = param
            return `<div class="pie-tooltip">
              <p>
                ${marker}
                <span>${data.name}</span>
                <span>${data.value}个</span>
              </p>
            </div>`
          }
        },
        legend: {
          orient: 'vertical',
          selectedMode: false, // 控制是否可以通过点击图例改变系列的显示状态
          top: 40,
          left: '60%',
          icon: 'rect',
          itemGap: 14,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            lineHeight: 17,
            color: '#595959',
            padding: [0, 0, -2, 0]
          },
          formatter: (name) => {
            const i = this.numList.findIndex(n => n.label === name)
            return [`${name}`, this.numList[i].value].join('   ')
          }
        },
        series: [
          {
            type: 'pie',
            center: ['30%', '44%'],
            radius: ['60%', '78%'],
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'center',
              color: '#262626',
              formatter: [
                `{a|100}个`,
                '水果数'
              ].join('\n'),
              rich: {
                a: {
                  fontSize: 18,
                  color: '#262626',
                  lineHeight: 27
                }
              }
            },
            data: [
              { value: this.numList[0].value, name: this.numList[0].label },
              { value: this.numList[1].value, name: this.numList[1].label },
              { value: this.numList[2].value, name: this.numList[2].label },
              { value: this.numList[3].value, name: this.numList[3].label }
            ]
          }
        ]
      }
    },
    /**
     * 处理echarts 样式
     * @param {number} i 点击下标
     * @param {boolean} isInit 是否样式初始化
     * @param {boolean} isPie 是否点击的环
     */
    handleDataStyle(i, isInit = false, isPie = false) {
      const options = this.echartInstance.getOption()
      options.series[0].data.forEach((item, index) => {
        item.itemStyle = {
          opacity: (index === i || isInit) ? 1 : 0.5
        }
      })

      const labelValue = isInit ? 100 : this.numList[i].value
      options.series[0].label.formatter = [
        `{a|${labelValue}}个`,
        '水果数'
      ].join('\n')

      this.echartInstance.setOption(options)

      if (!isInit && !isPie) {
        setTimeout(() => {
          this.echartInstance.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: i
          })
        }, 10)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .pie-container {
    > .chart {
      width: 400px;
      height: 190px;
    }
  }
</style>

1.2 效果图