js를 사용하여 자동차 대시보드 구현

이번에는 js를 사용하여 자동차 대시보드를 구현할 때의 주의사항에 대해 알려드리겠습니다.

nbsp;html>


    <meta>
    <title></title>
    <style>
        #test,#hehe{
            width: 100%;
            height: 500px;
        }
    </style>


<p></p>
<p></p>

<script></script>
<script></script>
<script>
    var myChart1;
    var option = {
        tooltip : {
            trigger: &#39;axis&#39;
        },
        legend: {
            data:[&#39;最高&#39;,&#39;最低&#39;]
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {readOnly:false},
                magicType : {show: true, type: [&#39;line&#39;, &#39;bar&#39;, &#39;stack&#39;, &#39;tiled&#39;]},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : &#39;category&#39;,
                boundaryGap : true,
                data : function (){
                    var list = [];
                    for (var i = 1; i <= 30; i++) {
                        list.push(&#39;2013-03-&#39; + i);
                    }
                    return list;
                }()
            }
        ],
        yAxis : [
            {
                type : &#39;value&#39;
            }
        ],
        series : [
            {
                name:&#39;最低&#39;,
                type:&#39;bar&#39;,
                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(&#39;test&#39;));
    myChart.setOption(option);
    var ecConfig = echarts.config;
    myChart1=echarts.init(document.getElementById(&#39;hehe&#39;));
    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:&#39;业务指标&#39;,
                    type:&#39;gauge&#39;,
                    startAngle: 180,
                    endAngle: 0,
                    center : [&#39;50%&#39;, &#39;90%&#39;],    // 默认全局居中
                    radius : 320,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 200
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        splitNumber: 10,   // 每份split细分多少段
                        length :12,        // 属性length控制线长
                    },
                    axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                        formatter: function(v){
                            switch (v+&#39;&#39;){
                                case &#39;10&#39;: return &#39;低&#39;;
                                case &#39;50&#39;: return &#39;中&#39;;
                                case &#39;90&#39;: return &#39;高&#39;;
                                default: return &#39;&#39;;
                            }
                        },
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: &#39;#fff&#39;,
                            fontSize: 15,
                            fontWeight: &#39;bolder&#39;
                        }
                    },
                    pointer: {
                        width:50,
                        length: &#39;90%&#39;,
                        color: &#39;rgba(255, 255, 255, 0.8)&#39;
                    },
                    title : {
                        show : true,
                        offsetCenter: [0, &#39;-60%&#39;],       // x, y，单位px
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: &#39;#fff&#39;,
                            fontSize: 30
                        }
                    },
                    detail : {
                        show : true,
                        backgroundColor: &#39;rgba(0,0,0,0)&#39;,
                        borderWidth: 0,
                        borderColor: &#39;#ccc&#39;,
                        width: 100,
                        height: 40,
                        offsetCenter: [0, -40],       // x, y，单位px
                        formatter:&#39;{value}%&#39;,
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontSize : 50
                        }
                    },
                    data:[{value: data*10, name: &#39;完成率&#39;}]
                }
            ]
        };
        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>

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

캔버스와 JS는 동적 시계 애니메이션을 구현합니다

페이지 로딩 속도 플러그인 InstantClick 최적화

InstantClick 사전 로딩 사용법 자세한 설명

위 내용은 js를 사용하여 자동차 대시보드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!