一.中國地圖html
1.先導入echarts，而後再main.js裏引入echartsjson
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
// 還要特別引入china.json，這樣中國地圖纔會出現，否則只會出現右下角的南海諸島
import china from 'echarts/map/json/china.json'
echarts.registerMap('china', china)
2.頁面代碼
<div id="chinaChart" :style="{width: '100%', height: '500px'}"></div>
async drawChina() {
//加載中國地圖
const that = this;
// 基於準備好的dom，初始化echarts實例
var myChartContainer = document.getElementById('chinaChart');
var resizeMyChartContainer = function () {
myChartContainer.style.width = (document.body.offsetWidth / 2) + 'px'//頁面一半的大小
}
resizeMyChartContainer();
var myChartChina = this.$echarts.init(myChartContainer);
var chinaData = that.diTuData;//後臺返回的地圖數據，要去掉"省"字
var chinaBigValue = that.bigValue;//返回數據中最大值
// 繪製圖表
var chinaMap = {
title: {//標題
text: '省級統計',
left: 'center'
},
visualMap: {
min: 0,
max: chinaBigValue,
left: '10%',
top: 'bottom',
text: ['高', '低'],
calculable: true,
color: ['#0b50b9', '#c3e2f4']
},
tooltip: { //鼠標移動到某個省份時顯示內容
show: true,
formatter: function (item) {
let resData = item.data;
if (resData) {
return "省份:" + resData.name + "<br/>" + "數量:" + resData.value + "<br/>" + "百分比:" + resData.scale
} else {
return "省份:" + item.name + "<br/>" + "數量: 0" + "<br/>" + "百分比: 0.00%"
}
}
},
selectedMode: 'single',
calculable: true,
series: [
{
name: '',
type: 'map',
mapType: 'china',//main.js引入的中國地圖
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
showLegendSymbol: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: chinaData
}
]
}
myChartChina.setOption(chinaMap);
window.onresize = function () {
resizeMyChartContainer();
myChartChina.resize();
}
}
async changeCityData() {
//轉變獲取市區數據（由於我這邊是獲取微信小程序數據，因此要轉變下數據格式）
const that = this;
let provinceData = that.allCity;//全部市區數據
var provinceItem = that.provinceItem;//下拉選中省份
var countNum = 0; //當前省份總值
var bigCityValue = 0; //市區最大值
var newProData = []; //轉變後數據
for (let i = 0; i < allProvince.length; i++) {
let itemName = allProvince[i].name;
let reg = RegExp(itemName);
//判斷下拉選中的省份
if (reg.test(provinceItem)) {
var cityList = [];
//區別有的省份沒有市只有區
if (allProvince[i].city.length <= 1) {
cityList = allProvince[i].city[0].area;
} else {
cityList = allProvince[i].city;
}
for (let j = 0; j < provinceData.length; j++) {
let proName = provinceData[j].name;
let proValue = provinceData[j].value;
let regProName = RegExp(proName);
if (regProName.test("未知")) {
var newProItem = {};
newProItem.name = "未知";
newProItem.value = proValue;
newProData.push(newProItem);
} else {
for (let k = 0; k < cityList.length; k++) {
let cityName = "";
//區別有的省份沒有市只有區
if (allProvince[i].city.length <= 1) {
cityName = cityList[k];
} else {
cityName = cityList[k].name;
}
//判斷當前省份的市區
if (regProName.test(cityName)) {
var newProItem = {};
newProItem.name = cityName;
newProItem.value = proValue;
newProData.push(newProItem);
countNum += proValue;
if (bigCityValue < proValue) {
bigCityValue = proValue;
}
}
}
}
}
}
}
//添加遺漏的省份的市區
if (newProData.length <= 0) {
for (let i = 0; i < allProvince.length; i++) {
let itemName = allProvince[i].name;
let reg = RegExp(itemName);
//判斷下拉選中的省份
if (reg.test(provinceItem)) {
var cityList = [];
//區別有的省份沒有市只有區
if (allProvince[i].city.length <= 1) {
cityList = allProvince[i].city[0].area;
} else {
cityList = allProvince[i].city;
}
for (let j = 0; j < cityList.length; j++) {
let cityName = "";
//區別有的省份沒有市只有區
if (allProvince[i].city.length <= 1) {
cityName = cityList[j];
} else {
cityName = cityList[j].name;
}
var newProItem = {};
newProItem.name = cityName;
newProItem.value = 0;
newProData.push(newProItem);
}
}
}
}
//計算百分比
for (let i = 0; i < newProData.length; i++) {
let newProName = newProData[i].name;
let regNewPro = RegExp(newProName);
if ((countNum > 0 || newProData[i].value > 0) && !regNewPro.test("未知")) {
let itemNum = newProData[i].value * 100 / countNum;
newProData[i].scale = itemNum.toFixed(2) + "%";
} else {
newProData[i].scale = "0.00%";
}
}
//從大到小排序
newProData.sort((a, b) => {
return b.value - a.value;
})
that.bigCityValue = bigCityValue;
that.provinceCity = newProData;
}
async getProvinceItem(val) {
//省份選擇
let that = this;
that.provinceItem = val;
that.getMethodType = "ProvinceType";
that.changeCityData();
that.drawProvince();
}
3.樣式
二。省市地圖（可切換省份）小程序
1.最好把全部省份的js下載並放到本地(也能夠連線上的，下面有下載全部地圖的json數據連接，我這邊沒有釣魚島和臺灣的js)，而且還要下載一份全部省市區的json數據和省份的js數據對應。微信小程序
2.頁面微信
<el-card v-loading="isProvinceLoading">
<div class="chart-top">
<el-select v-model="provinceVal" @change="getProvinceVal" placeholder="請選擇">
<el-option
v-for="item in provinceScatter"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="provinceValue" @change="getProvinceValue" placeholder="請選擇">
<el-option
v-for="item in provinceOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="provinceItem" @change="getProvinceItem" placeholder="請選擇">
<el-option
v-for="item in provinceDatas"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<span>{{provinceBeginDate}}</span><span>至</span><span>{{provinceEndDate}}</span>
</div>
<div style="display: flex">
<div id="provinceChart" :style="{width: '100%', height: '500px'}"></div>
<el-table
:data="provinceCity"
style="width: 100%" height="500">
<el-table-column
prop="name"
label="市區"
min-width="100">
</el-table-column>
<el-table-column
prop="value"
label="用戶數">
</el-table-column>
<el-table-column
prop="scale"
label="佔比">
</el-table-column>
</el-table>
</div>
</el-card>
import allProvince from "../../assets/province-json/all-province";
import "../../assets/province-js/anhui";
import "../../assets/province-js/aomen";
import "../../assets/province-js/beijing";
import "../../assets/province-js/chongqing";
import "../../assets/province-js/fujian";
import "../../assets/province-js/gansu";
import "../../assets/province-js/guangdong";
import "../../assets/province-js/guangxi";
import "../../assets/province-js/guizhou";
import "../../assets/province-js/hainan";
import "../../assets/province-js/hebei";
import "../../assets/province-js/heilongjiang";
import "../../assets/province-js/henan";
import "../../assets/province-js/hubei";
import "../../assets/province-js/hunan";
import "../../assets/province-js/jiangxi";
import "../../assets/province-js/jilin";
import "../../assets/province-js/liaoning";
import "../../assets/province-js/jiangsu";
import "../../assets/province-js/neimenggu";
import "../../assets/province-js/ningxia";
import "../../assets/province-js/qinghai";
import "../../assets/province-js/shandong";
import "../../assets/province-js/shanghai";
import "../../assets/province-js/shanxi";
import "../../assets/province-js/shanxi1";
import "../../assets/province-js/sichuan";
import "../../assets/province-js/tianjin";
import "../../assets/province-js/xianggang";
import "../../assets/province-js/xinjiang";
import "../../assets/province-js/xizang";
import "../../assets/province-js/yunnan";
import "../../assets/province-js/zhejiang";
async drawProvince() {
//加載省市區地圖
const that = this;
// 基於準備好的dom，初始化echarts實例
var mychartContainer = document.getElementById('provinceChart');
var resizeMyChartContainer = function () {
mychartContainer.style.width = (document.body.offsetWidth / 2) + 'px'//頁面一半的大小
}
resizeMyChartContainer();
var mychart = this.$echarts.init(mychartContainer);
var provinceData = that.provinceCity;//返回的市區數據
var bigCityValue = that.bigCityValue;//最大值
var provinceItem = that.provinceItem;//下拉選中省份
// 繪製圖表
var optionMap = {
title: {
text: provinceItem + '省統計',
left: 'center'
},
tooltip: {
show: true,
formatter: function (item) {
let resData = item.data;
if (resData) {
return "市區:" + resData.name + "<br/>" + "數量:" + resData.value + "<br/>" + "百分比:" + resData.scale
} else {
return "市區:" + item.name + "<br/>" + "數量: 0" + "<br/>" + "百分比: 0.00%"
}
}
},
visualMap: {
min: 0,
max: bigCityValue,
left: '10%',
top: 'bottom',
text: ['高', '低'],
calculable: true,
color: ['#0b50b9', '#c3e2f4']
},
selectedMode: 'single',
series: [
{
// 類型
type: 'map',
// 系列名稱，用於tooltip的顯示，legend 的圖例篩選 在 setOption 更新數據和配置項時用於指定對應的系列
map: provinceItem,
// 地圖類型
mapType: 'province',//對應省份,中文（如：廣東）
//設置圖形大小
zoom: 0.8,
itemStyle: {
normal: {
borderColor: 'rgba(0, 0, 0, 0.2)'
},
emphasis: {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
showLegendSymbol: true,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: provinceData
}
]
}
mychart.setOption(optionMap);
window.onresize = function () {
resizeMyChartContainer();
mychart.resize();
}
}
3.樣式
參考文檔echarts
http://datav.aliyun.com/tools/atlas/#&lat=31.840232667909365&lng=104.2822265625&zoom=4dom
https://blog.csdn.net/qq_38021296/article/details/84380709async