web前端全系列 教程
1839个小节阅读:2244.3k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
前面介绍的单仪表盘,相对比较简单,只能表示一类事物的范围情况。 如果需要同时表现几类不同事物的范围情况,那么应该使用多仪表盘进行展示。利用汽车的速度、发动机的转速、油表和水表的数据展示汽车的现状
xxxxxxxxxx
<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="./echarts.js"></script>
</head>
<body>
<div id="main" style="width: 800px; height: 600px"></div>
<script>
var myChart = echarts.init(document.getElementById("main"));
var option = {
title: { //配置标题组件
text: '汽车仪表盘',
x: 'center',
y: 100,
show: true, //设置是否显示标题,默认true
textStyle: {
color: "blue", //设置字体颜色,默认#333
fontSize: 20, //设置字体大小,默认15
}
},
series: [ //配置数据系列,共有4个仪表盘
{ //设置数据系列之1:速度
name: '速度',
type: 'gauge',
min: 0, //设置速度仪表盘的最小值
max: 220, //设置速度仪表盘的最大值
splitNumber: 11, //设置速度仪表盘的分隔数目为22
radius: '50%', //设置速度仪表盘的大小
data: [{ value: 40, name: '车速(km/h)' }]
},
{ //设置数据系列之2:转速
name: '转速',
type: 'gauge',
center: ['20%', '55%'], //设置转速仪表盘中心点的位置,默认全局居中
radius: '35%', //设置转速油表仪表盘的大小
min: 0, //设置转速仪表盘的最小值
max: 7, //设置转速仪表盘的最大值
endAngle: 45,
splitNumber: 7, //设置转速仪表盘的分隔数目为7
title: { offsetCenter: [0, '-30%'], },
data: [
{
value: 1.5,
name: '转速',
}
]
},
{ //设置数据系列之3:油表
name: '油表',
type: 'gauge',
center: ['77%', '50%'], //设置油表仪表盘中心点的位置,默认全局居中
radius: '25%', //设置油表仪表盘的大小
min: 0, //设置油表仪表盘的最小值
max: 2, //设置油表仪表盘的最小值
startAngle: 135,
endAngle: 45,
splitNumber: 2, //设置油表的分隔数目为2
axisLabel: {
formatter: function (v) {
switch (v + '') {
case '0': return 'E';
case '1': return '油表';
case '2': return 'F';
}
}
},
title: { show: false },
detail: { show: false },
data: [{ value: 0.5, name: 'gas' }]
},
{ //设置数据系列之4:水表
name: '水表',
type: 'gauge',
center: ['77%', '50%'], //设置水表仪表盘中心点的位置,默认全局居中
radius: '25%', //设置水表仪表盘的大小
min: 0, //设置水表的最小值
max: 2, //设置水表的最大值
startAngle: 315,
endAngle: 225,
splitNumber: 2, //设置分隔数目
axisLabel: {
formatter: function (v) {
switch (v + '') {
case '0': return 'H';
case '1': return '水表';
case '2': return 'C';
}
}
},
title: { show: false },
detail: { show: false },
data: [{ value: 0.5, name: 'gas' }]
}
]
};
myChart.setOption(option, true);
</script>
</body>
</html>