Echarts仪表盘_基于echarts 仪表盘-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_69728991/article/details/136387350

文章详细描述了一个使用JavaScript和ECharts库创建动态色阶渐变的仪表盘，通过代码展示了如何设置不同颜色区间和渐变效果，适用于数据可视化项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//核心代码
 const colorArr = [];
        for (let i = 1; i <= 9; i++) {
          colorArr.push([
            (unit / 100 / (10 - i)).toFixed(2),
            `rgba(25,253,255, ${i / 10})`
          ]);
        }
        this.chartOpt = {
//option的内容
          series: [
            {
              type: 'gauge',
              center: ['51%', '49%'], // 左右上下
              radius: '71%',
              min: 0,
              max: 100,
              startAngle: 210,
              endAngle: -30,
              splitNumber: 4,
              axisLine: {
                lineStyle: {
                  color: [...colorArr, [1, 'rgba(145, 223, 241, 0.2)']],
                  width: 0
                }
              },
              splitLine: {
                // 分隔线
                show: false
              },
              axisTick: {
                // 刻度线样式（及短线样式）
                show: true,
                splitNumber: 5,
                lineStyle: {
                  width: 13,
                  color: 'auto',
                  type: 'triangle',
                  // 设置刻度线的阴影
                  shadowBlur: 2, // 设置阴影模糊大小
                  shadowColor: 'rgba(0, 0, 0, 0.5)', // 设置阴影颜色
                  shadowOffsetX: 1, // 设置阴影水平偏移
                  shadowOffsetY: 1 // 设置阴影垂直偏移
                },
                length: -30,
                distance: 11
              },
              axisLabel: {
                show: false
              },
              detail: {
                fontSize: 35,
                formatter: '{value}%',
                fontWeight: '400',
                color: '#fff',
                offsetCenter: ['0', '-5%']
              },
              pointer: {
                show: false,
                width: 20,
                length: 30,
                icon: 'diamond',
                offsetCenter: [0, '-100%'],
                itemStyle: {
                  color: '#ff7f50', // 箭头颜色
                  shadowColor: '#ff7f50',
                  shadowBlur: 10
                }
              },
              data: [
                {
                  value: unit,
                  name: name,
                  title: {
                    show: true,
                    color: '#fff',
                    offsetCenter: [0, '50%'],
                    fontSize: 20
                  }
                }
              ]
            }
            // {
            //   name: '最外层渐变覆盖区',
            //   type: 'gauge',
            //   center: ['50%', '60%'],
            //   radius: '90%',
            //   min: 0,
            //   max: 100,
            //   axisLine: {
            //     show: false
            //   },
            //   axisTick: {
            //     show: false
            //   },
            //   splitLine: {
            //     show: false
            //   },
            //   axisLabel: {
            //     show: false
            //   },
            //   pointer: {
            //     show: false
            //   },
            //   progress: {
            //     show: true,
            //     roundCap: true,
            //     width: 2,
            //     itemStyle: {
            //       borderColor: 'transparent',
            //       color: {
            //         type: 'linear',
            //         x: 0,
            //         y: 0,
            //         x2: 0,
            //         y2: 1,
            //         colorStops: [
            //           {
            //             offset: 0,
            //             color: 'rgba(25, 253, 255,1)'
            //           },
            //           {
            //             offset: 1,
            //             color: 'rgba(66,172,239,0)'
            //           }
            //         ]
            //       }
            //     }
            //   },
            //   detail: {
            //     show: false
            //   },
            //   itemStyle: {
            //     color: 'rgba(25, 253, 255,.3)',
            //     borderColor: 'rgba(25, 253, 255,1)'
            //   },
            //   data: [
            //     {
            //       value: 100
            //     }
            //   ]
            // },
            // {
            //   name: '最外层渐变覆盖区',
            //   type: 'gauge',
            //   center: ['50%', '60%'],
            //   radius: '64%',
            //   min: 0,
            //   max: 100,
            //   axisLine: {
            //     show: false
            //   },
            //   axisTick: {
            //     show: false
            //   },
            //   splitLine: {
            //     show: false
            //   },
            //   axisLabel: {
            //     show: false
            //   },
            //   pointer: {
            //     show: false
            //   },
            //   progress: {
            //     show: true,
            //     roundCap: true,
            //     width: 2,
            //     itemStyle: {
            //       borderColor: 'transparent',
            //       color: {
            //         type: 'linear',
            //         x: 0,
            //         y: 0,
            //         x2: 0,
            //         y2: 1,
            //         colorStops: [
            //           {
            //             offset: 0,
            //             color: 'rgba(25, 253, 255,1)'
            //           },
            //           {
            //             offset: 1,
            //             color: 'rgba(66,172,239,0)'
            //           }
            //         ]
            //       }
            //     }
            //   },
            //   detail: {
            //     show: false
            //   },
            //   itemStyle: {
            //     color: 'rgba(25, 253, 255,.3)',
            //     borderColor: 'rgba(25, 253, 255,1)'
            //   },
            //   data: [
            //     {
            //       value: 100
            //     }
            //   ]
            // }
          ]

 <div class="jdzs-echarts-content">//echarts外部容器
</div>
.jdzs-echarts-content{
   content: '';
      width: 317px;
      height: 305px;
      background: url(~img/v2/sgjyph/qygjdt/ybp.png) no-repeat;//背景图
      background-size: 100% 100%;
      position: absolute;//外部设置relative
      left: 3.7%;
      top: 9%;
      z-index: 1;
}