全国泵机销售情况echarts scatter配置项内容和展示
山东销往全国泵机数量统计
配置项如下
// 地图数据
var chinaDataURL = "/asset/get/s/data-1517645039291-B1vgpymUz.json";
var geoCoordMap = {
"广州": [113.23, 23.16],
"佛山": [113.167,22.828],
"中山": [113.38, 22.52],
"深圳": [114.07, 22.62],
"东莞": [113.736,23.047],
"无锡": [120.288,31.574],
"湖州": [120.096,30.864],
"昆山": [120.976,31.32],
"扬州": [119.427,32.386],
"苏州": [120.612,31.309],
"淮安": [119.136,33.499],
"淮安": [119.136,33.499],
"菏泽": [115.480656, 35.23375],
"合肥": [117.27, 31.86],
"武汉": [114.31, 30.52],
"大庆": [125.03, 46.58]
};
//后台返回数据
var data = [{
name: "海门",
value: 9
},
{
name: "鄂尔多斯",
value: 12
},
{
name: "招远",
value: 12
},
{
name: "舟山",
value: 12
},
{
name: "齐齐哈尔",
value: 14
},
{
name: "盐城",
value: 15
},
{
name: "赤峰",
value: 16
},
{
name: "青岛",
value: 18
},
{
name: "乳山",
value: 18
},
{
name: "金昌",
value: 19
},
{
name: "泉州",
value: 21
},
{
name: "莱西",
value: 21
},
{
name: "日照",
value: 21
},
{
name: "胶南",
value: 22
},
{
name: "南通",
value: 23
},
{
name: "拉萨",
value: 24
},
{
name: "云浮",
value: 24
},
{
name: "梅州",
value: 25
},
{
name: "文登",
value: 25
},
{
name: "上海",
value: 25
},
{
name: "攀枝花",
value: 25
},
{
name: "威海",
value: 25
},
{
name: "承德",
value: 25
},
{
name: "厦门",
value: 26
},
{
name: "汕尾",
value: 26
},
{
name: "潮州",
value: 26
},
{
name: "丹东",
value: 27
},
{
name: "太仓",
value: 27
},
{
name: "曲靖",
value: 27
},
{
name: "烟台",
value: 28
},
{
name: "福州",
value: 29
},
{
name: "瓦房店",
value: 30
},
{
name: "即墨",
value: 30
},
{
name: "抚顺",
value: 31
},
{
name: "玉溪",
value: 31
},
{
name: "张家口",
value: 31
},
{
name: "阳泉",
value: 31
},
{
name: "莱州",
value: 32
},
{
name: "湖州",
value: 32
},
{
name: "汕头",
value: 32
},
{
name: "昆山",
value: 33
},
{
name: "宁波",
value: 33
},
{
name: "湛江",
value: 33
},
{
name: "揭阳",
value: 34
},
{
name: "荣成",
value: 34
},
{
name: "连云港",
value: 35
},
{
name: "葫芦岛",
value: 35
},
{
name: "常熟",
value: 36
},
{
name: "东莞",
value: 36
},
{
name: "河源",
value: 36
},
{
name: "淮安",
value: 36
},
{
name: "泰州",
value: 36
},
{
name: "南宁",
value: 37
},
{
name: "营口",
value: 37
},
{
name: "惠州",
value: 37
},
{
name: "江阴",
value: 37
},
{
name: "蓬莱",
value: 37
},
{
name: "韶关",
value: 38
},
{
name: "嘉峪关",
value: 38
},
{
name: "广州",
value: 38
},
{
name: "延安",
value: 38
},
{
name: "太原",
value: 39
},
{
name: "清远",
value: 39
},
{
name: "中山",
value: 39
},
{
name: "昆明",
value: 39
},
{
name: "寿光",
value: 40
},
{
name: "盘锦",
value: 40
},
{
name: "长治",
value: 41
},
{
name: "深圳",
value: 41
},
{
name: "珠海",
value: 42
},
{
name: "宿迁",
value: 43
},
{
name: "咸阳",
value: 43
},
{
name: "铜川",
value: 44
},
{
name: "平度",
value: 44
},
{
name: "佛山",
value: 44
},
{
name: "海口",
value: 44
},
{
name: "江门",
value: 45
},
{
name: "章丘",
value: 45
},
{
name: "肇庆",
value: 46
},
{
name: "大连",
value: 47
},
{
name: "临汾",
value: 47
},
{
name: "吴江",
value: 47
},
{
name: "石嘴山",
value: 49
},
{
name: "沈阳",
value: 50
},
{
name: "苏州",
value: 50
},
{
name: "茂名",
value: 50
},
{
name: "嘉兴",
value: 51
},
{
name: "长春",
value: 51
},
{
name: "胶州",
value: 52
},
{
name: "银川",
value: 52
},
{
name: "张家港",
value: 52
},
{
name: "三门峡",
value: 53
},
{
name: "锦州",
value: 54
},
{
name: "南昌",
value: 54
},
{
name: "柳州",
value: 54
},
{
name: "三亚",
value: 54
},
{
name: "自贡",
value: 56
},
{
name: "吉林",
value: 56
},
{
name: "阳江",
value: 57
},
{
name: "泸州",
value: 57
},
{
name: "西宁",
value: 57
},
{
name: "宜宾",
value: 58
},
{
name: "呼和浩特",
value: 58
},
{
name: "成都",
value: 58
},
{
name: "大同",
value: 58
},
{
name: "镇江",
value: 59
},
{
name: "桂林",
value: 59
},
{
name: "张家界",
value: 59
},
{
name: "宜兴",
value: 59
},
{
name: "北海",
value: 60
},
{
name: "西安",
value: 61
},
{
name: "金坛",
value: 62
},
{
name: "东营",
value: 62
},
{
name: "牡丹江",
value: 63
},
{
name: "遵义",
value: 63
},
{
name: "绍兴",
value: 63
},
{
name: "扬州",
value: 64
},
{
name: "常州",
value: 64
},
{
name: "潍坊",
value: 65
},
{
name: "重庆",
value: 66
},
{
name: "台州",
value: 67
},
{
name: "南京",
value: 67
},
{
name: "滨州",
value: 70
},
{
name: "贵阳",
value: 71
},
{
name: "无锡",
value: 71
},
{
name: "本溪",
value: 71
},
{
name: "克拉玛依",
value: 72
},
{
name: "渭南",
value: 72
},
{
name: "马鞍山",
value: 72
},
{
name: "宝鸡",
value: 72
},
{
name: "焦作",
value: 75
},
{
name: "句容",
value: 75
},
{
name: "北京",
value: 79
},
{
name: "徐州",
value: 79
},
{
name: "衡水",
value: 80
},
{
name: "包头",
value: 80
},
{
name: "绵阳",
value: 80
},
{
name: "乌鲁木齐",
value: 84
},
{
name: "枣庄",
value: 84
},
{
name: "杭州",
value: 84
},
{
name: "淄博",
value: 85
},
{
name: "鞍山",
value: 86
},
{
name: "溧阳",
value: 86
},
{
name: "库尔勒",
value: 86
},
{
name: "安阳",
value: 90
},
{
name: "开封",
value: 90
},
{
name: "济南",
value: 92
},
{
name: "德阳",
value: 93
},
{
name: "温州",
value: 95
},
{
name: "九江",
value: 96
},
{
name: "邯郸",
value: 98
},
{
name: "临安",
value: 99
},
{
name: "兰州",
value: 99
},
{
name: "沧州",
value: 100
},
{
name: "临沂",
value: 103
},
{
name: "南充",
value: 104
},
{
name: "天津",
value: 105
},
{
name: "富阳",
value: 106
},
{
name: "泰安",
value: 112
},
{
name: "诸暨",
value: 112
},
{
name: "郑州",
value: 113
},
{
name: "哈尔滨",
value: 114
},
{
name: "聊城",
value: 116
},
{
name: "芜湖",
value: 117
},
{
name: "唐山",
value: 119
},
{
name: "平顶山",
value: 119
},
{
name: "邢台",
value: 119
},
{
name: "德州",
value: 120
},
{
name: "济宁",
value: 120
},
{
name: "荆州",
value: 127
},
{
name: "宜昌",
value: 130
},
{
name: "义乌",
value: 132
},
{
name: "丽水",
value: 133
},
{
name: "洛阳",
value: 134
},
{
name: "秦皇岛",
value: 136
},
{
name: "株洲",
value: 143
},
{
name: "石家庄",
value: 147
},
{
name: "莱芜",
value: 148
},
{
name: "常德",
value: 152
},
{
name: "保定",
value: 153
},
{
name: "湘潭",
value: 154
},
{
name: "金华",
value: 157
},
{
name: "岳阳",
value: 169
},
{
name: "长沙",
value: 175
},
{
name: "衢州",
value: 177
},
{
name: "廊坊",
value: 193
},
{
name: "菏泽",
value: 194
},
{
name: "合肥",
value: 229
},
{
name: "武汉",
value: 273
},
{
name: "大庆",
value: 279
}
]
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
//测试数据--忽略
var mapdata = [
['海门',121.15, 31.89, 9],
['招远',120.38, 37.35, 12],
]
$.getJSON(chinaDataURL, function(geoJson) {
console.log(convertData(data))
echarts.registerMap('china', geoJson)
option = {
backgroundColor: '#030303',
title: {
text: '全国泵机销售情况',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
return params.name + ' : ' + params.value[2];
}
},
legend: {
orient: 'vertical',
right: 20,
top: 10,
data: ['泵机数'],
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: 200,
left: 20,
bottom: 20,
calculable: true,
text: ['高', '低'],
inRange: {
color: ['rgb(70, 240, 252)', 'rgb(250, 220, 46)', 'rgb(245, 38, 186)']
},
textStyle: {
color: '#fff'
}
},
geo: {
map: 'china',
roam:'scale',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: 'rgb(19, 91, 153)',
borderColor: 'rgb(9, 54, 95)'
},
emphasis: {
areaColor: 'rgb(10, 105, 187)'
}
}
},
series: [{
name: '泵机数',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
},
{
type: 'map',
map: 'china',
geoIndex: 0,
aspectScale: 0.75,
tooltip: {
show:false
}
}
],
// dataset: {source: mapdata}
}
myChart.setOption(option);
})
截图如下
