仪表盘（用ECharts绘制）
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仪表盘（用ECharts绘制）相关的知识，希望对你有一定的参考价值。
仪表盘主要用在进度把控和数据范围的监测
基本实现
1.基本的代码结构
2.在series下面设置type:guage
3.在series下面的data配置数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'))
var option = {
series: [
{
type: 'gauge',
data: [
{
value: 97 //每一个对象就代表一个指针
}
]
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
常用效果
数值范围 min、max
多个指针 增加data中的数组元素
指针样式 itemStyle
//其它代码和上面一样
var option = {
series: [
{
type: 'gauge',
data: [
{
value: 97, //每一个对象就代表一个指针
itemStyle: {
color: 'pink'
},
detail: {
show: false //不显示数据
}
},
{
value: 85,
itemStyle: {
color: 'green'
},
detail: {
show: false //不显示数据
}
}
],
min: 50 //min、max控制仪表盘的数值范围
}
]
}
以上是关于仪表盘（用ECharts绘制）的主要内容，如果未能解决你的问题，请参考以下文章