Echarts 多环形图效果样式

echarts yekong 1177℃

Echarts 多环形图效果样式

 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(0, 239, 253, 1)',
              borderWidth: 2,
              borderColor: "#0633CA"
            }
          },
        },
        {
          value: 43,
          show: true,
          name: '入境',
          itemStyle: {
            normal: {
              color: 'rgba(38, 233, 154, 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%', '70%'],
            center: ['30%', '50%'],
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true
              }
            },
            labelLine: {
              show: false
            },
            data: dataList
          },
          {
            type: 'pie',
            zlevel: 0,
            silent: true,
            center: ['30%', '50%'],
            radius: ['79%', '80%'],
            z: 10,
            itemStyle: {
              normal: {
                areaColor: 'rgba(137, 137, 137, .3)',
                borderColor: '#4053CC',
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: Pie()
          },
          {
            type: 'pie',
            zlevel: 0,
            silent: true,
            center: ['30%', '50%'],
            radius: ['44%', '45%'],
            z: 10,
            itemStyle: {
              normal: {
                areaColor: 'rgba(137, 137, 137, .3)',
                borderColor: '#4053CC',
              },
              emphasis: {
                label: {
                  show: false
                },
                areaColor: 'rgba(255, 255, 255, .1)',
              }
            },
            label: {
              normal: {
                show: false
              },
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: Pie()
          },
          {
            type: 'pie',
            name: '饼状背景',
            radius: ['0%', '35%'],
            center: ['30%', '50%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                  offset: 0,
                  color: 'rgba(255,255,255,0.05)'
                },
                  {
                    offset: 0.5,
                    color: 'rgba(255,255,255,0.2)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,255,255,0.1)'
                  }
                ], false),
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
        ]
      }

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