多县市区指标仪表盘legend选择查看echarts grey配置项内容和展示
让指针动起来。
配置项如下
option = {
animation: true,
animationThreshold: 2000,
animationDuration: 1000,
animationEasing: "cubicOut",
animationDelay: 0,
animationDurationUpdate: 300,
animationEasingUpdate: "cubicOut",
animationDelayUpdate: 0,
color: [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
series: [{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u5fb7\u57ce\u533a",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u5fb7\u57ce\u533a",
value: 0.75
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u5e86\u4e91\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u5e86\u4e91\u53bf",
value: 0.78
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u4e34\u9091\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u4e34\u9091\u53bf",
value: 0.33
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u5b81\u6d25\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u5b81\u6d25\u53bf",
value: 1.48
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u4e50\u9675\u5e02",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u4e50\u9675\u5e02",
value: 0.53
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u9675\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u9675\u53bf",
value: 1.25
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u5e73\u539f\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u5e73\u539f\u53bf",
value: 0.39
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u6b66\u57ce\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u6b66\u57ce\u53bf",
value: 0.29
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u590f\u6d25\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u590f\u6d25\u53bf",
value: 1.27
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u9f50\u6cb3\u53bf",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u9f50\u6cb3\u53bf",
value: 0.94
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
},
{
type: "gauge",
title: {
show: true,
position: "top",
color: "green",
margin: 8,
fontSize: 12
},
detail: {
show: true,
position: "top",
color: "white",
margin: 8,
fontSize: 12,
formatter: "{value}%",
backgroundColor: "green"
},
name: "\u79b9\u57ce\u5e02",
min: 0,
max: 1.5,
splitNumber: 5,
radius: "85%",
startAngle: 225,
endAngle: -45,
data: [{
name: "\u79b9\u57ce\u5e02",
value: 0.31
}],
axisLine: {
show: true,
onZero: true,
onZeroAxisIndex: 0
},
itemStyle: {
color: "red",
opacity: 1
}
}
],
legend: [{
data: [
"\u5fb7\u57ce\u533a",
"\u5e86\u4e91\u53bf",
"\u4e34\u9091\u53bf",
"\u5b81\u6d25\u53bf",
"\u4e50\u9675\u5e02",
"\u9675\u53bf",
"\u5e73\u539f\u53bf",
"\u6b66\u57ce\u53bf",
"\u590f\u6d25\u53bf",
"\u9f50\u6cb3\u53bf",
"\u79b9\u57ce\u5e02"
],
selected: {
"\u5fb7\u57ce\u533a": false,
"\u5e86\u4e91\u53bf": false,
"\u4e34\u9091\u53bf": false,
"\u5b81\u6d25\u53bf": false,
"\u4e50\u9675\u5e02": false,
"\u9675\u53bf": false,
"\u5e73\u539f\u53bf": true,
"\u6b66\u57ce\u53bf": false,
"\u590f\u6d25\u53bf": false,
"\u9f50\u6cb3\u53bf": false,
"\u79b9\u57ce\u5e02": false
},
type: "scroll",
selectedMode: "single",
show: true,
left: "left",
top: "top",
padding: 0,
itemGap: 2,
itemWidth: 5,
itemHeight: 7,
inactiveColor:'grey',
textStyle: {color:'red'}
}],
tooltip: {
show: true,
trigger: "item",
triggerOn: "mousemove|click",
axisPointer: {
type: "line"
},
formatter: "{a} <br/>{b} : {c}%",
textStyle: {
fontSize: 14
},
borderWidth: 0
},
title: [{
padding: 5,
itemGap: 10
}]
};
setInterval(function () {
var i = 0;
var name = option.legend[0].data[i];
console.log(i, name, option.legend[0].selected[name]);
while (i < 10) {
//option.legend[0].selected[name]='false' ;
if (option.legend[0].selected[name] == true)
{ break;}
else {
i++;
name = option.legend[0].data[i];
}
console.log(i, name, option.legend[0].selected[name]);
}
//option.legend[0].selected[name]='true' ;
option.series[i].axisLine.show=true;
option.series[i].splitLine = {
//show:'true'
distance: -30,
length: 30,
lineStyle: {
color: 'white',
width: 4
}
};
//console.log("end1====",i,name,option.legend[0].selected[name])
option.series[i].data[0].value = (Math.random() * 1.5).toFixed(2) - 0;
//option.series[6].data[0].value = (Math.random() * 1.5).toFixed(2) - 0;
myChart.setOption(option, true);
}, 2000);
myChart.on('legendselectchanged', function(param) {
var selectedName = param.name;
console.log(selectedName, "selectedName", param);
option.legend[0].selected = param.selected;
console.log(selectedName, "option.legend[0].selectede", option.legend[0].selected);
});
截图如下
