Echarts 饼状图 效果

echarts yekong

Echarts 饼状图

drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var dataList = []
      this.list.forEach((type, index) => {
        var data = {
          value: type.num,
          show: true,
          name: type.alarmDescId,
          itemStyle: {
            normal: {
              color: this.color[index],
              borderWidth: FontChart(2),
              borderColor: '#06264C'
            }
          }
        }
        dataList.push(data)
      });
      var option = {
        // title: {
        //   text: '单位:%',
        //   x: FontChart(20),
        //   y: FontChart(20),
        //   textStyle: {
        //     color: "#fff",
        //     fontSize: FontChart(16)
        //   }
        // },
        legend: {
          orient: 'vertical',
          top: 'center',
          right: '10',
          itemGap: FontChart(10),
          itemWidth: FontChart(10),
          itemHeight: FontChart(10),
          formatter: ["{a|{name}}"].join("\n"),
          width: '10%',
          show: false,
          textStyle: {
            color: 'rgba(190, 198, 218, 1)',
            rich: {
              a: {
                fontSize: FontChart(16),
                width: FontChart(40)
              }
            }
          }
        },
        series: [
          {
            name: '',
            type: 'pie',
            roseType: 'area',
            radius: ['20%', '50%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: true,
            minAngle: 10,// 设置每块扇形的最小占比
            hoverAnimation: false,
            silent: true,
            label: {
              show: true,
              position: 'outside',
              formatter: function (res) {
                return res.name + ' ' + res.percent + "%"
              },
              color: '#fff',
              fontSize: FontChart(14)
            },
            labelLine: {
              show: true,
              // length: FontChart(40),
              // length2: FontChart(10)
            },
            data: dataList
          },
          {
            type: 'pie',
            silent: true,
            center: ['50%', '50%'],
            radius: ['0%', '50%'],
            z: 1,
            itemStyle: {
              normal: {
                color: '#02224d'
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            type: 'pie',
            silent: true,
            center: ['50%', '50%'],
            radius: ['54%', '55%'],
            z: 1,
            itemStyle: {
              normal: {
                color: '#053165'
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
          {
            type: 'pie',
            silent: true,
            center: ['50%', '50%'],
            radius: ['14%', '15%'],
            z: 2,
            itemStyle: {
              normal: {
                color: '#053165'
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [100]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