天天看点

echarts 实现渐变的仪表盘

实现效果:

echarts 实现渐变的仪表盘
chartData: {
        series: [
          {
              startAngle: 180, //开始角度 左侧角度
              endAngle: 0, //结束角度 右侧
              type: 'gauge',
              detail: {
                  formatter: '{value}%',
                  fontSize: 10,
                  offsetCenter: [0, '-15%'],//设置仪表盘下方显示内容位置
                  color: '#ff6700' //设置仪表盘下方显示内容文字颜色
              },
              axisLabel:{
                  show:false
              },
              pointer: { //指针样式
                show:false
             },
              axisLine: {仪表盘轴线(轮廓线),默认 true。
                  show: false
              },
              splitLine: {  //分割线样式(及10、20等长线样式)
                  show: false
              },
              axisTick: {
                  show: false
              },
    
              axisLine: {
                  lineStyle: {  
                    width: 10,
                    color: [
                      [0.35, {
                        type: "linear",
                        colorStops: [
                          { offset: 0, color: "#fdaa02" },
                          { offset: 1, color: "#ff3a41" },
                        ],
                      }],
                     [1, '#04336e']]
                    
                  }  
              },
              data: [{value: 35}]
          }
        ],
      },      

继续阅读