本站所有转载资源全部来源于本站会员，仅供下载学习与参考，请勿用于商业用途，下载学习试用后请于24小时内删除，如有条件请支持正版，如有侵权请联系删除，谢谢。
资源介绍
一、通用组件使用方式
1. 引入依赖
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>仪表盘-进度条百分比</title> </head> <body> <div id="chart" style="width: 100%;height:100%;"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/echarts/4.8.0/echarts.min.js"></script> </body> </html>
2. 绘制图表
var myChart = echarts.init(document.getElementById('chart'));
var option;
var value = 90;
option = {
backgroundColor: '000',
title: {
text: `${value}分`,
subtext: '综合评分',
left: 'center',
top: 'center', //top待调整
textStyle: {
color: '#fff',
fontSize: 50,
fontFamily: 'DINAlternate-Bold',
},
subtextStyle: {
color: '#ff',
fontSize: 30,
fontFamily: 'PingFangSC-Regular',
top: 'center'
},
itemGap: -4 //主副标题间距
},
xAxis: {
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
}
// data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {
splitLine: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false
}
},
series: [
// 内圆
{
type: 'pie',
radius: ['0', '50%'],
center: ['50%', '50%'],
hoverAnimation:false,
z: 0,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#FFC600'
},
{
offset: 0.5,
color: '#30D27C'
},
{
offset: 1,
color: '#0B95FF'
}
]),
label: {
show: false
},
labelLine: {
show: false
}
},
},
label: {
normal: {
position: "center",
}
},
data: [100],
},
// 进度圈
{
type: 'pie',
clockWise: true,
radius: ["60%", "55%"],
hoverAnimation:false,
data: [{
value: value,
itemStyle: {
normal: {
borderWidth: 10,
borderColor: {
colorStops: [{
offset: 0,
color: '#FFC600' || '#30D27C' // 0% 处的颜色
}, {
offset: 1,
color: '#0B95FF' || '#367bec' // 100% 处的颜色
}]
},
color: { // 完成的圆环的颜色
colorStops: [{
offset: 0,
color: '#FFC600' || '#30D27C' // 0% 处的颜色
}, {
offset: 1,
color: '#0B95FF' || '#367bec' // 100% 处的颜色
}]
},
label: {
show: false
},
labelLine: {
show: false
},
},
}
},
{
name: 'gap',
value: 100 - value,
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
}
},
}
]
},
//刻度尺
{
// name: "白色圈刻度",
type: "gauge",
radius: "67%",
startAngle: 225, //刻度起始
endAngle: -134.8, //刻度结束
z: 4,
axisTick: {
show: true,
lineStyle: {
width: 2,
color: 'rgba(1,244,255, 0.9)'
}
},
splitLine: {
length: 16, //刻度节点线长度
lineStyle: {
width: 2,
color: 'rgba(1,244,255, 0.9)'
} //刻度节点线
},
axisLabel: {
color: 'rgba(255,255,255,0)',
fontSize: 12,
}, //刻度节点文字颜色
pointer: {
show: false
},
axisLine: {
lineStyle: {
opacity: 0
}
},
detail: {
show: false
},
data: [{
value: 0,
name: ""
}]
},
]
};
myChart.setOption(option);
3. 生成的Option配置
{
"backgroundColor": "000",
"title": {
"text": "90分",
"subtext": "综合评分",
"left": "center",
"top": "center",
"textStyle": {
"color": "#fff",
"fontSize": 50,
"fontFamily": "DINAlternate-Bold"
},
"subtextStyle": {
"color": "#ff",
"fontSize": 30,
"fontFamily": "PingFangSC-Regular",
"top": "center"
},
"itemGap": -4
},
"xAxis": {
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisLine": {
"show": false
}
},
"yAxis": {
"splitLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisLine": {
"show": false
}
},
"series": [{
"type": "pie",
"radius": ["0", "50%"],
"center": ["50%", "50%"],
"hoverAnimation": false,
"z": 0,
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [{
"offset": 0,
"color": "#FFC600"
}, {
"offset": 0.5,
"color": "#30D27C"
}, {
"offset": 1,
"color": "#0B95FF"
}]
},
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
},
"label": {
"normal": {
"position": "center"
}
},
"data": [100]
}, {
"type": "pie",
"clockWise": true,
"radius": ["60%", "55%"],
"hoverAnimation": false,
"data": [{
"value": 90,
"itemStyle": {
"normal": {
"borderWidth": 10,
"borderColor": {
"colorStops": [{
"offset": 0,
"color": "#FFC600"
}, {
"offset": 1,
"color": "#0B95FF"
}]
},
"color": {
"colorStops": [{
"offset": 0,
"color": "#FFC600"
}, {
"offset": 1,
"color": "#0B95FF"
}]
},
"label": {
"show": false
},
"labelLine": {
"show": false
}
}
}
}, {
"name": "gap",
"value": 10,
"itemStyle": {
"normal": {
"label": {
"show": false
},
"labelLine": {
"show": false
},
"color": "rgba(0, 0, 0, 0)",
"borderColor": "rgba(0, 0, 0, 0)",
"borderWidth": 0
}
}
}]
}, {
"type": "gauge",
"radius": "67%",
"startAngle": 225,
"endAngle": -134.8,
"z": 4,
"axisTick": {
"show": true,
"lineStyle": {
"width": 2,
"color": "rgba(1,244,255, 0.9)"
}
},
"splitLine": {
"length": 16,
"lineStyle": {
"width": 2,
"color": "rgba(1,244,255, 0.9)"
}
},
"axisLabel": {
"color": "rgba(255,255,255,0)",
"fontSize": 12
},
"pointer": {
"show": false
},
"axisLine": {
"lineStyle": {
"opacity": 0
}
},
"detail": {
"show": false
},
"data": [{
"value": 0,
"name": ""
}]
}]
}
END
上一篇 仪表盘-堆叠进度条效果
下一篇 仪表盘-分段效果
