Echarts三重环形进度条

echarts yekong

Echarts三重环形进度条

drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var data = {
        'name': '合同信息',
        'value': [35],
        'nAmount': 1566557.14
      }
      var color = ['#0662AB', '#0662AB', '#0662AB']
      var option = {
        title: {
          text: data.value[0] + '%',
          textStyle: {
            color: color[2],
            fontSize: 28
          },
          itemGap: 20,
          left: 'center',
          top: 'center'
        },
        tooltip: {
          formatter: function (params) {
            return '<span style="color: #fff;">占比:' + params.value + '%</span>'
          }
        },
        angleAxis: {
          max: 100,
          clockwise: false, // 逆时针
          // 隐藏刻度线
          show: false,
          startAngle: 110,
        },
        radiusAxis: {
          type: 'category',
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,

          },
          axisTick: {
            show: false
          },
        },
        polar: {
          radius: ['60%', '80%'],
          center: ['50%', '50%']
        },
        series: [
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 20,
            radius: '90%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#264179',
                width: 1,
                shadowBlur: 1,
                shadowColor: '#06579D'
              },
              length: 4,
              splitNumber: 5
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
          {
            name: '小环',
            type: 'gauge',
            splitNumber: 20,
            radius: '50%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 359.9999,
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: '#264179',
                width: 1,
                shadowBlur: 1,
                shadowColor: '#06579D'
              },
              length: 4,
              splitNumber: 5
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            }
          },
          {
            type: 'pie',
            name: '内层细圆环',
            radius: ['65%', '75%'],
            startAngle: 110,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#264179'
                }, {
                  offset: 1,
                  color: '#264179'
                }]),
              }
            },
            tooltip: {
              show: false,
            },
            label: {
              show: false
            },
            data: [50]
          },
          {
            type: 'bar',
            z: 10,
            data: data.value,
            showBackground: false,
            coordinateSystem: 'polar',
            roundCap: true,
            barWidth: 15,
            itemStyle: {
              normal: {
                opacity: 1,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
                  offset: 0,
                  color: '#00CBFD'
                }, {
                  offset: 1,
                  color: '#0771B1'
                }]),
                shadowBlur: 5,
                shadowColor: '#2A95F9',
              }
            },
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    }
喜欢