echarts自定义，绘制区县地图
<template>
<div id="chart-map" @click="sendMsg"></div>
</template>
<script>
import * as echarts from "echarts";
import symbolIcon from "./png/symbol-icon.png";
import jinjiang from "./js/锦江区.json";
import pengan from "./js/蓬安县.json";
import cangxi from "./js/苍溪县.json";
export default {
props: {
data: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
chart: null,
chartClick: null,
symbolUrl: symbolIcon,
};
},
mounted() {
this.initChart();
},
beforeDestroy() {
if (!this.chart) {
return;
}
this.chart.dispose();
this.chart = null;
},
methods: {
initChart() {
this.chart = echarts.init(document.getElementById("chart-map"));
var role_name = sessionStorage.getItem("role_name");
// console.log('keywords', keywords);
let jjq = /锦江区/;
let pax = /蓬安县/;
let cxx = /苍溪县/;
var geoJson = [];
if (jjq.test(role_name)) {
geoJson = jinjiang;
} else if (pax.test(role_name)) {
geoJson = pengan;
} else if (cxx.test(role_name)) {
geoJson = cangxi;
}
this.chart.showLoading();
echarts.registerMap("jinjiang", geoJson);
this.chart.hideLoading();
var geoCoordMap = this.data.geoCoordMap;
// {
// 唯亭街道: [104.11007, 30.5751],
// 娄葑街道: [104.12007, 30.5751],
// 月亮湾社工委: [104.13007, 30.6051],
// 胜浦街道: [104.11007, 30.59751],
// 东沙湖社工委: [104.11007, 30.5791],
// 湖西社工委: [104.12007, 30.576151],
// 湖东社工委: [104.11007, 30.5751],
// 斜塘街道: [104.11007, 30.5751],
// };
var data = this.data.dataList;
// [
// { name: "唯亭街道", value: 199 },
// { name: "娄葑街道", value: 39 },
// { name: "月亮湾社工委", value: 152 },
// { name: "胜浦街道", value: 299 },
// { name: "东沙湖社工委", value: 89 },
// { name: "湖西社工委", value: 52 },
// { name: "南昌市", value: 9 },
// { name: "湖东社工委", value: 352 },
// { name: "斜塘街道", value: 99 },
// ];
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
};
var option = {
title: {
subtext: "",
x: "center",
textStyle: {
color: "#ccc",
},
},
tooltip: {
show: false,
trigger: "item",
formatter: function (params) {
if (typeof params.value[2] == "undefined") {
return params.name + " : " + params.value;
} else {
return params.name + " : " + params.value[2];
}
},
},
legend: {
show: false,
orient: "vertical",
y: "bottom",
x: "right",
// data: ["credit_pm2.5"],
textStyle: {
color: "#fff",
},
},
visualMap: {
show: false,
min: 100,
max: 200,
left: "left",
top: "bottom",
text: ["高", "低"], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ["#4F72EF"], // 黑紫黑
},
},
geo: {
show: true,
roam: true,
map: "jinjiang",
zoom: 1.24, //比例
label: {
normal: {
show: false,
},
emphasis: {
show: false,
},
},
itemStyle: {
normal: {
areaColor: "rgba(90, 137, 191,0.3)",
borderColor: "rgba(90, 137, 191, 1)",
backgroundColor: "red",
borderWidth: 2,
},
emphasis: {
show: true,
areaColor: "rgba(90, 137, 191,0.5)",
borderColor: "rgba(90, 137, 191, 1)",
backgroundColor: "red",
itemStyle: {
opacity: 1,
borderColor: "#f18355",
backgroundColor: "red",
borderWidth: 2,
areaColor: "red",
},
},
},
// geoIndex: 0,
// aspectScale: 0.95, //长宽比
// showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: "#fff",
},
},
},
},
series: [
{
type: "map",
map: "jinjiang",
roam: true,
large: false,
largeThreshold: 2000,
zoom: 1.2,
// geoIndex: 0,
aspectScale: 0.95, //长宽比
showLegendSymbol: false, // 存在legend时显示
animation: false,
itemStyle: {
normal: {
areaColor: "rgba(90, 137, 191,0.003)",
borderColor: "rgba(90, 137, 191, 0.001)",
backgroundColor: "red",
borderWidth: 2,
},
emphasis: {
areaColor: "rgba(90, 137, 191,0.005)",
borderColor: "rgba(90, 137, 191, 0.001)",
backgroundColor: "red",
},
},
select: {
// 地图选中区域样式
label: {
// 选中区域的label(文字)样式
color: "#fff",
},
itemStyle: {
// 选中区域的默认样式
areaColor: "rgba(90, 137, 191, 0.001)",
},
},
label: {
normal: {
show: false,
},
emphasis: {
show: false,
textStyle: {
color: "#fff",
},
},
},
data: data,
},
{
name: "点",
type: "scatter",
large: true,
// threshold: 10000,
// largeThreshold: 2000,
coordinateSystem: "geo",
symbol: "image://" + this.symbolUrl,
symbolSize: [150, 60],
label: {
// position: 'top',
normal: {
show: true,
// position: 'center',
// align: 'center',
textStyle: {
// color: "#ffffff",
// fontSize: 14,
// fontWeight: 500,
// padding: [60, 0, 60, 0],
},
formatter(value) {
return "{a|" + value.data.name + "}";
// 标点名字拼接
// ;
},
rich: {
a: {
padding: [0, 0, 30, 0],
color: "#ffffff",
fontSize: 14,
fontWeight: 500,
},
},
},
},
itemStyle: {
normal: {
color: "#D8BC37", //标志颜色
},
},
zlevel: 1,
hoverAnimation: false,
data: convertData(data),
},
],
};
this.chart.setOption(option);
// 点击页面图标
this.chart.on("click", function (res) {
if ("scatter" === res.componentSubType) {
// alert(`点击了 ${res.name} 图标`);
this.chartClick = res.data.name;
// 会话存储点击name
sessionStorage.setItem("mapData", this.chartClick);
}
if ("map" === res.componentSubType) {
// alert(`点击了 ${res.name} 地图`);
}
});
},
sendMsg() {
let mapData = sessionStorage.getItem("mapData");
console.log("mapData", mapData);
// 传点击的名字给父组件
this.$emit("pointClick", mapData);
//清空会话存储的数据，以免影响到直接打开其他弹框
setInterval(sessionStorage.removeItem("mapData"), 1000);
},
},
};
</script>
<style scoped>
#chart-map {
height: 100%;
}
</style>
使用
父组件中使用
<BMap
:data="centerData.mapData.data"
:center="centerData.mapData.center"
@pointClick="clickMapPoint"
></BMap>
methods: {
clickMapPoint(e) {
this.$emit("pointClick", e);}
}
锦江区json数据
引入import jinjiang from "./js/锦江区.json";
{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"adcode":510104,"name":"锦江区","center":[104.080989,30.657689],"centroid":[104.1151,30.60117],"childrenNum":0,"level":"district","acroutes":[100000,510000,510100],"parent":{"adcode":510100}},"geometry":{"type":"MultiPolygon","coordinates":[[[[104.059963,30.647006],[104.061966,30.646744],[104.063623,30.646813],[104.064705,30.646771],[104.065789,30.646596],[104.06698,30.646555],[104.069874,30.646028],[104.07257,30.645723],[104.073852,30.645659],[104.07703,30.645662],[104.077848,30.645552],[104.078643,30.645288],[104.079647,30.644749],[104.081238,30.643736],[104.082585,30.643052],[104.084925,30.641973],[104.086424,30.641534],[104.087705,30.641225],[104.088367,30.640895],[104.088873,30.640387],[104.090825,30.63795],[104.091687,30.636626],[104.092391,30.635082],[104.093429,30.631972],[104.093925,30.631079],[104.094212,30.630218],[104.094234,30.62949],[104.093968,30.6283],[104.093638,30.627638],[104.092977,30.627107],[104.092071,30.626756],[104.091188,30.626667],[104.088255,30.626689],[104.087264,30.626512],[104.086468,30.626027],[104.084945,30.624415],[104.084571,30.623686],[104.08447,30.622748],[104.084581,30.621734],[104.085265,30.620168],[104.085707,30.61933],[104.085816,30.618691],[104.08564,30.618095],[104.084895,30.617173],[104.084518,30.616524],[104.084518,30.615722],[104.084814,30.615131],[104.086179,30.61368],[104.086593,30.61288],[104.086712,30.612081],[104.086801,30.610866],[104.086978,30.610363],[104.088045,30.608882],[104.088194,30.607993],[104.088134,30.605652],[104.087778,30.604171],[104.087216,30.603044],[104.086356,30.602362],[104.083182,30.601412],[104.082397,30.600951],[104.081864,30.600301],[104.081716,30.59959],[104.082012,30.596064],[104.082279,30.594997],[104.082722,30.594169],[104.083405,30.59319],[104.083672,30.59254],[104.083643,30.591859],[104.083286,30.591265],[104.082634,30.590642],[104.082041,30.590404],[104.080202,30.590197],[104.079625,30.589854],[104.079208,30.589321],[104.078469,30.587394],[104.07829,30.586269],[104.078438,30.585202],[104.078912,30.583899],[104.079772,30.582093],[104.07995,30.580996],[104.079861,30.579486],[104.079165,30.578047],[104.078156,30.577275],[104.077355,30.576889],[104.076494,30.57603],[104.073885,30.573184],[104.073618,30.572442],[104.073676,30.571762],[104.074034,30.570872],[104.074864,30.570073],[104.075843,30.569749],[104.077491,30.569624],[104.080828,30.569973],[104.081529,30.569813],[104.082292,30.569293],[104.082713,30.56857],[104.082863,30.567778],[104.085919,30.56919],[104.086684,30.569395],[104.087232,30.569466],[104.087935,30.569452],[104.088465,30.569369],[104.089749,30.568761],[104.090296,30.56861],[104.091547,30.568595],[104.092398,30.568929],[104.09344,30.56977],[104.094005,30.570046],[104.099059,30.571331],[104.100536,30.571548],[104.102306,30.571617],[104.103921,30.571518],[104.105484,30.571296],[104.106768,30.570885],[104.108123,30.570233],[104.109451,30.569446],[104.110345,30.568658],[104.111281,30.567379],[104.111691,30.566204],[104.111864,30.564283],[104.112073,30.563608],[104.112991,30.561634],[104.113069,30.561288],[104.112904,30.560675],[104.112696,30.560466],[104.112193,30.560295],[104.111246,30.560259],[104.110441,30.560046],[104.109796,30.559698],[104.109276,30.559229],[104.108608,30.558462],[104.108018,30.557611],[104.107558,30.556748],[104.106959,30.555438],[104.106543,30.554272],[104.106386,30.553473],[104.106326,30.552182],[104.106421,30.551139],[104.106699,30.550194],[104.107047,30.549535],[104.107714,30.548805],[104.108557,30.548201],[104.109191,30.547944],[104.109509,30.54738],[104.110463,30.546449],[104.111187,30.546482],[104.111639,30.546666],[104.111644,30.546874],[104.112957,30.54711],[104.11419,30.547043],[104.114337,30.547099],[104.115018,30.547711],[104.114933,30.548219],[104.115179,30.549195],[104.115507,30.54921],[104.116122,30.548947],[104.116897,30.549409],[104.117357,30.549297],[104.118527,30.548455],[104.118686,30.548395],[104.119531,30.548435],[104.120965,30.548868],[104.121181,30.548827],[104.121687,30.548377],[104.122282,30.548609],[104.12282,30.548466],[104.123665,30.548523],[104.124162,30.548026],[104.124168,30.547605],[104.124748,30.547292],[104.125285,30.547496],[104.126105,30.547414],[104.126508,30.547777],[104.126819,30.547793],[104.128372,30.549798],[104.128531,30.55137],[104.12654,30.553191],[104.125864,30.553688],[104.125023,30.554105],[104.123592,30.554522],[104.123176,30.554732],[104.122933,30.555043],[104.122933,30.5559],[104.123125,30.556433],[104.125466,30.561608],[104.125813,30.562118],[104.126403,30.56264],[104.127018,30.563049],[104.127843,30.563421],[104.128753,30.563628],[104.130149,30.563817],[104.13079,30.563974],[104.13842,30.566969],[104.139434,30.567258],[104.140553,30.567367],[104.141411,30.567242],[104.142512,30.566879],[104.14323,30.56645],[104.143916,30.565814],[104.144592,30.564862],[104.146282,30.561893],[104.146802,30.5613],[104.147505,30.560911],[104.148172,30.560828],[104.148812,30.560992],[104.149324,30.561392],[104.151117,30.563157],[104.151448,30.563364],[104.151931,30.563376],[104.152452,30.563182],[104.153025,30.562824],[104.153683,30.562186],[104.154097,30.561695],[104.154975,30.562748],[104.155797,30.563522],[104.156514,30.563948],[104.157428,30.562911],[104.157817,30.56284],[104.158413,30.563494],[104.15891,30.563458],[104.159426,30.562854],[104.160196,30.562673],[104.160822,30.562674],[104.164244,30.563222],[104.164852,30.563599],[104.16515,30.564161],[104.165015,30.56457],[104.16363,30.565499],[104.1613,30.56601],[104.160822,30.566458],[104.16069,30.56683],[104.160859,30.567129],[104.162021,30.56721],[104.163275,30.566804],[104.164178,30.566735],[104.16491,30.566961],[104.165035,30.56726],[104.165378,30.567636],[104.16598,30.567713],[104.166629,30.567418],[104.167019,30.566928],[104.167691,30.566865],[104.168339,30.567264],[104.168217,30.568172],[104.167426,30.569812],[104.167379,30.570222],[104.167718,30.57101],[104.168008,30.572167],[104.167787,30.572951],[104.167178,30.573546],[104.165532,30.574846],[104.164883,30.575254],[104.164583,30.575102],[104.164499,30.574729],[104.165344,30.571632],[104.165398,30.570363],[104.165275,30.569429],[104.164934,30.56898],[104.164249,30.568825],[104.163601,30.568898],[104.163255,30.569121],[104.163116,30.570055],[104.163702,30.57211],[104.163565,30.573044],[104.163344,30.573677],[104.162866,30.574198],[104.161698,30.574828],[104.161411,30.574914],[104.160234,30.574878],[104.159186,30.575125],[104.159031,30.575572],[104.159351,30.57606],[104.160229,30.576568],[104.161604,30.577079],[104.162974,30.577926],[104.163507,30.579954],[104.165962,30.582413],[104.16673,30.583313],[104.167024,30.584136],[104.168167,30.58618],[104.171432,30.590178],[104.17162,30.590895],[104.17162,30.591339],[104.171378,30.591574],[104.17065,30.591736],[104.170398,30.591906],[104.170424,30.59227],[104.170814,30.592841],[104.170737,30.593151],[104.169436,30.594329],[104.169055,30.594318],[104.168769,30.593887],[104.168526,30.59378],[104.168458,30.593484],[104.168796,30.592755],[104.1689,30.592319],[104.168814,30.591887],[104.168561,30.591569],[104.168346,30.591621],[104.167972,30.592979],[104.167694,30.593225],[104.167289,30.593177],[104.166924,30.592845],[104.166785,30.592373],[104.166889,30.591881],[104.167184,30.591263],[104.167175,30.590633],[104.166984,30.590357],[104.165945,30.589446],[104.165339,30.589254],[104.16481,30.589415],[104.161664,30.59113],[104.16071,30.591444],[104.158883,30.591776],[104.158346,30.591942],[104.156648,30.592612],[104.156899,30.595179],[104.154854,30.596303],[104.154299,30.59669],[104.153294,30.597621],[104.156033,30.600863],[104.156215,30.601128],[104.156362,30.601688],[104.15644,30.602398],[104.156856,30.603075],[104.157229,30.60335],[104.158511,30.603942],[104.156163,30.605742],[104.155643,30.605315],[104.154455,30.605608],[104.152923,30.605762],[104.151874,30.606199],[104.151354,30.606063],[104.15092,30.606048],[104.150445,30.606187],[104.149655,30.606756],[104.149421,30.607199],[104.149325,30.607708],[104.149325,30.609154],[104.14511,30.610527],[104.145079,30.610872],[104.145218,30.611607],[104.144802,30.612104],[104.144785,30.613456],[104.144681,30.613748],[104.143736,30.614481],[104.143336,30.614925],[104.143135,30.615345],[104.143182,30.615591],[104.14292,30.61629],[104.14285,30.616694],[104.142677,30.616802],[104.142323,30.616711],[104.141955,30.616907],[104.141699,30.617407],[104.14084,30.617477],[104.140537,30.617367],[104.139575,30.616664],[104.139178,30.616567],[104.139039,30.616667],[104.138831,30.617744],[104.138483,30.618239],[104.137824,30.618823],[104.137339,30.61896],[104.136775,30.618976],[104.136194,30.618743],[104.135423,30.618212],[104.13519,30.618184],[104.134261,30.618489],[104.134123,30.618474],[104.133508,30.617917],[104.133169,30.617377],[104.132945,30.617264],[104.132169,30.617561],[104.131041,30.617788],[104.130195,30.617902],[104.129077,30.618346],[104.128649,30.618571],[104.127647,30.619366],[104.124679,30.621591],[104.124379,30.621794],[104.125088,30.622852],[104.126871,30.624149],[104.123612,30.625254],[104.124697,30.626359],[104.12675,30.625481],[104.129344,30.626096],[104.127736,30.626758],[104.129139,30.628138],[104.126974,30.630032],[104.127376,30.63081],[104.126383,30.631332],[104.127706,30.632728],[104.127866,30.634367],[104.127782,30.634658],[104.123953,30.636463],[104.123921,30.637103],[104.120605,30.638547],[104.105962,30.645581],[104.104548,30.646123],[104.101551,30.647511],[104.09765,30.649253],[104.090369,30.652656],[104.088509,30.653566],[104.088846,30.654279],[104.089276,30.654941],[104.091902,30.658336],[104.092226,30.659275],[104.092318,30.660322],[104.092456,30.660937],[104.093073,30.662138],[104.093365,30.662599],[104.094151,30.663107],[104.09472,30.663231],[104.095504,30.663293],[104.095951,30.663431],[104.096336,30.663724],[104.096536,30.664077],[104.096566,30.664557],[104.096442,30.664957],[104.096122,30.665314],[104.094509,30.666361],[104.093707,30.66705],[104.091914,30.668878],[104.091321,30.669267],[104.08962,30.670089],[104.086839,30.665675],[104.085922,30.664271],[104.085293,30.664714],[104.08503,30.664516],[104.08037,30.666686],[104.079262,30.667233],[104.077824,30.665135],[104.074375,30.659896],[104.073627,30.660081],[104.073566,30.659293],[104.073025,30.659293],[104.073019,30.659477],[104.071507,30.65949],[104.071507,30.660206],[104.070893,30.660139],[104.070855,30.661042],[104.070108,30.661035],[104.070188,30.661736],[104.069651,30.661636],[104.068863,30.661629],[104.068898,30.658278],[104.067529,30.658252],[104.06754,30.656365],[104.066108,30.656325],[104.066124,30.655342],[104.066583,30.655333],[104.066576,30.654756],[104.066211,30.654751],[104.066211,30.654521],[104.066861,30.654503],[104.066878,30.653556],[104.066175,30.653536],[104.066229,30.652749],[104.065495,30.652664],[104.063922,30.652742],[104.062695,30.650744],[104.06156,30.649143],[104.059963,30.647006]]]]}}]}
