由于经费问题,只写了省钻到市,市钻到县与县钻到乡在本文中根本没有出现。
先贴两张图,第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. 三,点击到省之后,没有写返回到全国地图的方法
全国地图的数据格式: