嘉兴市公交线路道路拥堵情况echarts lines配置项内容和展示

官网涉及地图+visualMap的例子都是散点图,文档中没有提到lines也允许在data中存放value并结合visualMap使用,于是自己做了一个例子,数据纯属虚构

配置项如下
      var uploadedDataURL = "/asset/get/s/data-1477626617822-SJMboHgel.txt";

function convertData(sourceData) {
    return [].concat.apply([], $.map(sourceData, function(busLine, index) {
        var prevPoint = null;
        var points = [];
        var value = busLine.shift();
        for (var i = 0; i < busLine.length; i += 2) {
            var point = [busLine[i], busLine[i + 1]];
            if (i > 0) {
                point = [
                    prevPoint[0] + point[0],
                    prevPoint[1] + point[1]
                ];
            }
            prevPoint = point;

            points.push([point[0] / 1e5, point[1] / 1e5]);
        }
        return {
            value: value,
            coords: points
        };
    }));
}

var option = {
    bmap: {
        roam: true
    },
    visualMap: {
        type: "piecewise",
        left: 'right',
        /*            pieces: [
                {min: 15}, // 不指定 max,表示 max 为无限大(Infinity)。
                {min: 12, max: 15},
                {min: 9, max: 12},
                {min: 6, max: 9},
                {min: 3, max: 6},
                {max: 3}     // 不指定 min,表示 min 为无限大(-Infinity)。
            ],*/
        min: 0,
        max: 15,
        splitNumber: 5,
        maxOpen: true,
        color: ['red', 'yellow', 'green']
    },
    tooltip: {
        formatter: function(params, ticket, callback) {
            return "拥堵指数:" + params.value;
        },
        trigger: 'item'
    },
    series: [{
        type: 'lines',
        coordinateSystem: 'bmap',
        polyline: true,
        lineStyle: {
            normal: {
                opacity: 1,
                width: 4
            },
            emphasis: {
                width: 6
            }
        },
        effect: {
            show: true,
            symbolSize: 2,
            color: "white"
        }
    }]
};

$.getJSON(uploadedDataURL, function(rawData) {
    option.series[0].data = convertData(rawData);
    myChart.setOption(option);
    // console.log(option);
    //获取echart中使用的bmap实例
    var map = myChart.getModel().getComponent('bmap').getBMap();
    map.disableDoubleClickZoom();
    map.centerAndZoom("嘉兴", 13);

});
    
截图如下