7、图表7 仪表盘图
1.仪表盘的实现步骤
步骤1 ECharts 最基本的代码结构
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
此时 option 是一个空空如也的对象
步骤2: 准备数据, 设置给 series 下的 data
data:[97]
步骤3: 在 series 下设置 type:gauge
代码语言：javascript复制var option = {
series: [{
type: 'gauge',
data: [{
value: 97,
}]
}]
}
2.仪表盘的常见效果
数值范围: max min
多个指针: 增加data中数组的元素
多个指针颜色的差异: itemStyle
代码语言：javascript复制var option = {
series: [{
type: 'gauge',
data: [{
value: 97,
itemStyle: {
color: 'pink'
}
}, {
value: 85,
itemStyle: {
color: 'green'
}
}],
min: 50
}]
}
3.仪表盘的特点
仪表盘可以更直观的表现出某个指标的进度或实际情况
