1. echarts仪表盘实现效果如下

2. 配置项代码:

const option = {

// 鼠标悬浮的提示

tooltip: {

formatter: '{b} : {c}'

},

series: [

{

type: 'gauge',

min: 0, //最大值

max: 100, //最小值

startAngle: 200, //仪表盘起始角度。正右手侧为0度,正上方为90度,正左手侧为180度。

endAngle: -20, //仪表盘结束角度

splitNumber: 5, //仪表盘刻度的分割段数

itemStyle: {

color: '#f37215', //颜色

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: 1,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: '#f12711' // 0% 处的颜色

},

{

offset: 1,

color: '#f5af19' // 100% 处的颜色

}

],

global: false // 缺省为 false

}

}

},

pointer: {

show: true, //是否显示指针

itemStyle: {

color: {

type: 'linear',

x: 1,

y: 0,

x2: 0,

y2: 1,

colorStops: [

{

offset: 0,

color: '#f12711' // 0% 处的颜色

},

{

offset: 1,

color: '#f5af19' // 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

},

detail: {

show: true, //是否显示详情

valueAnimation: true, //是否开启标签的数字动画

borderRadius: 8, //文字块的圆角

offsetCenter: [0, '70%'], //相对于仪表盘中心的偏移位置,数组第一项是水平方向的偏移,第二项是垂直方向的偏移。可以是绝对的数值,也可以是相对于仪表盘半径的百分比

fontSize: 50, //文字的字体大小

fontWeight: 'bolder', //文字字体的粗细

formatter: '{value}', //格式化函数或者字符串

color: 'auto' //文本颜色

},

data: [

{

value: 90,

name: '高危'

}

]

}

]

};

注意:echarts仪表盘不支持dataset

参考阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: