百度地图大数据可视化(柱状图)

这是效果图 

 这个是代码部分

var geoCoordMap = {
    广州市: [113.507649675, 23.3200491021],
    东莞市: [113.863433991, 22.9430238154],
    中山市: [113.422060021, 22.5451775145],
    云浮市: [111.750945959, 22.9379756855],
    佛山市: [113.034025635, 23.0350948405],
    惠州市: [114.41065808, 23.1135398524],
    揭阳市: [116.079500855, 23.3479994669],
    梅州市: [116.126403098, 24.304570606],
    汕头市: [116.588650288, 23.2839084533],
    汕尾市: [115.572924289, 22.9787305002],
    江门市: [112.678125341, 22.2751167835],
    河源市: [114.913721476, 23.9572508505],
    深圳市: [114.025973657, 22.5960535462],
    清远市: [113.040773349, 23.9984685504],
    湛江市: [110.165067263, 21.2574631038],
    潮州市: [116.830075991, 23.7618116765],
    珠海市: [113.262447026, 22.1369146461],
    肇庆市: [112.37965337, 23.5786632829],
    茂名市: [110.931245331, 21.9682257188],
    阳江市: [111.777009756, 21.9715173045],
    韶关市: [113.594461107, 24.8029603119],
};
var customerBatteryCityData = [
    { name: '阳江市', value: 10 },
    { name: '茂名市', value: 20 },
    { name: '广州市', value: 70 },
    { name: '河源市', value: 70 },
    { name: '湛江市', value: 120 },
    { name: '潮州市', value: 70 },
    { name: '东莞市', value: 70 },
    { name: '深圳市', value: 0 },
    { name: '清远市', value: 70 },
    { name: '韶关市', value: 10 },
    { name: '云浮市', value: 70 },
    { name: '惠州市', value: 150 },
    { name: '汕头市', value: 60 },
    { name: '揭阳市', value: 80 },
    { name: '中山市', value: 70 },
    { name: '肇庆市', value: 70 },
    { name: '珠海市', value: 120 },
    { name: '汕尾市', value: 0 },
    { name: '江门市', value: 70 },
    { name: '梅州市', value: 70 },
    { name: '佛山市', value: 10 },
];

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,
    },
    series: [
        {
            type: 'lines',
            coordinateSystem: 'bmap',
            polyline: false,
                lineStyle: {
                  width: 17, // 尾迹线条宽度
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgb(199,145,41)' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: 'rgb(199,145,41)' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: 'rgb(223,176,32)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgb(223,176,32)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgb(199,145,41)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  },
                  opacity: 1, // 尾迹线条透明度
                  curveness: 0 // 尾迹线条曲直度
                },
        },
        {
            type: 'scatter',
            coordinateSystem: 'bmap',
            geoIndex: 0,
            zlevel: 5,
            symbol: 'diamond',
            symbolSize: [20, 10],
                itemStyle: {
                  color: '#ffd133',
                  opacity: 1
                },
            silent: true,
            data: scatterData(),
        },
        {
            type: 'scatter',
            coordinateSystem: 'bmap',
            geoIndex: 0,
            zlevel: 4,
            symbol: 'diamond',
            symbolSize: [20, 10],
            itemStyle: {
                  // color: '#F7AF21',
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: 'rgb(199,145,41)' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: 'rgb(199,145,41)' // 0% 处的颜色
                      },
                      {
                        offset: 0.5,
                        color: 'rgb(223,176,32)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgb(223,176,32)' // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: 'rgb(199,145,41)' // 100% 处的颜色
                      }
                    ],
                    global: false // 缺省为 false
                  },
                  opacity: 1
            },
            silent: true,
            data: scatterData2(),
        },
    ],
};

function lineData() {
    return customerBatteryCityData.map((item) => {
        return {
            coords: [
                geoCoordMap[item.name],
                [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()],
            ],
        };
    });
}

function scatterData() {
    return customerBatteryCityData.map((item) => {
        return [geoCoordMap[item.name][0], geoCoordMap[item.name][1] + item.value * lineMaxHeight()];
    });
}

function scatterData2() {
    return customerBatteryCityData.map((item) => {
        return {
            name: item.name,
            value: geoCoordMap[item.name],
        };
    });
}

function lineMaxHeight() {
    const maxValue = Math.max(...customerBatteryCityData.map((item) => item.value));
    return 0.9 / maxValue;
}

option.series[0].data = lineData();
myChart.setOption(option);
console.log(option);
//获取echart中使用的bmap实例
var map = myChart.getModel().getComponent('bmap').getBMap();
map.disableDoubleClickZoom();
map.centerAndZoom('广东', 9);