ECharts地图API使用实例

之前在公司云端添加过ECharts散点地图,用来记录用户分布并展示每个业务点信息,在此记录,下面是主要代码;

option = {
                        title : {
                            top: '50%',
                            left: '10%',
                            subtextStyle: {color: '#000000'},
                            text: '主标题',
                            subtext: '副标题'
                        },
                        tooltip: {
                            show : true,
                            formatter: function(params) {
                                var res = params.name.replace(/,/g, "
"); 
                                return res;  
                            } 
                        },
                        dataRange: {
                            x: 'left',
                            y: 'top',
                            splitList: [
                                {start: 0,end: 2,label:'test1'},
                                {start: 2,end: 4,label:'test2'}
                            ],
                            color: ['#FF0000', '#0000FF']
                        },
                        geo: {
                            map: 'china',
                            roam: true,
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(0,0,0,0.4)'
                                    }
                                }
                            },
                            itemStyle: {
                                normal:{
                                    borderColor: 'rgba(0, 0, 0, 0.3)'
                                },
                                emphasis:{
                                    areaColor: null,
                                    shadowOffsetX: 0,
                                    shadowOffsetY: 0,
                                    shadowBlur: 20,
                                    borderWidth: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        },
                        series : [
                           {
                               type: 'scatter',
                               coordinateSystem: 'geo',
                               //将业务点映射到地图,先默认为空
                               data: [],
                               symbolSize: 7,
                               symbolRotate: 35,
                               label: {
                                   normal: {
                                       formatter: '{b}',
                                       position: 'right',
                                       show: false
                                   },
                                   emphasis: {
                                       show: true
                                   }
                               },
                               itemStyle: {
                                   normal: {
                                        color: '#FF0000'
                                   }
                               }
                            },            
                        ]
                    };`
然后就是将option添加到地图展示:
`var myChart = echarts.init(document.getElementById('china-map'));
                    myChart.setOption(option,true);

series中data即业务点为空,给data传值即可在地图显示业务点了:

myChart.setOption({
                series: [{
                    data: point
                }]
            });

其中point即往地图放置的业务点,如var point = [];
point.push({xxx:xxx,yyy:yyy,…..},value: gps);