weixin_40187983 2018-05-19 04:32 采纳率: 100%
浏览 5145
已采纳

Echart 中国地图 两个不同的格式的地图合并

我用EChart上 载入两种数据
1、整个城市上的数据
图片说明

2、用经伟度座标 标上的数据,是用蓝色圈圈的
图片说明

但是要使用蓝色圈圈的话,需要用到Echart-all.js
但使用后,地图背景就变灰色了,但是我要效果要如第一张图的样子

我想要合并两个数据,背景如图1,又有蓝色的经纬座标

请各位大神帮助!谢谢

图一的代码
<!DOCTYPE html>



<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/all-province.js"></script>



<title></title>




<script>
    {



        var Province = "广东";
        var myChart = echarts.init(document.getElementById('map'));
        option = {

            title: {
                text: '省份销量额',
                subtext: '-',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            tooltip: {
                trigger: 'item'
            },

            visualMap: {
                min: 0,
                max: 1000,
                left: 'right',
                color: ['orange', 'yellow'],
                text: ['高', '低'],           // 文本,默认为数值文本
                calculable: true,

            },
            series: [

                {
                    name: 'B',
                    type: 'map',
                    mapType: Province,
                    selectedMode: 'single',
                    //left: '50%',
                    //top: '25%',
                    //width: '50%',
                    //height: '50%',
                    roam: true,

                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{ name: "深圳市", value: 426 }, { name: "中山市", value: 221 }]


                }



            ]
        };



        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });


    }


</script>

图二的代码
<!DOCTYPE html>



<script src="js/jquery.min.js"></script>
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script src="js/all-province.js"></script>
<script src="js/echarts-all.js"></script>


<title></title>




<script>
    {



        var Province = "广东";
        var myChart = echarts.init(document.getElementById('map'));
        option = {

            title: {
                text: '省份销量额',
                subtext: '-',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            tooltip: {
                trigger: 'item'
            },

            visualMap: {
                min: 0,
                max: 1000,
                left: 'right',
                color: ['orange', 'yellow'],
                text: ['高', '低'],           // 文本,默认为数值文本
                calculable: true,

            },
            series: [
            {
                name: 'A',
                    type: 'map',
                    mapType: Province,

                    data: [],
                    markPoint: {
                        itemStyle : {
                normal:{
                    color:'skyblue'
                }
            },
                        data: [

                            { name: "厦门", value: 2600 },
                            { name: "汕尾", value: 2633 },
                            { name: "潮州", value: 2624 },
                            { name: "丹东", value: 273 }
                        ]
                    },
                    geoCoord: {
                        "海门": [121.15, 31.89],
                        "鄂尔多斯": [109.781327, 39.608266],
                        "招远": [120.38, 37.35],
                        "文登": [122.05, 37.2],
                        "上海": [121.48, 31.22],
                        "攀枝花": [101.718637, 26.582347],
                        "威海": [122.1, 37.5],
                        "承德": [117.93, 40.97],
                        "厦门": [118.1, 24.46],
                        "汕尾": [115.375279, 22.786211],
                        "潮州": [116.63, 23.68]

                    }
                },
                {
                    name: 'B',
                    type: 'map',
                    mapType: Province,
                    selectedMode: 'single',
                    //left: '50%',
                    //top: '25%',
                    //width: '50%',
                    //height: '50%',
                    roam: true,

                    itemStyle: {
                        normal: {
                            label: {
                                show: true
                            }
                        },
                        emphasis: {
                            label: {
                                show: true
                            }
                        }
                    },
                    data: [{ name: "深圳市", value: 426 }, { name: "中山市", value: 221 }]


                }



            ]
        };



        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });


    }


</script>

  • 写回答

2条回答 默认 最新

  • weixin_38046157 2018-05-19 08:37
    关注
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python
  • ¥15 要给毕业设计添加扫码登录的功能!!有偿
  • ¥15 kafka 分区副本增加会导致消息丢失或者不可用吗?
  • ¥15 微信公众号自制会员卡没有收款渠道啊
  • ¥100 Jenkins自动化部署—悬赏100元
  • ¥15 关于#python#的问题:求帮写python代码
  • ¥20 MATLAB画图图形出现上下震荡的线条
  • ¥15 关于#windows#的问题:怎么用WIN 11系统的电脑 克隆WIN NT3.51-4.0系统的硬盘