vue2中,echarts饼状图点击图例,不置灰图例,图表不发生变化的方法

183 阅读1分钟
 <div ref="pie" v-resize="resize" style="height: 15vh" class="pie"></div>
  data() {
    return {
         pieChart: null,
    }
  }
init(){
   let _this = this
     
        this.$nextTick(() => {
          const legendData = this.typeData
          const target = new Map()
          this.typeData.forEach((item) => {
            target.set(item.name, item.value)
          })
          for (let index = 0; index < this.typeData.length; index++) {
            const element = this.typeData[index]
            this.total += element.value
          }
          _this.pieChart = this.$echarts.init(this.$refs['pie'])  //创建图标实例

          const option = {
            tooltip: {
              trigger: 'item',
              position: 'right'
            },
            legend: {
              orient: 'vertical',
              selectedMode: true,
              icon: 'circle',
              x: _this.tab ? '45%' : '65%', //图例水平位置
              y: _this.tab ? '1%' : '15%',
              selected: {
                X: true,
                Y: true
              },
              itemWidth: 8, // 设置图例图形的宽
              itemHeight: 8, // 设置图例图形的高
              formatter: function (name) {
                if (legendData.length) {
                  let inum = target.get(name)
                  return `${name}    ${inum}`
                } //生成 图例和数量
              },
              textStyle: {
                fontSize: 12
              }
            },
            series: [
              {
                type: 'pie',
                radius: ['55%', '70%'],
                center: ['25%', '42%'], //饼图位置
                avoidLabelOverlap: false,
                label: {
                  show: false,
                  position: 'center',
                  textStyle: {
                    fontFamily: 'blackbody'
                  }
                },
                emphasis: {
                  label: {
                    show: false,
                    fontSize: 12,
                    fontWeight: 'bold'
                  }
                },
                labelLine: {
                  show: false
                },
                data: this.typeData
              }
            ]
          }
          // 这里是为了防止点击后,异常点击2次
          _this.pieChart.off('legendselectchanged')
          //图例点击事件
          _this.pieChart.on('legendselectchanged', function (params) {
            // console.log(params.name)
            //点击图例不置灰
            _this.pieChart.setOption({
              legend: { selected: { [params.name]: true } }
            })
          })
          option && this.pieChart.setOption(option)
        })
}