之前在公司云端添加过 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);
来源: http://www.2cto.com/kf/201708/669335.html