echarts环形渐变进度条

环形渐变进度条

1、标签代码

  <div class="left-content">
      <p class="limit_title">100</p>
      <img src="../../../public/img/hmi/left_back.png" class="left_back" alt="" />
      <img src="../../../public/img/hmi/left_back_inside.png" class="left_inside" alt="" />
      <div class="echart_circle" id="EChart" style="width: 200px; height: 200px;right:7px;bottom:5px"></div>
    </div>

2、逻辑代码

  mounted() {
    this.getRenderer(20)
    setInterval(() => {
      this.getRenderer(this.random(10, 99))
    }, 500)
  },
  methods: {
   getRenderer(e) {
      console.log(this.$echarts);
      // 基于准备好的dom，初始化echarts实例
      let EChart = this.$echarts.init(document.getElementById("EChart"));

      let color0 = '#3776db'
      let color1 = '#3776db'
      if (e < 33) {
        color1 = "#3776db"
      } else if (e < 80) {
        color1 = "#a2cdf7"
      } else {
        color1 = "#dc3226"
      }
      let colorItemStyle = {
        normal: {
          color: {
            type: 'linear',
            colorStops: [
              // !! 在此添加想要的渐变过程色 !!
              { offset: 0, color: color0 },
              { offset: 1, color: color1 }
            ]
          },
        }
      }
      let option = {
        title: {
          show: true,
          text: e,
          x: 'center',
          y: 'center',
          textStyle: {
            fontSize: '50',
            color: 'white',
            fontWeight: '900'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: "{d}%",
          show: false
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          show: false
        },
        //环形中间文字
        graphic: [
          // 单位
          {
            type: 'text',
            left: 'center',
            top: '62%',
            style: {
              text: 'km/h',
              textAlign: 'center',
              fill: '#7a7d84',
              fontSize: 15,
              fontWeight: '500'
            }
          }
        ],
        series:
        {
          name: '',
          type: 'pie',
          radius: ['65%', '85%'],
          avoidLabelOverlap: true,
          hoverAnimation: false,
          startAngle: 270,//第一个数据开始绘制的角度，以正交直角坐标系为标准
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: false
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            {
              value: e, name: '',
              itemStyle: colorItemStyle
            },
            {
              value: 100 - e, name: '',
              itemStyle: {
                normal: {
                  color: '#0f1825'
                },
                emphasis: {
                  color: '#0f1825'
                }
              },
            }
          ]
        }
      };
      // 设置参数
      EChart.setOption(option);
    },
}

3、样式代码

.left-content {
  height: 189.5px;
  width: 186.5px;
  position: relative;
  background-image: url("../../../public/img/hmi/left_back.png");
}
.left_back {
  position: absolute;
  left: 0;
  right: 0;
  height: 189.5px;
  width: 186.5px;
}
.left_inside {
  position: absolute;
  left: 28px;
  top: 30px;
  height: 130px;
  width: 130px;
}

4、两张资源背景图片

left_back.png
left_back_inside.png

参考文章：

https://echarts.apache.org/handbook/zh/concepts/chart-size/
https://blog.csdn.net/qq_36270361/article/details/116761059
https://blog.csdn.net/qq_42372534/article/details/116055325