由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现。
先贴两张图,第1张是全国地图:
第2张是点击河北后的河北省地图:
步骤详解:
1. 引入js
const echarts = require('echarts');
require('../../../static/js/china.js');
require('../../../static/js/all-province.js');
2. 编写初始化全国地图的option
let _this = this;
let myChart = echarts.init(document.getElementById('echartContainer'));
let option = {
title: {
text: '演出地场次统计-全国',
left: 'left'
},
tooltip: {
formatter: function (a, b, c) {
return ('省份:' + a['name']
+ '</br>场次:' + a['value']);
}
},
toolbox: {
right: 50,
show: true,
feature: {
restore: {show: true},
saveAsImage: {show: true}
}
},
visualMap: {
min: 0,
max: _this.maxValue,
left: 'left',
top: 'bottom',
text: ['多', '少'],
calculable: true,
colorLightness: [0.2, 100],
color: ['#c73737', '#e5cf0d', '#4f6cb0'],
dimension: 0
},
series: [
{
type: 'map',
mapType: 'china',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: _this.oneData
}
]
};
var Province = "";
myChart.on('click', function (params){
if(!this.isProvince){
this.isProvince = true;
var myChart= echarts.init(document.getElementById('echartContainer'));
Province = params.name;
option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
name: '中国',
type: 'map',
mapType: Province,
selectedMode : 'single',
layoutCenter: ['50%', '50%'],//距左百分比,距上百分比
layoutSize: 600,//省份地图大小为600xp。
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data:[
]
}
]
};
myChart.setOption(option);
}
});
myChart.setOption(option);
注意事项:
1. 一,全国地图的数据格式,会在下方贴出
2. 二,点击后某省的数据格式由于经费问题还没有做
3. 三,点击到省之后,没有写返回到全国地图的方法
4. 四,需要的两个js文件,其中的china.js文件官网就有,另外的all-province.js,我已上传到csdn,其下载地址为:https://download.csdn.net/download/bc_aptx4869/10474608
全国地图的数据格式: