utils方法
const _list = [{
name: "北京市",
adcode: "110000"
},
{
name: "天津市",
adcode: "120000"
},
{
name: "河北省",
adcode: "130000"
},
{
name: "山西省",
adcode: "140000"
},
{
name: "内蒙古自治区",
adcode: "150000"
},
{
name: "辽宁省",
adcode: "210000"
},
{
name: "吉林省",
adcode: "220000"
},
{
name: "黑龙江省",
adcode: "230000"
},
{
name: "上海市",
adcode: "310000"
},
{
name: "江苏省",
adcode: "320000"
},
{
name: "浙江省",
adcode: "330000"
},
{
name: "安徽省",
adcode: "340000"
},
{
name: "福建省",
adcode: "350000"
},
{
name: "江西省",
adcode: "360000"
},
{
name: "山东省",
adcode: "370000"
},
{
name: "河南省",
adcode: "410000"
},
{
name: "湖北省",
adcode: "420000"
},
{
name: "湖南省",
adcode: "430000"
},
{
name: "广东省",
adcode: "440000"
},
{
name: "广西壮族自治区",
adcode: "450000"
},
{
name: "海南省",
adcode: "460000"
},
{
name: "重庆市",
adcode: "500000"
},
{
name: "四川省",
adcode: "510000"
},
{
name: "贵州省",
adcode: "520000"
},
{
name: "云南省",
adcode: "530000"
},
{
name: "西藏自治区",
adcode: "540000"
},
{
name: "陕西省",
adcode: "610000"
},
{
name: "甘肃省",
adcode: "620000"
},
{
name: "青海省",
adcode: "630000"
},
{
name: "宁夏回族自治区",
adcode: "640000"
},
{
name: "新疆维吾尔自治区",
adcode: "650000"
},
{
name: "台湾省",
adcode: "710000"
},
{
name: "香港特别行政区",
adcode: "810000"
},
{
name: "澳门特别行政区",
adcode: "820000"
}
];
export const mapRender = (domID, data, percent = false, mapName = "china") => {
console.log(data)
if (data.length == 0) {
return
}
const chartDom = document.getElementById(domID);
const minV = Math.min.apply(null, data.map(o => o.value));
const maxV = Math.max.apply(null, data.map(o => o.value));
if (mapName != "china") {
echarts.dispose(chartDom);
}
let json, type;
if (mapName == "china") {
type = "china";
} else {
// 动态加载json
const item = _list.find(o => o.name == mapName);
if (item) {
type = `province/${item.adcode}`;
}
}
json = require(`@/utils/geoMapData/${type}.json`);
echarts.registerMap(mapName, {
geoJSON: json
});
let mapChart = echarts.init(chartDom);
mapChart.clear();
mapChart.setOption({
tooltip: {
trigger: "item",
formatter: function ({
marker,
name,
data
}) {
let value;
if (percent) {
value = `${Number(data?data.value * 100:0).toFixed(2)}%`;
} else {
value = data ? data.numOnly ? data.value + (data.unit ? data.unit : '') : Number(data.value).toFixed(2) + (data.unit ? data.unit : '') : 0;
}
return `
}
},
visualMap: {
type: "piecewise",
left: "center",
orient: "horizontal",
itemHeight: 12,
itemGap: 1,
min: minV,
max: maxV,
text: [percent ? `${Number(maxV * 100).toFixed(2)}%` : data[0].numOnly ? Number(maxV).toFixed(0) : Number(maxV).toFixed(2),
percent ? `${Number(minV * 100).toFixed(2)}%` : data[0].numOnly ? Number(minV).toFixed(0) : Number(minV).toFixed(2)
],
inRange: {
symbol: "rect",
color: ["#224eff", "#8a9efa", "#cab8da", "#c87b8c", "#9f0822"],
},
},
series: [{
type: "map",
map: mapName,
data: data,
roam: true,
zoom: 1.2,
}, ],
});
return mapChart;
};
精彩链接
发表评论