Echarts 多仪表盘(汽车仪表盘,动态刷新)

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>

结果:
作业三2022.5.10

总结

简简单单

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值