echarts map共用geo和触发action

haiktk 发布于 2017/05/27 11:44
阅读 452
收藏 0

@Kener-林峰 你好,想跟你请教个问题:

先上代码:

<script type="text/javascript">
    function randomValue() {
        return Math.round(Math.random()*1000);
    }
    $(document).ready(function() {
        var geoCoordMap = {
            "新兴县" : [ 112.2318614132, 22.6018245442 ],
            "新兴县2" : [ 112.2318614132, 22.5018245442 ],
            "新兴县3" : [ 112.1318614132, 22.6518245442 ],
            "新兴县4" : [ 112.2818614132, 22.6018245442 ],
            "罗定市" : [ 111.3818614132, 22.7018245442 ],
        };

        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push(geoCoord.concat(data[i].value));
                }
            }
            return res;
        };
        $.getJSON('map_yf.json', function(data) {
            echarts.registerMap('yunfu', data);
            var option = {
                title : {
                    text : '全市经济热点分布',
                    left : 'center',
                    textStyle : {
                        color : '#fff'
                    }
                },
                backgroundColor : '#404a59',
                visualMap : [{
                    min: 0,
                    max: 1500,
                    left: 'right',
                    top: 'bottom',
                    text: ['High','Low'],
                    seriesIndex: [0],
                    inRange: {
                        color: ['#e0ffff', '#006edd']
                    },
                    calculable : true
                },{
                    min : 0,
                    max : 500,
                    splitNumber : 5,
                    seriesIndex: [1],
                    inRange : {
                        color : [ '#d94e5d', '#eac736', '#50a3ba' ].reverse()
                    },
                    textStyle : {
                        color : '#fff'
                    }
                }],
                geo : {
                    map : 'yunfu',
                    label : {
                        normal : {
                            show : true,
                            textStyle : {
                                color: 'red',
                                fontWeight : 'bold'
                            }
                        },
                        emphasis : {
                            show : true,
                            textStyle : {
                                color : '#fff',
                                fontSize : 20
                            }
                        }
                    },
                    itemStyle : {
                        emphasis : {
                            borderWidth : 5,
                            borderColor : '#fff',
                            shadowColor: 'orange',
                            shadowBlur: 2000,
                            opacity : 0.8
                        }
                    },
                    roam : false,
                    zoom : 1.2,
                    z : 1
                },
                series : [{
                    name: 'categoryA',
                    type: 'map',
                    map: 'yunfu',
                    z: 1,
                    data:[
                        {name: '新兴县', value: randomValue()},
                        {name: '罗定市', value: randomValue()},
                        {name: '云城区', value: randomValue()},
                        {name: '云安区', value: randomValue()},
                        {name: '郁南县', value: randomValue()}
                    ]
                },{
                    name : '经济热度',
                    type : 'heatmap',
                    coordinateSystem : 'geo',
                    data : convertData([ 
                        {name : "新兴县", value : 479},
                        {name : "新兴县2", value : 379},
                        {name : "新兴县3", value : 279},
                        {name : "新兴县4", value : 301},
                        {name : "罗定市", value : 341}
                    ])
                } ]
            };

            var chart = echarts.init($("#map")[0]);
            chart.setOption(option);
            
            setInterval(function(){
                chart.dispatchAction({
                    type: 'mapSelect',
                    seriesName: 'categoryA'
                });
                console.log(111);
            },2000);
        });
    });
</script>

上面是我用echarts做的一个云浮市的区域地图,其中有两个series,第一个配合visualmap控制区域的颜色,第二个是一个热力数据。地图json是echarts上面下载的,现在出现的问题是:

1.第一个series不能使用geo坐标,即改成下面这样,是出不来颜色的:

{
                    name: 'categoryA',
                    type: 'map',
                    geoIndex: 0,
                    z: 1,
                    data:[
                        {name: '新兴县', value: randomValue()},
                        {name: '罗定市', value: randomValue()},
                        {name: '云城区', value: randomValue()},
                        {name: '云安区', value: randomValue()},
                        {name: '郁南县', value: randomValue()}
                    ]
                }

参考了echarts上面的例子:http://echarts.baidu.com/demo.html#geo-map-scatter,到本地后就出不来效果。

2.我想通过dispatchAction来触发选中地图区域的动画效果,即自动轮询选中某一个区域,显示tooltip,结果也是没出来效果

echarts官方的文档都看遍了,还是没解决上面的问题,请帮忙看看是什么原因,非常感谢!

加载中
返回顶部
顶部