To download the map in echart, you can use npm i to install more than 4 versions, then copy the map to node_modules\echarts, and then add "map/js/china.js" to the sideEffects in node_modules\echarts\package.json
or Go directly to download my packaged resource echart5.0 with map
Remember to introduce china.js import * as echarts from 'echarts';
import 'echarts/map/js/china.js' on the page that needs to draw pictures
Above, let's take an example
import * as echarts from 'echarts';
import 'echarts/map/js/china.js'
let dataList = [
{
name: '澳门', value: 18 },
{
name: '香港', value: 273 },
{
name: '台湾', value: 153 },
{
name: '新疆', value: 76 },
{
name: '宁夏', value: 75 },
{
name: '青海', value: 18 },
{
name: '甘肃', value: 134 },
{
name: '陕西', value: 248 },
{
name: '西藏', value: 1 },
{
name: '云南', value: 176 },
{
name: '贵州', value: 146 },
{
name: '四川', value: 1543 },
{
name: '重庆', value: 576 },
{
name: '海南', value: 168 },
{
name: '广西', value: 254 },
{
name: '广东', value: 1407 },
{
name: '湖南', value: 1018 },
{
name: '湖北', value: 2000},
{
name: '河南', value: 1273 },
{
name: '山东', value: 765 },
{
name: '江西', value: 936 },
{
name: '福建', value: 307 },
{
name: '安徽', value: 990 },
{
name: '浙江', value: 1237 },
{
name: '江苏', value: 633 },
{
name: '上海', value: 394 },
{
name: '黑龙江', value: 484 },
{
name: '吉林', value: 93 },
{
name: '辽宁', value: 126 },
{
name: '内蒙古', value: 75 },
{
name: '山西', value: 133 },
{
name: '河北', value: 319 },
{
name: '天津', value: 137 },
{
name: '北京', value: 512 }
];
const maxNum = (arr: any) => {
let arr2: Array<number> = []
arr.forEach((item: any) => {
for (let key in item) {
arr2.push(item[key])
}
})
return Math.max(...arr2)
}
//记得求一下最大数
drawMap(dataList, 200)
const drawMap = (res: any, max: number) => {
var chartDom = document.getElementById('map');
var myChart = echarts.init(chartDom);
console.log(max);
// max % 5 是否有余数，有则max--，
let step = 1;
const countStep = (num: number) => {
if (num % 5 != 0) {
num--;
countStep(num)
} else {
step = num / 5
}
}
if (max > 5) countStep(max)
let option = {
tooltip: {
// triggerOn: "click",
formatter: function (e, t, n) {
return '.5' == e.value ? e.name + "地区数量：" : e.seriesName + "<br />" + e.name + "：" + e.value
}
},
// grid: {
// left: '5%',
// right: '5%',
// bottom: '5%',
// top: '0%',
// containLabel: true,
// },
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {
readOnly: false },
restore: {
},
saveAsImage: {
}
}
}, // 提供下载工具
visualMap: {
min: 1,
max: 100000,
left: 0,
bottom: 120,
showLabel: !0,
text: ["高", "低"],
pieces: [{
gt: step * 4,
label: "> " + step * 4,
color: "#7f1100"
}, {
gte: step * 3,
lte: step * 4,
label: step * 3 + " - " + step * 4,
color: "#ff5428"
}, {
gte: step * 2,
lt: step * 3,
label: step * 2 + " - " + step * 3,
color: "#ff8c71"
}, {
gt: step,
lt: step * 2,
label: step * 1 + " - " + step * 2,
color: "#ffd768"
}, {
gt: 0,
lt: step,
label: "0 - " + step,
color: "#ffffff"
}],
show: !0
},
geo: {
map: "china",
// roam: !1,
// scaleLimit: {
// min: 1,
// max: 2
// },
// zoom: 1.23,
// top: 120,
label: {
normal: {
show: !0,
fontSize: "12",
color: "rgba(0,0,0,0.7)"
}
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
roam: true, //是否允许缩放
series: [{
name: "地区数量：",
type: "map",
geoIndex: 0,
data: res,
// data: dataList
}]
};
option && myChart.setOption(option);
}