echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形

电脑版发表于：2022/3/9 18:57

效果如下：
<img src="https://img.tnblog.net/arcimg/aojiancc2/38b71ec068bf493c8b97ac6d82c61e8e.gif" width="320px">

### 配置项代码如下

```
// 基于准备好的dom，初始化echarts实例
 const myChart = this.$echarts.init(document.getElementById('labroom-trend-chart'))

option = {
  series: [
    {
      type: 'gauge',
      center: ['50%', '60%'],
      // 调整显示圆弧的弧度，也就是可以调整显示的圆圈
      startAngle: 240,
      endAngle: -60,
      min: 0,
      max: 100,
      splitNumber: 12,
      itemStyle: {
        // 圆弧刻度的颜色,这样只是设置一个颜色
        // color: '#ffabcd',
        // 颜色渐变
        color:{
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset:0,color:'#EA5050' // 0% 处的颜色
          },{
              offset:0.25,color:'#EA5050' // 25% 处的颜色
          },{
              offset:0.5,color:'#EB5D5D' // 50% 处的颜色
          },{
              offset:0.75,color:'#EF8585' // 75% 处的颜色
          },{
              offset:1,color:'#F5BDBD' // 100% 处的颜色
          }],
          global: false // 默认为 false
        }
      },
      // 显示进度
      progress: {
        show: true,
        width: 30
      },
      pointer: {
        //关闭指示器
        show: false
      },
      axisLine: {
        lineStyle: {
          width: 30,
          // 底圈的颜色
          // color: [
          //   [0.25, '#FF6E76'],
          //   [0.5, '#FDDD60'],
          //   [0.75, '#58D9F9'],
          //   [1, '#7CFFB2']
          // ]
        }
      },
      // 刻度线
      axisTick: {
        distance: -45,
        splitNumber: 5,
        lineStyle: {
          width: 1,
          color: '#ffabcd'
        }
      },
      // 外圈刻度分割线
      splitLine: {
        distance: -52,
        length: 14,
        lineStyle: {
          // 设置成0不要刻度分割线
          width: 0,
          color: '#999'
        }
      },
      // 刻度数字
      axisLabel: {
        distance: -20,
        color: '#999',
        // 设置成0不要刻度数字
        fontSize: 0
      },
      anchor: {
        show: false
      },
      title: {
        show: false
      },
      detail: {
        valueAnimation: true,
        width: '60%',
        lineHeight: 40,
        borderRadius: 8,
        offsetCenter: [0, '0%'],
        fontSize: 33,
        fontWeight: 'bolder',
        formatter: '{value} %',
        color: 'inherit' //inherit表示和图表颜色一致
      },
      data: [
        {
          value: 20
        }
      ]
    }
  ]
};
setInterval(function () {
  const random = +(Math.random() * 100).toFixed(2);
  myChart.setOption({
    series: [
      {
        data: [
          {
            value: random
          }
        ]
      },
      {
        data: [
          {
            value: random
          }
        ]
      }
    ]
  });
}, 2000);

option && myChart.setOption(option);
```
**例子是基于官方的例子：气温仪表盘改的**
https://echarts.apache.org/examples/zh/editor.html?c=gauge-temperature

上面的这种配置，表示颜色从上到下渐变
```
x: 0,
y: 0,
x2: 0,
y2: 1,
```
如果是想要颜色从左到右渐变这样设置即可
```
x: 0,
y: 0,
x2: 1,
y2: 0,
```

关于颜色渐变官方的文档可以看看：https://echarts.apache.org/zh/option.html#color

**在贴两个颜色渐变的搭配**
黄色渐变
```
// 颜色渐变
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#F8ED41' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#E4951E' // 100% 处的颜色
                                }],
                                global: false // 默认为 false
                            }
```
蓝色渐变
```
itemStyle: {
    // 圆弧刻度的颜色,这样只是设置一个颜色
    // color: '#ffabcd',
    // 颜色渐变
    color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#0491FA' // 0% 处的颜色
        }, {
            offset: 1, color: '#0054D0' // 100% 处的颜色
        }],
        global: false // 默认为 false
    }
},
```

