Echarts 多仪表盘
echarts 作业三
一、任务需求
实现一个汽车仪表盘，需包含四个仪表盘。
二、使用步骤
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- <script src="../../lib/echarts.js"></script>-->
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"),'dark');
var color1 = [[0.33, "rgba(0,255,0,1)"], [0.5, "rgba(0,255,255,1)"],[1, "rgba(255,0,0,1)"] ];
var option = {
backgroundColor:'rgb(0,0,0,1)',
title:{
text:'汽车仪表盘',
textStyle:{
fontsize:30,
color:'#DC143C'
},
x:'45%',
y:'10%'
},
tooltip:{
formatter:'{a}<br/>{b}:{c}'
},
series:[
{
name:'仪表盘',
type:'gauge',
min:0,
max:240,
radius:'50%',
splitNumber:12,
axisLine:{
lineStyle:{
width:5,
color:color1,
}
},
axisTick:{
length:10,splitNumber: 5,lineStyle: {color:'#FDCF20'}
},
splitLine:{
length: 20,
lineStyle:{color: '#FDCF20',}
},
title:{
textStyle:{fontWeight:'bolder',fontsize:20,fontStyle:'italic',color:'auto'},
},
pointer:{
show:true,
length:'75%',
width: 10
},
itemStyle:{
color:color1,
shadowBlur: 20,
shadowColor: "pink",
},
detail:{
show:true,
color:'auto',
formatter: '{value}'
},
data:
[ {name:'速度表(km/h)', value:20},
]
},
{
name: '转速', type: 'gauge',
center: ['20%', '55%'], //设置转速仪表盘中心点的位置，默认全局居中
radius: '35%', //设置转速油表仪表盘的大小
min: 0, //设置转速仪表盘的最小值
max: 7, //设置转速仪表盘的最大值
endAngle: 45,
splitNumber: 7, //设置转速仪表盘的分隔数目为7
axisLine: { show:true,lineStyle: { width: 4 ,color:color1} }, //设置属性lineStyle控制线条样式
axisTick: { //设置坐标轴小标记
length: 6, //设置属性length控制线长
splitNumber: 5, //设置坐标轴小标记的分隔数目为5
lineStyle: { //设置属性lineStyle控制线条样式
color: '#FDCF20'
}
},
splitLine: { //设置分隔线
length: 10, //设置属性length控制线长
lineStyle: { //设置属性lineStyle（详见lineStyle）控制线条样式
color: '#FDCF20'
}
},
pointer:{
show:true,
length:'70%',
width: 5
},
itemStyle:{
color:color1,
shadowBlur: 20, //设置(发光效果)图形阴影的模糊大小
shadowColor: "pink", //设置阴影颜色，支持的格式同color
},
title: {
offsetCenter: ['30% ', '-30%'],
textStyle:{fontWeight:'bolder',fontsize:3,fontStyle:'italic',color:'auto'},
},
detail: { textStyle: { fontWeight: 'bolder' ,fontSize:20,color:'auto'},formatter: '{value} ' },
data: [{ value: 1.5, name: '转速(x1000 r/m)' }]
},
{
name:'里程',type:'gauge',
center: ['80%','50%'],
min:0,
max:10,
startAngle:135,
endAngle: 45,
splitNumber: 5,
radius: '35%',
axisLine: {
lineStyle: {color:color1,width:3}
},
axisTick: {
splitNumber: 5,
length: 5,
lineStyle: {color:'#FDCF20'}
},
splitLine: {
length: 15,lineStyle: {color: '#FDCF20'}
},
pointer: {
show: true,
width: 3,
length: '70%'
},
itemStyle: {
color:color1,
shadowBlur: 10,
shadowColor: 'white'
},
title: {
offsetCenter: ['0', '-120%'],
textStyle:{fontWeight:'bolder',fontsize:3,fontStyle:'italic',color:'auto'},
},
detail: { show:false,textStyle: { fontWeight: 'bolder' ,fontSize:20,color:'auto'},formatter: '{value} ' },
data: [{ value: 1.5, name: '里程表(x1000 KM)' }]
},
{
name: '油表', type: 'gauge',
center: ['80%','50%'],
radius: '35%',
min: 0,
max: 2,
startAngle: 315, endAngle: 225,
splitNumber: 2,
axisLine: { lineStyle: { width: 3 ,color: color1} }, //设置属性lineStyle控制线条样式
axisTick: {
splitNumber: 5,
length: 10,
lineStyle: {
color: '#FDCF20'
}
},
axisLabel: {
formatter: function (v) {
switch (v + '') {
case '0': return 'E';
case '1': return '油表';
case '2': return 'F';
}
}
},
splitLine: {
length: 15,
lineStyle: {
color: '#FDCF20'
}
},
pointer: { width: 4 },
itemStyle: {
color:'yellow',
shadowBlur: 10,
shadowColor: 'white'
},
title: { show: false },
detail: { show: false },
data: [{ value: 0.5, name: 'gas' }]
},
]
}
setInterval(function (arg) {
var num = Math.random()
option.series[0].data[0].value = (num*240).toFixed(2);
option.series[1].data[0].value = (num*7).toFixed(2);
option.series[2].data[0].value = (num*10).toFixed(2);
option.series[3].data[0].value = (num*10).toFixed(2);
myChart.setOption(option)
},1000)
</script>
</body>
</html>
结果：
总结
简简单单
