记一次vue+echarts实现中国地图及数据散列点形式展示
实现效果
地图配置项
/*eslint-disable*/
var mapData2 = [{
"name": "北京市",
"count": "10"
},
{
"name": "天津市",
"count": "25"
},
{
"name": "河北省",
"count": "0"
},
{
"name": "山西省",
"count": "6"
},
{
"name": "内蒙古自治区",
"count": "1615"
},
{
"name": "辽宁省",
"count": "0"
},
{
"name": "吉林省",
"count": "0"
},
{
"name": "黑龙江省",
"count": "58"
},
{
"name": "上海市",
"count": "15377"
},
{
"name": "江苏省",
"count": "1088"
},
{
"name": "浙江省",
"count": "0"
},
{
"name": "安徽省",
"count": "0"
},
{
"name": "福建省",
"count": "1065"
},
{
"name": "江西省",
"count": "3148"
},
{
"name": "山东省",
"count": "25084"
},
{
"name": "河南省",
"count": "2885"
},
{
"name": "湖北省",
"count": "712"
},
{
"name": "湖南省",
"count": "2536"
},
{
"name": "广东省",
"count": "34"
},
{
"name": "广西壮族自治区",
"count": "0"
},
{
"name": "海南省",
"count": "0"
},
{
"name": "重庆市",
"count": "24"
},
{
"name": "四川省",
"count": "558"
},
{
"name": "贵州省",
"count": "646"
},
{
"name": "云南省",
"count": "427"
},
{
"name": "西藏自治区",
"count": "0"
},
{
"name": "陕西省",
"count": "0"
},
{
"name": "甘肃省",
"count": "0"
},
{
"name": "青海省",
"count": "0"
},
{
"name": "宁夏回族自治区",
"count": "0"
},
{
"name": "新疆维吾尔自治区",
"count": "0"
},
{
"name": "台湾省",
"count": "0"
},
{
"name": "香港特别行政区",
"count": "0"
},
{
"name": "澳门特别行政区",
"count": "0"
}
]
var mapData = [{
"name": "北京市",
"count": "10"
},
{
"name": "天津市",
"count": "25"
},
{
"name": "河北省",
"count": "0"
},
{
"name": "山西省",
"count": "6"
},
{
"name": "内蒙古自治区",
"count": "1615"
},
{
"name": "辽宁省",
"count": "0"
},
{
"name": "吉林省",
"count": "0"
},
{
"name": "黑龙江省",
"count": "58"
},
{
"name": "上海市",
"count": "15377"
},
{
"name": "江苏省",
"count": "1088"
},
{
"name": "浙江省",
"count": "0"
},
{
"name": "安徽省",
"count": "0"
},
{
"name": "福建省",
"count": "1065"
},
{
"name": "江西省",
"count": "3148"
},
{
"name": "山东省",
"count": "25084"
},
{
"name": "河南省",
"count": "2885"
},
{
"name": "湖北省",
"count": "712"
},
{
"name": "湖南省",
"count": "2536"
},
{
"name": "广东省",
"count": "34"
},
{
"name": "广西壮族自治区",
"count": "0"
},
{
"name": "海南省",
"count": "0"
},
{
"name": "重庆市",
"count": "24"
},
{
"name": "四川省",
"count": "558"
},
{
"name": "贵州省",
"count": "646"
},
{
"name": "云南省",
"count": "427"
},
{
"name": "西藏自治区",
"count": "0"
},
{
"name": "陕西省",
"count": "0"
},
{
"name": "甘肃省",
"count": "0"
},
{
"name": "青海省",
"count": "0"
},
{
"name": "宁夏回族自治区",
"count": "0"
},
{
"name": "新疆维吾尔自治区",
"count": "0"
},
{
"name": "台湾省",
"count": "0"
},
{
"name": "香港特别行政区",
"count": "0"
},
{
"name": "澳门特别行政区",
"count": "0"
}
]
function randomData() {
return Math.round(Math.random()*500);
}
var geoCoordMap = {
"北京市": [116.378173828125, 39.90973623453719],
"天津市":[
117.19802856445311,
39.12366825402605
],
"河北省": [
114.4830322265625,
38.06971703320484
],
"山西省":[
112.52197265625,
37.89219554724437
],
"四川省":[
104.07,
30.67
],
"内蒙古自治区":[
111.67877197265624,
40.84706035607122
],
"辽宁省":[
123.4423828125,
41.832735062152615
],
"吉林省":[
125.3045654296875,
43.88997537383687
],
"黑龙江省":[
126.6448974609375,
45.763690956618674
],
"上海市": [
121.46209716796875,
31.228068791512136
],
"江苏省":[
118.79241943359374,
32.05231681645636
],
"浙江省":[
120.13824462890625,
30.300575007090888
],
"安徽省":[
117.25982666015624,
31.861229825930895
],
"福建省":[
119.30328369140624,
26.07652055985697
],
"江西省": [
115.87005615234375,
28.680949728554964
],
"山东省":[
117.12524414062501,
36.66841891894786
],
"河南省": [
113.6480712890625,
34.77771580360469
],
"湖北省":[
114.3017578125,
30.62373195163005
],
"湖南省":[
112.99850463867188,
28.199136859968778
],
"广东省":[
113.291015625,
23.14541110372829
],
"广西壮族自治区":[
108.30047607421875,
22.842008398595794
],
"重庆市":[
106.50146484374999,
29.592565403314087
],
"贵州省":[
106.69921875,
26.60817437403311
],
"云南省":[
102.72491455078125,
25.05076877966861
],
"西藏自治区":[
91.131591796875,
29.663592747483726
],
"甘肃省":[
103.83316040039062,
36.05742594589385
],
"青海省":[
101.76567077636719,
36.64638529597495
],
"新疆维吾尔自治区":[
87.60086059570312,
43.807774213873806
],
"台湾省": [
121.56372070312499,
25.045792240303445
],
"香港特别行政区":[
114.1754150390625,
22.32721165838893
],
"澳门特别行政区": [
113.56155395507812,
22.151795575397756
],
}
//拼接对象数组
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(Number(data[i].count)) //用连接数组的形式将value值加入
})
}
}
console.log(res)
return res;
}
export default {
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = (params.value[2] + '').split('.');
return '申请单数量' + '
'+ params.name + ':' + value + '单';
}
},
legend: {
show: false,
orient: 'vertical',
left: 'left',
data:['']
},
visualMap: {
min: 0,
max: 100,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
show: false,
inRange: {
color: ['#FFCC00', '#FFCC00', '#FFCC00']
}
},
geo: {
map: 'china',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
//未激活样式
normal: {
areaColor: '#337BFF',
borderColor: '#111'
},
//激活样式
emphasis: {
areaColor: '#e6a23c'
}
}
},
selectedMode: 'single',
series : [
{
name: '申请单数',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(mapData),
symbolSize: function (val,params) {
if (val[2]>1000) {
return 15
} else if (val[2]>100 && val[2] < 1000) {
return 10
}
else {
return 5
}
},
label: {
normal: {
show: false
},
emphasis: {
show: false
}
}
}
]
}
实现代码
将上述配置项单独放在一个js文件内，然后在.vue文件中引入相关文件
import echarts from 'echarts'
import china from 'echarts/map/json/china.json'
import optionMap from './china-map' // 地图配置项
echarts.registerMap('china', china)在template内加一个div其id为myChartChina ,并将下面代码拷贝就完成了。
mounted() {
this.drawLine()
},
methods: {
drawLine(){
// 基于准备好的dom，初始化echarts实例
var myChartContainer = document.getElementById('myChartChina')
var myChartChina = echarts.init(myChartContainer)
myChartChina.setOption(optionMap);
window.onresize=function(){
// resizeMyChartContainer();
myChartChina.resize();
}
}
}