**itemStyle的颜色渐变也可以这样设置**
a ,b,c,d为0，1
a:1 arr中的颜色右到左
b:1 arr中的颜色下到上
c:1 arr中的颜色左到右
d:1 arr中的颜色上到下

简单示例：
```
itemStyle: {
	color: new this.$echarts.graphic.LinearGradient(
		0, 0, 1, 0,
		[
			{ offset: 0, color: '#abcdff' },
			{ offset: 0.75, color: '#ffabcd' },
			{ offset: 1, color: '#00cc66' }
		]
	)
}
```

### 外圈高亮，发光
![](https://img.tnblog.net/arcimg/aojiancc2/c7a82ec0f1c5415e9eac22074f6f698e.png)

利用边框和阴影
```
itemStyle: {
    normal: {
        borderWidth: 2,
        shadowBlur: 5,
		// color:"blue",
        borderColor: "#ffabcd",
        shadowColor: "#fff"
    },
}
```

### 内圈高亮，发光

内圈设置的官方文档：https://echarts.apache.org/zh/option.html#series-gauge.axisLine.lineStyle

内圈底部那个圈只能通过shadowColor，shadowBlur，shadowOffsetX，shadowOffsetY这几个参数来，例如
```
axisLine: {
    lineStyle: {
        width: 20,
        // 阴影的颜色
        shadowColor: 'rgba(255,0, 0, 1)',
        // 阴影的宽度
        shadowBlur: 22,
        // 阴影的x偏移量
        shadowOffsetX: 0,
        // 底圈的颜色
        color: [[1, "rgba(255,255,255,9)"]],
}
```

效果如下：

![](https://img.tnblog.net/arcimg/aojiancc2/f7924cb3a55c4fce8b7212d2538e8f19.png)

**如果把阴影的x偏移量设置一下就可以看到阴影效果的偏移**
```
// 阴影的x偏移量
shadowOffsetX: 50,
```
![](https://img.tnblog.net/arcimg/aojiancc2/d3e1248fc8814807bc9077808cf86b03.png)

**但是如果把底圈那个颜色的透明度设置成很低，就看不到阴影了**
比如设置成0.1的透明度就看不到阴影了
```
// 底圈的颜色
color: [[1, "rgba(255,255,255,0.1)"]],
```
底圈高亮的效果其实我们还可以用同心圆的方式实现，我们可以用三个圆，内部的一个圆刚好在内边框，外面的那个圆设置在外边框这样也可以实现底圈的高亮效果

### 内圈的颜色渐变。多个颜色分段

通过实例化的this.$echarts.graphic.LinearGradient设置即可

```
axisLine: {
    lineStyle: {
        width: 20,
        // color: [
        //   [0.25, '#FF6E76'],
        //   [0.5, '#FDDD60'],
        //   [0.75, '#58D9F9'],
        //   [1, '#7CFFB2']
        // ]
        color: [
            [1, new this.$echarts.graphic.LinearGradient(
                0, 1, 1, 0,
                [
                    { offset: 0, color: '#ffabcd' },
                    { offset: 0.37, color: 'rgba(255,255,255,0.1)' },
                    { offset: 0.67, color: 'rgba(255,255,255,0.1)' },
                    { offset: 1, color: '#abcdff' }
                ]
            )
            ]
        ]
    }
},
```
**是多个颜色分段的话就是这样设置**
```
color: [
    [0.25, '#FF6E76'],
    [0.5, '#FDDD60'],
    [0.75, '#58D9F9'],
    [1, '#7CFFB2']
]
```

剑轩

echarts 仪表盘gauge颜色渐变。echarts圆环进度条。echarts圆环进度条弧形

{{item.title}}