效果图如下:
image
echarts配置，可复制到echarts官网测试,地址:echarts测试地址
var colors = [
'#006EFF',
'#52C41A',
'#F6A328',
'#FF4D4F',
'#FF0F1F'
];
option = {
// 鼠标悬浮的提示
tooltip: {
formatter: '{b} : {c}'
},
series: [
{
type: 'gauge',
min: 0, //最大值
max: 100, //最小值
startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -20, //仪表盘结束角度
splitNumber: 4, //仪表盘刻度的分割段数
itemStyle: {
color: '#000', //颜色
shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
shadowBlur: 10, //图形阴影的模糊大小
shadowOffsetX: 2, //阴影水平方向上的偏移距离
shadowOffsetY: 2 //阴影垂直方向上的偏移距离
},
progress: {
show: true, //是否显示进度条
roundCap: true, //是否在两端显示成圆形
width: 18, //进度条宽度
itemStyle: {
color: {
type: 'linear',
x: 0.8,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[4] // 0% 处的颜色
},
{
offset: 0.25,
color: colors[3] // 25% 处的颜色
},
{
offset: 0.5,
color: colors[2] // 50% 处的颜色
},
{
offset: 0.75,
color: colors[1] // 75% 处的颜色
},
{
offset: 1,
color: colors[0] // 100% 处的颜色
}
],
global: false
}
}
},
pointer: {
show: true, //是否显示指针
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF4D4F' // 0% 处的颜色
},
{
offset: 1,
color: '#F6A328' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
axisLine: {
show: true, //是否显示仪表盘轴线
roundCap: true, //是否在两端显示成圆形
lineStyle: {
width: 18 //轴线宽度
}
},
axisTick: {
show: true, //是否显示刻度
distance: -29,
itemStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
show: true, //是否显示分隔线
distance: -30
},
axisLabel: {
show: true, //是否显示标签
distance: -10
},
title: {
show: true, //是否显示标题
fontSize: 20
},
data: [
{
value: 80,
name: '仪表盘'
}
]
}
]
}
下面附完整测试demo代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts仪表盘渐变进度条,指针动态渐变色显示</title>
<style>
#test {
width: 500px;
height: 500px;
}
</style>
<!-- 根据自己项目CDN引入或者npm下载 -->
<script src="./echarts.min.js"></script>
</head>
<body>
<div id="test"></div>
<input type="number" id="inp" value="50">
<button onclick="submits()">测试</button>
</body>
<script>
var init = (colorarr, num) => {
var chartDom = document.getElementById('test');
var myChart = echarts.init(chartDom);
var option;
var colors = colorarr ? colorarr : [
'#006EFF',
'#52C41A',
'#F6A328',
'#FF4D4F',
'#FF0F1F'
];
option = {
// 鼠标悬浮的提示
tooltip: {
formatter: '{b} : {c}'
},
series: [
{
type: 'gauge',
min: 0, //最大值
max: 100, //最小值
startAngle: 200, //仪表盘起始角度。正右手侧为0度，正上方为90度，正左手侧为180度。
endAngle: -20, //仪表盘结束角度
splitNumber: 4, //仪表盘刻度的分割段数
itemStyle: {
color: '#000', //颜色
shadowColor: 'rgba(0,138,255,0.45)', //阴影颜色
shadowBlur: 10, //图形阴影的模糊大小
shadowOffsetX: 2, //阴影水平方向上的偏移距离
shadowOffsetY: 2 //阴影垂直方向上的偏移距离
},
progress: {
show: true, //是否显示进度条
roundCap: true, //是否在两端显示成圆形
width: 18, //进度条宽度
itemStyle: {
color: {
type: 'linear',
x: 0.8,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colors[4] // 0% 处的颜色
},
{
offset: 0.25,
color: colors[3] // 25% 处的颜色
},
{
offset: 0.5,
color: colors[2] // 50% 处的颜色
},
{
offset: 0.75,
color: colors[1] // 75% 处的颜色
},
{
offset: 1,
color: colors[0] // 100% 处的颜色
}
],
global: false
}
}
},
pointer: {
show: true, //是否显示指针
itemStyle: {
color: {
type: 'linear',
x: 1,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#FF4D4F' // 0% 处的颜色
},
{
offset: 1,
color: '#F6A328' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
axisLine: {
show: true, //是否显示仪表盘轴线
roundCap: true, //是否在两端显示成圆形
lineStyle: {
width: 18 //轴线宽度
}
},
axisTick: {
show: true, //是否显示刻度
distance: -29,
itemStyle: {
color: '#fff',
width: 2
}
},
splitLine: {
show: true, //是否显示分隔线
distance: -30
},
axisLabel: {
show: true, //是否显示标签
distance: -10
},
title: {
show: true, //是否显示标题
fontSize: 20
},
data: [
{
value: num || 20,
name: '仪表盘'
}
]
}
]
}
option && myChart.setOption(option);
}
// 动态改变仪表数值
let submits = () => {
var inp = document.getElementById('inp');
const num = inp.value
if (num) {
var colors = [];
if (num <= 20) {
colors = [
'#006EFF',
'#006EFF',
'#006EFF',
'#006EFF',
'#006EFF'
];
}
if (num > 20 && num <= 40) {
colors = [
'#006EFF',
'#006EFF',
'#52C41A',
'#52C41A',
'#52C41A'
];
}
if (num > 40 && num <= 60) {
colors = [
'#006EFF',
'#52C41A',
'#52C41A',
'#F6A328',
'#F6A328'
];
}
if (num > 60 && num <= 80) {
colors = [
'#006EFF',
'#52C41A',
'#F6A328',
'#FF4D4F',
'#FF0F1F'
];
}
if (num > 80 && num <= 100) {
colors = [
'#006EFF',
'#52C41A',
'#F6A328',
'#FF4D4F',
'#FF0F1F'
];
}
if (num > 100) num = 100
init(colors, num)
}
return false
}
window.onload = () => {
submits()
}
</script>
</html>
原文来源于：地址
