配置项如下
let datas = {
title: "上证指数",
value: "5.9"
};
let max = 10;
let value = datas.value;
let degrees = 180 - (180 * value) / max;
//图表配置
let centerArr = ["50%", "70%"];
let label = {
0: '冷',
10: '热'
}
let colorList = ['#FF951A', '#FB1A1A']
if(value < max/3){
colorList = ['#1AC1FF', '#1A32FF']
}else if(value < (max/3*2)){
colorList = ['#FFBD1A', '#FF8420']
}
let colorSet = new echarts.graphic.LinearGradient(
0, 1, 0, 0, [{
offset: 0,
color: colorList[0],
},
{
offset: 1,
color: colorList[1],
}
]
);
option = {
backgroundColor: '#fff',
series: [
{
name: "最外圈冷热标签",
type: "gauge",
z: 2,
radius: "120%",
splitNumber: 1,
startAngle: 180,
endAngle: 0,
min: 0,
max: max,
center: centerArr, //整体的位置设置
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
detail: {
show: false
},
axisLabel: {
show: true,
textStyle: {
color: "#D7D5D5",
fontSize: 12
},
formatter: function(val) {
return label[val]
}
}
},
{
name: "灰色刻度尺",
type: "gauge",
z: 4,
radius: "95%",
splitNumber: 2,
startAngle: 180,
endAngle: 0,
center: centerArr, //整体的位置设置
max: max,
axisLine: {
// 坐标轴线
lineStyle: {
// 属性lineStyle控制线条样式
color: [
[0.8, "#D7D5D5"],
[1, "#D7D5D5"]
],
width: 25,
opacity: 0 //刻度背景宽度
}
},
axisLabel: {
show: true
},
pointer: {
show: false
},
axisTick: {
show: true,
lineStyle: {
color: "#efefef",
width: 3
},
length: 8,
splitNumber: 15
},
detail: {
formatter: function(params) { //图表中间文字数据展示
return (
"{v|" + value + "\n" + "}{t|" + datas.title + "}"
);
},
rich: {
v: {
fontSize: 48,
color: "#000",
padding: 20
},
t: {
fontSize: 14,
color: "#929292"
}
},
offsetCenter: ["0", "-10%"]
},
splitLine: {
length: 25, //刻度节点线长度
lineStyle: {
width: 4,
color: "#efefef"
} //刻度节点线
}
},
{
type: "pie",
color: ["transparent", 'transparent','transparent'],
animationEasingUpdate: 'cubicOut',
startAngle: 180,
center: centerArr,
radius: ['96.5%', '98%'],
hoverAnimation: false,
labelLine: {
show: false
},
data: [{
name: "",
value: value,
itemStyle: {
normal: {
show: true,
color: colorSet,
shadowBlur: 8,
shadowColor: colorList[0],
shadowOffsetX: 0,
shadowOffsetY: 4,
width: 6
},
},
},
{ //画中间的图标
name: "",
value: 0,
label: {
rotate: 90,
position: 'inside',
width: 20,
height: 20,
padding: 20,
verticalAlign: 'bottom',
backgroundColor: colorList[0],
borderRadius: 20,
borderWidth: 6,
// borderColor: colorList[0],
shadowColor: 'rgba(255,130,26,0.60)',
shadowBlur: 10,
shadowOffsetY: 4
}
}, { //画剩余的刻度圆环
name: "",
value: 10 - value,
itemStyle: {
color: '#fafafa'
}
}, { //画剩余的刻度圆环
name: "",
value: 10,
}
]
}
],
};