Echarts饼状图移入放大

echarts yekong 3519℃

Echarts饼状图移入放大

鼠标移上去突出放大hoverAnimation: true

    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)

      function Pie() {
        let dataArr = [];
        for (var i = 0; i < 150; i++) {
          if (i % 2 === 0) {
            dataArr.push({
              name: (i + 1).toString(),
              value: 25,
              itemStyle: {
                normal: {
                  color: 'rgba(255,255,255,0.2)',
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            })
          } else {
            dataArr.push({
              name: (i + 1).toString(),
              value: 10,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0)",
                  borderWidth: 0,
                  borderColor: "rgba(0,0,0,0)"
                }
              }
            })
          }
        }
        return dataArr
      }

      const dataList = [
        {
          value: 75,
          show: true,
          name: '男性',
          itemStyle: {
            normal: {
              color: '#007EFF',
              borderWidth: 2,
              borderColor: "#0633CA"
            }
          }
        },
        {
          value: 63,
          show: true,
          name: '女性',
          itemStyle: {
            normal: {
              color: 'rgba(255, 163, 0, 1)',
              borderWidth: 2,
              borderColor: "#0633CA"
            }
          },
        }
      ]
      var option = {
        legend: {
          selectedMode: false, // 取消图例上的点击事件
          type: 'plain',
          orient: 'vertical',
          left: '63%',
          top: 'center',
          align: 'left',
          itemGap: 15,
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          symbolKeepAspect: false,
          textStyle: {
            color: '#000',
            rich: {
              name: {
                verticalAlign: 'right',
                align: 'left',
                width: 90,
                fontSize: 14,
                color: '#D8DDE3',
              },
              value: {
                align: 'left',
                width: 50,
                fontSize: 14,
                padding: [5, 5, 5, -0],
                color: '#D8DDE3',
              }
            }
          },
          data: dataList.map(item => {
            if (item.show) {
              return item.name
            }
          }),
          formatter: function (name) {
            if (dataList && dataList.length) {
              for (var i = 0; i < dataList.length; i++) {
                if (name === dataList[i].name) {
                  return (
                    '{name| ' + name + '} \n' + '{value| ' + dataList[i].value + '%}'
                  )
                }
              }
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '74%'],
            center: ['30%', '50%'],
            hoverAnimation: true,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: dataList
          },
        ]
      }

      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢 (0)