记录echart下钻到省 市两级地图测试小demo
昨天开始做的时候在网上查了半天，我心里也很疑惑，地图的数据从哪里来的。然后就看到网上各种要下载china.js，province.js。我就到各个博客去看有没有免费的，结果没有。。。最后终于找到一个百度云盘，下载了China.js。下载完成之后满心欢喜，虽然没弄到省份的，起码中国的有了吧。我一打开js文件发现后面一堆乱码。。。。我想呀，没事。照样用。结果因为我们项目是用vue写的，china.js文件里面有this指向的问题，就跟vue起冲突了，地图怎么也加载不出来，还报错。T_T。。。
最搞笑的来了呀，我在引echarts的时候发现echarts的包里面有china.js（echarts/map/js/china）…里面还有各个省份的js（echarts/map/js/province/anhui），省份有点麻烦，如果所有的省份都要就需要引入三十多个，不知道有没有人有更好的办法。
贴图：
其实一开始拿到这个需求的时候我也是懵逼的，地图上的数据怎么搞？怎么知道我的数据定位在哪？我怎么从省下砖到市？一脸懵逼。其实写完小demo就发现逻辑很简单。就是当展示全国地图的时候，是一个全国是、各省分的option，点击省份要展示市的时候直接重新加载画布换一个option就可以了。echarts真的是一个强大的工具。上主要代码
initChart() {
let myChart = echarts.init(document.getElementById('echartMap'))
let data = [{
name: '湖北',
value1: this.randdomData(),
value2: this.randdomData()
}, {
name: '北京',
value1: this.randdomData(),
value2: this.randdomData()
}, {
name: '上海',
value1: this.randdomData(),
value2: this.randdomData()
}, {
name: '浙江',
value1: this.randdomData(),
value2: this.randdomData()
}, {
name: '四川',
value1: this.randdomData(),
value2: this.randdomData()
}]
let resultdata0 = []
let sum0 = 0
let titledata = []
for(let i = 0; i < data.length; i++){
let d0 = {
name: data[i].name,
value: data[i].value1 + data[i].value2
}
titledata.push(data[i].name)
resultdata0.push(d0)
sum0 += data[i].value1 + data[i].value2
}
let option = {
title: [{
text: '测试地图', // 标题
subtext: '仅仅只是测试',
left: 'left'
}, {
text: '全部：' + sum0, // 标题文字展示总和
right: '54%',
top: 40, // 文字位置
width: 100,
textStyle: {
color: '#555',
fontSize: 16
}
}],
tooltip: {
trigger: 'item'
},
visualMap: {
min: 0, // 指定组件允许的最小值
max: 2500, // 指定组件允许的最大值
left: 'left', // 距容器左侧边距
top: '50', // 距容器上册边距
text: ['高', '滴'], // 最大最小值得文字描述
calculable: true, // 是否显示拖拽的手柄
colorLightness: [0.2, 100],
color: ['#c50500', '#e5cf0d', '#5ablef'],
dimension: 0
},
toolbox: {
// 悬浮框
show: false,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false
},
restore: {
},
saveAsImage: {
}
}
},
grid: {
right: '10%',
top: 100,
bottom: 40,
height: '40%',
width: '100%'
},
// 重点是这里
series: [{
z: 1,
name: '全部',
type: 'map', // 图标类型
map: 'china', // china就展示中国地图，省份名字就展示省份地图
left: '10',
right: '5%',
top: 100,
bottom: '3%',
zoom: 1,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
// 有数据就高亮展示的地方
data: resultdata0
}]
}
// 地图进行点击
let Prov = ''
myChart.on('click', (params) => {
console.log(params)
if(this.isProvince) {
this.isProvince = !this.isProvince
let proviceChart = echarts.init(document.getElementById('echartMap'))
Prov = params.name
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '中国',
type: 'map',
mapType: Prov,
selecteMode: 'single',
layoutCenter: ['50%', '50%'],
layoutSize: 600, //省份地图大小
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: []
}
]
}
proviceChart.setOption(option)
}
})
myChart.setOption(option)
},
randdomData() {
return Math.round(Math.random()*1000)
},
NumDescSort(a, b) {
return a.value - b.value
},
以上只是一简单的demo，没有任何的样式。需要可以去echart官网读一读配置项手册，不要嫌麻烦，真的很有用。
最终效果（真的丑，但是可以调的）
本文启蒙文章，参考地址