用js实现汽车仪表盘
程序员文章站
2022-05-02 15:39:56
...
这次给大家带来用js实现汽车仪表盘，用js实现汽车仪表盘的注意事项有哪些，下面就是实战案例，一起来看一下。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#test,#hehe{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<p id="test"></p>
<p id="hehe"></p>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/echarts-all.js"></script>
<script>
var myChart1;
var option = {
tooltip : {
trigger: 'axis'
},
legend: {
data:['最高','最低']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {readOnly:false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : true,
data : function (){
var list = [];
for (var i = 1; i <= 30; i++) {
list.push('2013-03-' + i);
}
return list;
}()
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'最低',
type:'bar',
data:function (){
var list = [];
for (var i = 1; i <= 5; i++) {
list.push(Math.round(Math.random()* 10));
}
return list;
}()
}
]
};
myChart=echarts.init(document.getElementById('test'));
myChart.setOption(option);
var ecConfig = echarts.config;
myChart1=echarts.init(document.getElementById('hehe'));
myChart.on(ecConfig.EVENT.HOVER, function(params){
var data=params.value;
var option1 = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'业务指标',
type:'gauge',
startAngle: 180,
endAngle: 0,
center : ['50%', '90%'], // 默认全局居中
radius : 320,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 200
}
},
axisTick: { // 坐标轴小标记
splitNumber: 10, // 每份split细分多少段
length :12, // 属性length控制线长
},
axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
formatter: function(v){
switch (v+''){
case '10': return '低';
case '50': return '中';
case '90': return '高';
default: return '';
}
},
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 15,
fontWeight: 'bolder'
}
},
pointer: {
width:50,
length: '90%',
color: 'rgba(255, 255, 255, 0.8)'
},
title : {
show : true,
offsetCenter: [0, '-60%'], // x, y，单位px
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
color: '#fff',
fontSize: 30
}
},
detail : {
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, -40], // x, y，单位px
formatter:'{value}%',
textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontSize : 50
}
},
data:[{value: data*10, name: '完成率'}]
}
]
};
option1.series[0].data[0].value = data;
myChart1.setOption(option1,true);
});
// myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
// myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
// myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
// myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
</script>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是用js实现汽车仪表盘的详细内容，更多请关注其它相关文章！
上一篇： 在Python中使用模块的教程
下一篇： 那些年一起学习的PHP（三）_PHP