3
回答
混搭的图形在中国地图上显示专题图的问题
利用AWS快速构建适用于生产的无服务器应用程序,免费试用12个月>>>   

@Kener-林峰 你好,想跟你请教个问题:大神,你好,还是关于专题图的问题,在具体实现的过程有一些问题向你请教

第一个问题:专题图和地图的层叠是如何控制的,我的地图总是显示在专题图的上面?

第二个问题:专题图的位置该如何控制,我的思路是两种方法,第一个办法是获取每个地州的中心点的经纬坐标,在将经纬坐标装换成屏幕上的像素位置,将柱状图展现出来,如何将地州中心点的经纬坐标转换成屏幕上的像素坐标呢,map的API下有互转的方法,不过我理解那个应该是相应鼠标的在地图上的点击吧。第二个办法是固定地图的大小,固定地图的显示位置,事先测量好每个地州中心点的像素坐标,直接写死在程序里,不过这个办法太笨了点,而且地图不能拖动和放大

第三个问题:如果通过经纬度转换屏幕像素坐标的方式实现了专题图,那么如果地图是可以放大和拖动的,是不是用户每次放大后拖动地图后,我都要擦掉原先的专题图重画一遍呢

还请大神解答,谢谢!


举报
gggoodgame
发帖于4年前 3回/665阅
共有3个答案 最后回答: 4年前

哦,抱歉,我忘记了,还有个因素。如果是packet引入,地图会动态加载有个延时所以画的晚在上层,改用单文件引入吧,这样数据都包含了地图就能先画在下方。

地图对象通过实例索引到, myChart.chart.map就是

选中样式,配置itemStyle.emphasis.areaStyle.color,让这个颜色设为false就沿用默认颜色了

itemStyle:{
    emphasis:{areaStyle:{color:false}}
},


--- 共有 1 条评论 ---
gggoodgame非常感谢!谢谢你的解答! 4年前 回复

引用来自“Kener-林峰”的评论

1、series数组的顺序觉得层叠顺序

2、就是经纬度转显示坐标,用地图接口

3、是的,地图缩放有事件,但这实现太麻烦了,建议还是别做拖拽缩放了

http://echarts.baidu.com/doc/example/topic/10-me-china/index.html


series数组的顺序觉得层叠顺序,除了这个还有其他的决定顺序吗,我颠倒了顺序后并没有效果,将http://echarts.baidu.com/doc/example/mix3.html 的例子中代码copy到本地运行时,地图就总是处在饼图的上面,我把我的代码放到例子代码中运行,专题图就正常显示在了地图的上方,我的全文代码如下

var myChart ;

option = {
            tooltip : {
                trigger: 'item'
            },
            legend: {
                x:'right',
                data:['北京','上海','广东']
            },
            dataRange: {
                orient: 'horizontal',
                min: 0,
                max: 2500,
                text:['高','低'],           // 文本,默认为数值文本
                splitNumber:0
            },
            toolbox: {
                show : true,
                orient: 'vertical',
                x:'right',
                y:'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false}
                }
            },
            series : [
                {
                    name: 'iphone销量',
                    type: 'map',
                    mapType: 'china',
                    mapLocation: {
                        x: 'left'
                    },
                    selectedMode : 'multiple',
                    itemStyle:{
                        normal:{label:{show:true}},
                        emphasis:{label:{show:true}}
                    },
                    data:[
                        {name: '北京',value: 1234,selected:true},
                        {name: '天津',value: Math.round(Math.random()*1000)},
                        {name: '上海',value: 3456,selected:true},
                        {name: '重庆',value: Math.round(Math.random()*1000)},
                        {name: '河北',value: Math.round(Math.random()*1000)},
                        {name: '河南',value: Math.round(Math.random()*1000)},
                        {name: '云南',value: Math.round(Math.random()*1000)},
                        {name: '辽宁',value: Math.round(Math.random()*1000)},
                        {name: '黑龙江',value: Math.round(Math.random()*1000)},
                        {name: '湖南',value: Math.round(Math.random()*1000)},
                        {name: '安徽',value: Math.round(Math.random()*1000)},
                        {name: '山东',value: Math.round(Math.random()*1000)},
                        {name: '新疆',value: Math.round(Math.random()*1000)},
                        {name: '江苏',value: Math.round(Math.random()*1000)},
                        {name: '浙江',value: Math.round(Math.random()*1000)},
                        {name: '江西',value: Math.round(Math.random()*1000)},
                        {name: '湖北',value: Math.round(Math.random()*1000)},
                        {name: '广西',value: Math.round(Math.random()*1000)},
                        {name: '甘肃',value: Math.round(Math.random()*1000)},
                        {name: '山西',value: Math.round(Math.random()*1000)},
                        {name: '内蒙古',value: Math.round(Math.random()*1000)},
                        {name: '陕西',value: Math.round(Math.random()*1000)},
                        {name: '吉林',value: Math.round(Math.random()*1000)},
                        {name: '福建',value: Math.round(Math.random()*1000)},
                        {name: '贵州',value: Math.round(Math.random()*1000)},
                        {name: '广东',value: 2345,selected:true},
                        {name: '青海',value: Math.round(Math.random()*1000)},
                        {name: '西藏',value: Math.round(Math.random()*1000)},
                        {name: '四川',value: Math.round(Math.random()*1000)},
                        {name: '宁夏',value: Math.round(Math.random()*1000)},
                        {name: '海南',value: Math.round(Math.random()*1000)},
                        {name: '台湾',value: Math.round(Math.random()*1000)},
                        {name: '香港',value: Math.round(Math.random()*1000)},
                        {name: '澳门',value: Math.round(Math.random()*1000)}
                    ]
                },
                {
                    name:'各省销量',
                    type:'pie',
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    center: [document.getElementById('container').offsetWidth - 450, 225],
                    radius: [50, 120],
                    data:[
                        {name: '北京', value: 1234},
                        {name: '上海', value: 3456},
                        {name: '广东', value: 2345}
                    ]
                }
            ],
            animation: false
        };
        // 路径配置
        require.config({
            packages: [
                {
                    name: 'echarts',
                    location: '../../../echarts/src',
                    main: 'echarts'
                },
                {
                    name: 'zrender',
                    location: '../../../zrender/src',
                    main: 'zrender'
                }
            ]
        });
        require(
            [
                'echarts',
                'echarts/chart/map',
                'echarts/chart/pie',
                'echarts/chart/bar'
            ],
            function(ec){
                myChart = ec.init(document.getElementById('container'));
                myChart.setOption(option);
            }
        );

请问大神是不是跟我的引入方式有关,我用的版本是1.4.1

经纬度转显示坐标,用地图接口,我在初始化地图的数据之后

myChart = ec.init(document.getElementById('container'));
                myChart.setOption(option);

如何获得这个地图对象呢?

还有一个问题,地图的某个区域被选择或单击后颜色就会改变,有没有方法让它的颜色不发生变化

还望大神解答,谢谢!

顶部