公交线路实时进度echarts 配置项内容和展示

使用单轴散点图实现公交线路站序实时进度。

      option = {
    title: {
        text: "公交线路实时进度"
    },
    grid: {
        containLabel: true
    },
    tooltip: {
        show: true,
        formatter: function(params) {
            return "车牌号: " + params.value[1] + '<br/>' +
                "距离上一站: " + params.value[2].toFixed(2) + '米<br/>' +
                "距离下一站: " + params.value[3].toFixed(2) + '米<br/>';
        }
    },
    singleAxis: [{
        type: "value",
        top: "80",
        height: "20",
        splitLine: {
            show: false
        },
        interval: 1,
        axisLabel: {
            show: true,
            margin: 20,
            textStyle: {
                fontSize: 14
            },
            
            formatter: function(value, index) {
                return value +1
            }
        },
        min: 0,
        max: 26
    }, {
        type: "category",
        boundaryGap: false,
        top: "120",
        height: "20",
        splitLine: {
            show: false
        },
        axisLabel: {
            interval: 0,
            textStyle: {
                fontSize: 18
            },
            formatter: function(value, index) {
                return value ? value.split("").join('\n') : ""; //竖排文字
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        data: [
            "火车站",
            "汽车站",
            "佛山中医院",
            "旋宫酒店•仁寿寺",
            "祖庙A站",
            "环球国际广场",
            "海关",
            "佛山科技学院",
            "弼唐",
            "茶亭",
            "石湾客运站",
            "中国陶瓷城",
            "石湾公园",
            "陶都",
            "柏林艺术馆",
            "美术陶瓷厂",
            "华榕宫",
            "沙岗",
            "潭清里",
            "佛山家博城南门",
            "澜石大桥西",
            "佛山家博城",
            "澜石一路东",
            "银苑市场",
            "澜石中学",
            "省纺院",
            "石头村"
        ]
    }],
    series: [{
        singleAxisIndex: 0,
        coordinateSystem: "singleAxis",
        type: "scatter",
        symbol: "path://M1024 476.279467c0 0 0 33.4848 0 41.591467 0 72.362667 0 136.6528 0 136.6528 0 15.479467-12.100267 28.040533-27.016533 28.040533l-41.284267 0c0-56.610133-45.8752-102.5024-102.4512-102.5024s-102.4512 45.8752-102.4512 102.5024L290.304 682.564267c-0.017067-56.610133-45.8752-102.5024-102.468267-102.5024-56.558933 0-102.434133 45.8752-102.4512 102.5024L27.0336 682.564267c-14.916267 0-27.016533-12.544-27.016533-28.040533L0.017067 318.173867C0.017067 290.423467 17.988267 273.066667 44.100267 273.066667c0 0 811.3152 0 844.032 0s98.4576 43.281067 124.125867 101.870933C1025.655467 406.289067 1024 476.279467 1024 476.279467zM170.786133 324.317867 78.574933 324.317867c-15.086933 0-27.323733 12.219733-27.323733 27.306667l0 81.834667c0 15.086933 12.2368 27.2896 27.323733 27.2896l92.2112 0L170.786133 324.317867zM324.471467 324.317867l-119.534933 0 0 136.413867 119.534933 0L324.471467 324.317867zM477.610667 324.317867l-119.005867 0 0 136.413867 119.005867 0L477.610667 324.317867zM631.210667 324.317867l-119.005867 0 0 136.413867 119.005867 0L631.210667 324.317867zM784.896 324.317867l-119.534933 0 0 136.413867 119.534933 0L784.896 324.317867zM784.8448 524.919467c0-7.0144-7.645867-12.6976-17.083733-12.6976s-17.066667 5.6832-17.066667 12.6976l0 25.361067c0 7.0144 7.6288 12.6976 17.066667 12.6976s17.083733-5.6832 17.083733-12.6976L784.8448 524.919467zM966.024533 404.155733c-11.008-46.728533-71.3728-79.837867-88.1152-79.837867-41.0112 0-58.845867 0-58.845867 0l0 136.413867L971.741867 460.8C971.741867 460.8 974.848 441.719467 966.024533 404.155733zM187.835733 614.2464c37.717333 0 68.3008 30.600533 68.3008 68.352 0 37.7344-30.583467 68.334933-68.3008 68.334933-37.7344 0-68.3008-30.600533-68.3008-68.334933C119.534933 644.846933 150.101333 614.2464 187.835733 614.2464zM853.265067 614.2464c37.717333 0 68.3008 30.600533 68.3008 68.352 0 37.7344-30.583467 68.334933-68.3008 68.334933-37.7344 0-68.317867-30.600533-68.317867-68.334933C784.9472 644.846933 815.530667 614.2464 853.265067 614.2464z",
        symbolSize: [40, 20],
        symbolOffset: [
            0,
            "-50%"
        ],
        data: [
            [
                3.589386750921445,
                "粤EU1359",
                568.6717545642821,
                396.18155046034326
            ],
            [
                4.743669092493133,
                "粤EU1357",
                327.82814095711046,
                112.99714580863974
            ],
            [
                13.796138425253247,
                "粤EU1398",
                349.73159785779444,
                89.55331386662965
            ]
        ]
    }, {
        singleAxisIndex: 1,
        coordinateSystem: "singleAxis",
        type: "scatter",
        symbolSize: 0,
        data: [
            [
                0
            ],
            [
                1
            ],
            [
                2
            ],
            [
                3
            ],
            [
                4
            ],
            [
                5
            ],
            [
                6
            ],
            [
                7
            ],
            [
                8
            ],
            [
                9
            ],
            [
                10
            ],
            [
                11
            ],
            [
                12
            ],
            [
                13
            ],
            [
                14
            ],
            [
                15
            ],
            [
                16
            ],
            [
                17
            ],
            [
                18
            ],
            [
                19
            ],
            [
                20
            ],
            [
                21
            ],
            [
                22
            ],
            [
                23
            ],
            [
                24
            ],
            [
                25
            ],
            [
                26
            ]
        ]
    }]
};

setInterval(function() {
    echarts.util.each(option.series[0].data, function(item) {
        item[0] += Math.random();
        if (item[0] > 26) {
            item[0] = 26;
        }
    });
    myChart.setOption(option);

}, 500)