記錄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官網讀一讀配置項手冊，不要嫌麻煩，真的很有用。
最終效果（真的醜，但是可以調的）
本文啟蒙文章，參考位址