ehcarts半圆型进度条
说明：
1.引入jQuery https://code.jquery.com/jquery-3.1.1.min.js
2.引入echarts https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js
效果如下：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.echarts {
width: 200px;
height: 200px;
background: #ccc;
margin: 0 auto;
}
</style>
<body>
<div class="echarts" id="echarts">
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('echarts'));
var data = {
value: 80,
color: {
pieMini: '#0f0', //小圆形颜色
piePlus: '#01fea2', //大圆形颜色
value: '#687284', //底部数值颜色
},
}
option = {
backgroundColor: '#000200',
series: [{
"name": "仪表盘",
"type": "gauge",
"splitNumber": 10,
"axisLine": {
"lineStyle": {
"color": [
[0, "#46da04"], //初始值及颜色
[data.value / 100, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0.1,
color: "#46da04"
},
{
offset: 0.6,
color: "#1bf066"
},
{
offset: 1,
color: "#02fea0"
}
])], //渐变值颜色
[1, new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0.1,
color: "#0f1331"
},
{
offset: 0.8,
color: "#102831"
},
{
offset: 1,
color: "#113430"
}
])] //底层颜色渐变
],
"width": 10
}
},
detail: {
offsetCenter: [0, "5%"], //数值的显示位置
formatter: '{value}%',
textStyle: {
//仪表盘的数值单位及颜色，字体大小的改变
fontSize: 20,
color: '#ffd200',
top: '100%',
}
},
axisLabel: {
show: false,
},
"axisTick": {
show: false,
},
"splitLine": {
"show": false,
},
"itemStyle": {
show: false,
},
"title": {
"offsetCenter": [0, "75%"],
"textStyle": {
color: '#00ffa5',
fontSize: 12,
fontFamily: '"Microsoft Yahei","微软雅黑"',
}
},
"data": [{
"name": "健康资料\n完善率",
"value": data.value,
}],
pointer: {
show: false,
},
}, ]
}
myChart.setOption(option);
</script>