echarts - 原型的方向盘动画

方向盘的动画特效

const options = {
      // backgroundColor: '#0E1327', // 画布背景
      title: [ // 标题
        {
          text: '当前功率(KW)',
          left: 'center',
          top: '64%',
          textStyle: {
            color: '#999',
            fontSize: 12,
            // fontFamily: 'cuhei',
            fontWeight: 400,


          }
        }
      ],
      series: [ // 圆环的色调
        {
          type: 'gauge',
          startAngle: 180, //  半圆的设置
          endAngle: 0, //  半圆的设置
          radius: '66',



          // 底部进度条 - 圆弧 添加轴线背景
          axisLine: {
            show: true,



            roundCap: true,



            // 底部圆弧的背景 start
            lineStyle: {
              width: 15,
              color: [
                [
                  1,
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                      offset: 0,
                      color: '#04B138',
                    },
                    {
                      offset: 0.5,
                      color: '#378CF1',
                    },
                    {
                      offset: 1,
                      color: '#378CF1',
                    },
                  ]),
                ],
                [1, '#378CF1'],
              ],
              // color: [[0.2, '#378CF1'],[0.8, '#378CF1'],[1, '#02B331']],
              // color: [[1, '#3383a2']],
            },
            // 底部圆弧的背景 end




            show: true,
            width: 15, // 圆弧的宽度
            // itemStyle: {



            //   color: {
            //     type: 'linear',
            //     x: 1,    // 从右侧开始
            //     y: 0.5,  // 垂直居中
            //     x2: 0,   // 到左侧结束
            //     y2: 0.5, // 垂直居中
            //     colorStops: [
            //       // {offset: 0, color: '#378CF1'},    // 180度(左侧) - 蓝色
            //       {offset: 0, color: 'red'},    // 180度(左侧) - 蓝色
            //       {offset: 0.5, color: '#378CF1'},  // 90度(顶部) - 蓝色
            //       {offset: 1, color: '#02B331'},    // 0度(右侧) - 绿色
            //     ]
            //   },
            //   borderWidth: '2',
            //   shadowOffsetX: 0,
            //   shadowOffsetY: 0,
            //   opacity: 1
            // }
          },



          // 顶部进度条 - 圆弧
          // progress: {
          //   roundCap: true,
          //   show: true,
          //   width: 15, // 圆弧的宽度
          //   itemStyle: {
          //     color: {
          //       type: 'linear',
          //       x: 1, // 从右侧开始
          //       y: 0.5, // 垂直居中
          //       x2: 0, // 到左侧结束
          //       y2: 0.5, // 垂直居中
          //       colorStops: [{
          //           offset: 0,
          //           color: '#378CF1'
          //         }, // 180度(左侧) - 蓝色
          //         {
          //           offset: 0.5,
          //           color: '#378CF1'
          //         }, // 90度(顶部) - 蓝色
          //         {
          //           offset: 1,
          //           color: '#02B331'
          //         }, // 0度(右侧) - 绿色
          //       ]
          //     },
          //     borderWidth: '2',
          //     shadowOffsetX: 0,
          //     shadowOffsetY: 0,
          //     opacity: 1
          //   }
          // },



          radius: '70', // 圆的半径
          markPoint: { // 针中心的圆
            // 仪表盘指针圆
            animation: false,
            silent: true,
            data: [{
              x: '50%',
              y: '50%',
              symbol: 'circle',
              symbolSize: 31,
              itemStyle: {
                color: '#06B040',
              },
            }, {
              x: '50%',
              y: '50%',
              symbol: 'circle',
              symbolSize: 14,
              itemStyle: {
                color: 'white'
              },
            }],
          },
          pointer: { // 指针
            // 仪表盘指针
            icon: 'path://M 3 0 L 3 45 L 5 45 L 5 0 Z',
            width: 5,
            length: "50%",
            itemStyle: {
              color: '#00B42A'
            },
            // itemStyle: {
            //   color: {
            //     type: 'linear',
            //     x: 0, y: 0, x2: 0, y2: 1,
            //     colorStops: [
            //       {offset: 0, color: '#4AFF80'},
            //       {offset: 0.5, color: '#06B040'},
            //       {offset: 1, color: '#047D2E'}
            //     ]
            //   },
            //   borderType: 'solid',
            //   borderColor: '#06B040',
            //   borderWidth: 0.5,
            //   borderRadius: 2  // 添加圆角效果
            // }
          },
          axisTick: { // 齿轮
            distance: 0,
            length: 5,
            lineStyle: {
              color: 'auto',
              width: 0
            }
          },
          splitLine: { // 圆环内部刻度
            distance: 0,
            length: 15,
            lineStyle: {
              color: '#2B94C8',
              width: 0
            }
          },
          axisLabel: { // 内部刻度对应的数值
            show: false, // 直接隐藏所有轴标签
            color: '#3488db',
            distance: 12,
            fontSize: 12,
          },
          detail: {
            offsetCenter: ['0%', '78%'], // 数值的底部位置
            valueAnimation: true,
            formatter: '{value}',
            color: '#111',
            fontSize: 18 // 添加此行设置字体大小（单位：px）
          },
          data: [{
            value: 50,
          }]
        },
      ]
    };