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

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 VMBox虚拟机无法访问
  • ¥15 skd显示找不到头文件
  • ¥15 机器视觉中图片中长度与真实长度的关系
  • ¥15 fastreport table 怎么只让每页的最下面和最顶部有横线
  • ¥15 R语言卸载之后无法重装,显示电脑存在下载某些较大二进制文件行为,怎么办
  • ¥15 java 的protected权限 ,问题在注释里
  • ¥15 这个是哪里有问题啊?
  • ¥15 关于#vue.js#的问题:修改用户信息功能图片无法回显,数据库中只存了一张图片(相关搜索:字符串)
  • ¥15 texstudio的问题,
  • ¥15 spaceclaim模型变灰色