在vue中使用echarts渲染地图，geo点击某个区域可高亮，取消
一、安装echarts
npm install echarts --save
二、main.js引入注册
import Vue from "vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;
三、vue文件中使用echarts
<template>
<div class="page-warp">
<div ref="mapEchart" class="map-box"></div>
</div>
</template>
<script>
import geoJson from "地图数据json文件";
export default {
data() {
return {
markerData: [
{
name: "测试地址1",
value: [118.77,32.00],
},
{
name: "测试地址1",
value: [118.73,31.91],
},
{
name: "测试地址2",
value: [118.88,31.91],
},
{
name: "测试地址3",
value: [118.77,32.02],
},
{
name: "测试地址4",
value: [118.86,32.06],
},
],
features: [],
};
},
mounted() {
this.$nextTick(() => {
this.getInitEchart();
this.getMapId();
});
},
methods: {
getMapId() {
this.features = this.$echarts.getMap("geoJson").geoJson.features;
},
getInitEchart() {
let that = this;
let myChart = this.$echarts.init(this.$refs.mapEchart);
// var img = new Image();
var canvas = document.createElement("canvas");
// var ctx = canvas.getContext("2d");
canvas.width = myChart.getWidth() * window.devicePixelRatio;
canvas.height = myChart.getHeight() * window.devicePixelRatio;
// var fullImage = new Image();
// img.onload = function () {
// ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
// fullImage.src = canvas.toDataURL();
// setTimeout(function () {
// myChart.resize();
// }, 100);
// };
// img.src = require("");//背景图地址可以不加
this.$echarts.registerMap("geoJson", geoJson);
let option = {
tooltip: {
show: false,
trigger: "item",
axisPointer: {
type: "shadow",
},
},
grid: {
height: "100%",
width: "100%",
},
geo: {
map: "nantong",
aspectScale: 0.9,
silent: false,
label: {
show: false,
emphasis: {
show: false, // 高亮状态下显示区域名称
areaColor: "rgba(35, 99, 150,0.1)",
},
},
top: "center",
left: "center",
roam: false, //禁止拖拽
selectedMode: "single", //单选
clickable: true,
animationDurationUpdate: 0,
scaleLimit: {
min: 1,
max: 1,
},
zoom: 1.02,
itemStyle: {
normal: {
areaColor: {
// image: img,//背景图
repeat: "repeat",
label: {
show: false,
},
},
shadowColor: "#246496",
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 10,
borderColor: "#0fcef9",
borderWidth: 2,
},
emphasis: {
areaColor: "rgba(35, 99, 150,0.1)",
borderWidth: 1,
color: "green",
label: {
show: false,
},
},
},
select: {
disabled: false, //可以被选中
label: {
show: false,
},
//相关配置项很多，可以参考echarts官网
itemStyle: {
areaColor: "rgba(35, 99, 150,0.1)",
},
},
},
series: [
{
//底部图片
type: "custom",
coordinateSystem: "geo",
clickable: true,
data: that.markerData,
renderItem: function (params, api) {
return {
type: "image",
name: "",
style: {
image: require("@/assets/images/图片.png"),
width: 30,
height: 94,
x: api.coord([
that.markerData[params.dataIndex].value[0],
that.markerData[params.dataIndex].value[1],
])[0],
y: api.coord([
that.markerData[params.dataIndex].value[0],
that.markerData[params.dataIndex].value[1],
])[1],
},
};
},
},
{
//头部文字
type: "custom",
coordinateSystem: "geo",
clickable: true,
data: that.markerData,
renderItem: function (params, api) {
let x = api.coord([
that.markerData[params.dataIndex].value[0],
that.markerData[params.dataIndex].value[1],
])[0];
let y = api.coord([
that.markerData[params.dataIndex].value[0],
that.markerData[params.dataIndex].value[1],
])[1];
return {
type: "text",
name: "文字",
style: {
text: that.markerData[params.dataIndex].name,
backgroundColor: "rgba(0,0,0,0.5)",
padding: [10, 15, 10, 40],
borderRadius: 15,
x: x - 30,
y: y,
fill: "#fff",
},
};
},
},
{
//头部图片
type: "custom",
coordinateSystem: "geo",
clickable: true,
data: that.markerData,
renderItem: function (params, api) {
let x = api.coord([
that.markerData[params.dataIndex].value[0],
that.markerData[params.dataIndex].value[1],
])[0];
let y = api.coord([
that.markerData[params.dataIndex].value[0],
that.markerData[params.dataIndex].value[1],
])[1];
return {
type: "image",
name: "",
style: {
image: require("@/assets/images/图片.png"),
width: 20,
height: 20,
x: x - 20,
y: y + 4,
},
};
},
},
],
};
myChart.on("click", function (data) {
console.log("data: ", data);
myChart.dispatchAction({//点击高亮设置
type: "select",
// geo 中名称
name: data.name,
});
});
myChart.clear();
myChart.setOption(option);
window.onresize = function () {
myChart.resize();
};
},
},
};
</script>
<style lang="scss" scoped>
.page-warp {
width:100%;
height:100vh;
.map-box{
width:100%;
height:100%;
}
}
</style>
四、显示效果图：
**
点击效果：
