ECharts地图API使用实例

来源：互联网发布：淘宝买家信用编辑：程序博客网时间：2024/06/06 00:36

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

option = {                        title : {                            top: '50%',                            left: '10%',                            subtextStyle: {color: '#000000'},                            text: '主标题',                            subtext: '副标题'                        },                        tooltip: {                            show : true,                            formatter: function(params) {                                var res = params.name.replace(/,/g, "<br/>");                                 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);

阅读全文

0 0