1，需求：需要仪表盘只显示刻度并且有渐变色效果。
2，试过很多只需要几步就可以显示：
（1），首先就必须把width设置成0;
（2），对分割线，刻度线的color设置成auto;
3，话不多说，直接上代码:
var option = {
title: { //标题组件
text: '80%',
subtext: '',
itemGap: 150,//上下标题间距
textStyle: {
color: '#fff', //文字颜色
fontStyle: 'normal', //字体风格：'normal','italic','oblique'
fontWeight: 'bold', //字体粗细 ：'normal','bold','bolder','lighter',100 | 200 | 300 | 400...//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 82, //字体大小
},
subtextStyle: {
color: '#fff', //文字颜色
fontStyle: 'normal', //字体风格：'normal','italic','oblique'
fontFamily: 'PingFang SC-Bold, PingFang SC',//字体系列： 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 24, //字体大小
},
x: 'center',//设置标题居中
// y:'center',
bottom: 10,
},
tooltip: {
formatter: "{a} <br/>{b} : {c}"
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: { formatter: '{value}' }, //仪表盘显示数据
axisLine: { //仪表盘轴线样式
show: true,
lineStyle: {
width: 0,
color: [[0.3, 'rgb(26,143,255)'],[0.5, 'rgb(23,151,255)'],[0.7, 'rgb(13,213,253)'],[0.8, 'rgb(9,237,253)'],[1, 'rgb(70,100,144)']],
// opacity: 0.6, //盘的颜色变成透明
}
},
axisLabel: {
show: false,
lineStyle: {
width: 20,
color: 'auto'
// color: [[0.8, '#0066FF'], [1, '#E6EBF8']],
// opacity: 0.4, //盘的颜色变成透明
}
},
splitLine: { //分割线样式,是大分割线
show: true,
length: 20,
// 距离线的位置
// distance: 0,
lineStyle: {
color: 'auto',
width: 5,
// color: [[0.8, '#0066FF'], [1, '#E6EBF8']],
opacity: 1,
}
},
// 刻度线
axisTick: {
show: true,
length: 20,
splitNumber: 5, // 每个分割线内的刻度线分为5份
lineStyle: {
color: 'auto',
width: 5,
opacity: 1,
}
},
// data: [{ value: '80' }],
markPoint: {
show:false,
symbol: 'circle',
symbolSize: 0,
data: [
//跟你的仪表盘的中心位置对应上，颜色可以和画板底色一样
{ value: '', x: 'center', y: 'center', itemStyle: { color: '#fff' } }
],
itemStyle: {
normal: {
label: {
show: true,
color: '#FFF',//气泡中字体颜色
fontSize: 0
}
}
},
},
detail: { // 仪表盘详情，用于显示数据。(仪表盘的数值字体样式和显示位置)
show: true, // 是否显示详情,默认 true。
offsetCenter: [0, 0],// 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
color: "#fff", // 文字的颜色,默认 auto。
fontSize: 10, // 文字的字体大小,默认 15。
formatter: "{value}", // 格式化函数或者字符串
},
pointer: { // 仪表盘指针。
show: false, // 是否显示指针,默认 true。
length: "60%", // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
width: 15, // 指针宽度,默认 8。
},
itemStyle: { // 仪表盘指针样式。
color: "#0066FF", // 指针颜色，默认(auto)取数值所在的区间的颜色
opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
borderType: "solid", // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
borderColor: "#fff", // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
// shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: "#fff", // 阴影颜色。支持的格式同color。
},
}
]
};
936
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
