目前做出的效果为:
ui给出的效果图如下:
核心代码:
var option = {
series: [
{
name: "市民健康业务域",
type: "gauge",
center: ["50%", "50%"], // 默认全局居中
radius: "94%",
axisLine: {
show: false,
lineStyle: { // 属性lineStyle控制线条样式
color: [
[0.63, "#ffd71a"],
[1, "#494c3b"]
],
width: 5
}
},
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
pointer: {
show: false
},
detail: {
formatter : "{score|{value}}\n{name|健康指数}",
offsetCenter: [0, "5%"],
rich : {
score : {
color : "#ffd71a",
fontFamily : "微软雅黑",
fontSize : 32
},
name : {
height : 25,
color : "#526680",
fontFamily : "微软雅黑",
fontSize : 14
}
}
},
data: [{
value: 80,
label: {
textStyle: {
fontSize: 12
}
}
}]
},
{
type : "gauge",
center: ["50%", "50%"], // 默认全局居中
radius : "83%",
axisLine : {
show : true,
lineStyle : { // 属性lineStyle控制线条样式
color : [
[ 0.1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 1,
color: "rgba(59, 71, 82, 0)" // 0% 处的颜色
}, {
offset: 0,
color: "rgba(59, 71, 82, 0.5)" // 100% 处的颜色
}], false) ],
[ 0.9, "rgba(59, 71, 82, 0.5)" ],
[ 1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 1,
color: "rgba(59, 71, 82, 0.5)" // 0% 处的颜色
},
{
offset: 0.8,
color: "rgba(59, 71, 82, 0.3)" // 0% 处的颜色
},
{
offset: 0.5,
color: "rgba(59, 71, 82, 0.2)" // 0% 处的颜色
},
{
offset: 0,
color: "rgba(59, 71, 82, 0)" // 100% 处的颜色
}], false) ]
],
width : 18
}
},
splitLine : {
show : false,
length : 2
},
axisTick : {
show : false
},
axisLabel : {
formatter : function ( e ) {
if ( e == 0 || e == 100 ) {
return "";
}
return e;
},
color : "#c2b6b6",
fontFamily : "Arial",
distance : 0
},
pointer : {
show : false
},
detail : {
show : false
}
}
]
};
请问仪表盘上的文字要怎么才能让其旋转呢?
试过rolate 并没有效果
谢谢
目前Echarts在仪表盘还不支持这种文字的旋转,不过你可以换另一种方式,用html标签加+css3可以做到的