Echarts中国图表只显示右下角(南海群岛)问题

由于Echart3更新后并没有内置中国地图的数据,导致我们使用全国地图的时候只显示南海群岛部分
此时我们需要单独引用中国地图的数据才能正常显示图表
图表的写法并没有任何变动
china.js下载地址(不能下载的小伙伴在此留言邮箱哦)
PS:使用地图图表显示数据的时候我们经常会加载json文件,此时要注意跨域的问题,需要本地启用服务或者上传到服务器进行访问哦

$.getJSON(uploadedDataURL, function (weiboData) {

    var myChart = echarts.init(document.getElementById('datamap'));
    weiboData = weiboData.map(function (serieData, idx) {
        var px = serieData[0] / 1000;
        var py = serieData[1] / 1000;
        var res = [[px, py]];

        for (var i = 2; i < serieData.length; i += 2) {
            var dx = serieData[i] / 1000;
            var dy = serieData[i + 1] / 1000;
            var x = px + dx;
            var y = py + dy;
            res.push([x, y, 1]);

            px = x;
            py = y;
        }
        return res;
    });

    myChart.setOption(option = {
        // backgroundColor: '#404a59',
        title : {
            text: '',
            subtext: '',
            sublink: '',
            left: 'center',
            top: 'top',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            x: '2%',
            y: '2%',
            containLabel:true
        },

       /* legend: {
            left: 'left',
            data: ['强', '中', '弱'],
            textStyle: {
                color: '#ccc'
            }
        },*/
        geo: {
            name: '强',
            type: 'scatter',
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            itemStyle: {
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#111'
                },
                emphasis: {
                    areaColor: '#2a333d'
                }
            }
        },
        series: [{
            name: '弱',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(37, 140, 249, 0.8)',
                    color: 'rgba(37, 140, 249, 0.8)'
                }
            },
            data: weiboData[0]
        }, {
            name: '中',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(14, 241, 242, 0.8)',
                    color: 'rgba(14, 241, 242, 0.8)'
                }
            },
            data: weiboData[1]
        }, {
            name: '强',
            type: 'scatter',
            coordinateSystem: 'geo',
            symbolSize: 1,
            large: true,
            itemStyle: {
                normal: {
                    shadowBlur: 2,
                    shadowColor: 'rgba(255, 255, 255, 0.8)',
                    color: 'rgba(255, 255, 255, 0.8)'
                }
            },
            data: weiboData[2]
        }]
    });

});

中国地图

猜你喜欢

转载自blog.csdn.net/qq_28584685/article/details/86366379