Vue 使用echarts 地图自定义图标和修改图标样式，点击切换图标
效果图：如下注意事项：1.使用echarts最好看官方文档，官方文档（链接如下）https://echarts.apache.org/examples/zh/index.html#chart-type-maphttps://echarts.apache.org/examples/zh/index.html#chart-type-map很多例子可以参考，我参考的是美国人口统计2.文档中很多属性和ap
·
效果图：如下
注意事项：
1.使用echarts最好看官方文档，官方文档（链接如下）
https://echarts.apache.org/examples/zh/index.html#chart-type-map很多例子可以参考，我参考的是美国人口统计
2.文档中很多属性和api 如果不清楚的话可以先百度找到你要的属性在去看官方文档
3.使用echarts记得注意版本，我使用的是v5.1.1版本，我之前使用v5.1.2 就运行不了，说type undefined，哪位大佬知道为啥不
代码如下：
1.<template>:
<template>
<div class="recruit">
<div class="map">
<div id="main" style="width: 900px; height: 880px" />
</div>
</div>
</template>2.<script>: 我把公用的提取到vue的data（）中，方便维护
2.1 引用json和js （地图json 百度一下有很多）
<script>
import * as echarts from "echarts";
import china from "@/json/js/china.json";
export default {2.2 data（），chinaData是你想要省份，geoCoordMap是省份的经纬坐标，option 是echarts地图的属性和设置，可以根据自己的需要看着官方文档来设置
自定义图标和切换图标在symbol 这个属性中，可以写成函数，如果是其他格式的图片可以查看官方文档，图片推荐放在public 文件夹中，上传服务器不会产生找不到图片问题。
我是根据ChinaData中的value 来判断图标是1.svg还是3.svg，切换只需要通过echarts的鼠标事件就可以切换value中的值，如果想测试的话，找两张svg的图应该是可以实现，记得修改图片路径为你们自己的
data() {
return {
chinaData: [
{ name: "台湾", value: ["0"] },
{ name: "河北", value: ["0"] },
{ name: "山西", value: ["0"] },
{ name: "内蒙古", value: ["0"] },
{ name: "辽宁", value: ["0"] },
{ name: "吉林", value: ["0"] },
{ name: "黑龙江", value: ["0"] },
{ name: "江苏", value: ["0"] },
{ name: "浙江", value: ["0"] },
{ name: "安徽", value: ["0"] },
{ name: "福建", value: ["0"] },
{ name: "江西", value: ["0"] },
{ name: "山东", value: ["0"] },
{ name: "河南", value: ["0"] },
{ name: "湖北", value: ["0"] },
{ name: "湖南", value: ["0"] },
{ name: "广东", value: ["1"] },
{ name: "海南", value: ["0"] },
{ name: "四川", value: ["0"] },
{ name: "贵州", value: ["0"] },
{ name: "云南", value: ["0"] },
{ name: "西藏", value: ["0"] },
{ name: "陕西", value: ["0"] },
{ name: "甘肃", value: ["0"] },
{ name: "青海", value: ["0"] },
{ name: "宁夏", value: ["0"] },
{ name: "新疆", value: ["0"] },
{ name: "北京", value: ["0"] },
{ name: "天津", value: ["0"] },
{ name: "上海", value: ["0"] },
{ name: "重庆", value: ["0"] },
{ name: "广西", value: ["0"] },
{ name: "香港", value: ["0"] },
{ name: "澳门", value: ["0"] },
],
geoCoordMap: {
甘肃: [104.35851932200904, 34.40123159456249],
青海: [98.77753991113792, 36.53004669909589],
广西: [108.99655439706783, 24.235673935703687],
贵州: [107.25837527859625, 28.005908922458815],
重庆: [108.09396202962392, 30.737597968171656],
北京: [115.95679568867022, 40.75702627244448],
福建: [117.7802840500002, 26.617417710000097],
安徽: [117.02978356256133, 33.13288035704295],
广东: [113.08982181100027, 24.09589264500019],
西藏: [88.67781334810746, 30.081958115774455],
新疆: [85.36633990098284, 42.722922619141826],
海南: [109.68506920700003, 19.75330638200004],
宁夏: [106.15764611237813, 37.05293528913229],
陕西: [108.51004520082531, 35.88519318281914],
山西: [111.72104861939818, 36.35586904611952],
湖北: [111.37402265791923, 31.417539985382007],
湖南: [110.902381220417, 28.066339830418826],
四川: [102.4985530948494, 31.67739736629541],
云南: [100.29696333219198, 25.721744899807277],
河北: [114.54873628100008, 38.34465116700004],
河南: [114.06032230023388, 33.15787079530108],
辽宁: [121.85254967500032, 41.98240794500012],
山东: [119.28029535679576, 36.576608741968954],
天津: [118.75956331411487, 39.81855181203543],
江西: [115.17473025869447, 27.007869370774904],
江苏: [120.34094130672383, 34.49093327643905],
上海: [121.14094130672383, 31.42093327643905],
浙江: [119.58535242000021, 29.90194563100012],
吉林: [123.25284846284336, 45.56916859112878],
内蒙古: [108.41327478505161, 40.317334824121446],
黑龙江: [127.05284846284336, 47.56916859112878],
台湾: [120.63599694100014, 23.222805080000114],
香港: [114.0517684250002, 22.32851797100014],
澳门: [111.95860436300031, 21.8],
},
option: {
// 地理坐标组件
geo: {
map: "china",
roam: false, // 是否支持滚轮缩放
left: "0%",
top: "0%",
label: {
show: true,
position: "left",
},
itemStyle: {
normal: {
// 未选中状态
color: "#d8e5f0",
shadowColor: "#d4dfe9",
borderColor: "#ffffff",
borderWidth: 1,
shadowBlur: 1,
// shadowOffsetX: -5,
// shadowOffsetY: 10,
},
emphasis: {
// 选中样式
color: "rgba(0,0,0,0.7)", // 地图颜色
borderColor: "rgba(0, 0, 0, 0.7)", // 边框颜色
},
},
},
animation: false,
series: [
{
type: "scatter",
roam: false,
zoom: 1,
coordinateSystem: "geo",
data: null,
symbol: function (params) {
if (params[2] === "0") {
return "image://" + process.env.BASE_URL + "map/1.svg";
} else if (params[2] === "1") {
return "image://" + process.env.BASE_URL + "map/3.svg";
}
}, // svg图标
z: 2,
symbolSize: [48.63, 40], // symbols图标大小
},
// 地图类型
{
type: "map",
map: "china",
left: "0%",
top: "0%",
zoom: 1,
geoIndex: 1,
aspectScale: 0.75, // 长宽比
roam: false,
z: 0,
itemStyle: {
normal: {
color: "#000000",
areaColor: "#d9e6f0",
borderColor: "#ffffff",
borderWidth: 0.7,
},
emphasis: {
// 选中样式
areaColor: "#d9e6f0", // 地图背景颜色
},
},
// 选中状态
select: {
itemStyle: {
color: "#d9e6f0",
borderColor: "#ffffff",
},
},
label: {
show: true,
position: "right",
},
},
// 浮点图类型
{
type: "scatter",
roam: false,
zoom: 1,
coordinateSystem: "geo",
data: null,
symbol: "image://" + process.env.BASE_URL + "map/2.svg",
emphasis: {
scale: false,
},
z: 1,
symbolSize: [100, 50], // symbols图标大小
},
],
},
};
},
2.3 created() 我们要给option.series[0].data 赋值，如果你把值写在series[0].data中可以忽略
created() {
this.option.series[0].data = this.convertData(this.chinaData);
console.log(this.option.series[0].data)
},
mounted() {
this.echart();
},
2.4 methods: 函数
记得注意this指针会变化，因为我们使用的是function来构建函数，你们也可以换成箭头函数就不会有这方面问题，大家记得注意，convertData（）函数是把this.chinaData 和this.geoCoordMap 合并数组
var _this = this;给this 赋值
事件api 可以参考官方文档的api ，超级详细，如果不知道自己要的属性是什么可以，console.log打印出来就可以看到了，对这自己的需求自行调整
methods: {
// 地图
echart() {
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
this.myChart = myChart;
// myChart.setOption(mapOption)
var _this = this;
var option = this.option;
myChart.showLoading();
myChart.hideLoading();
// 图表点击事件
myChart.on("click", function (event) {
_this.chinavalue = _this.value = event.name;
console.log(event)
if (event.componentSubType === "scatter") {
option.series[0].data = _this.convertData(
_this.changeitems(event.name)
);
myChart.setOption(_this.option);
}
});
//图表悬停事件
myChart.on("mouseover", function (event) {
// _this.value = event.name
if (
event.componentSubType === "map" ||
event.componentType === "series"
) {
option.series[0].data = _this.convertData(
_this.changemoveitems(event.name)
);
myChart.setOption(_this.option);
}
});
//图表离开事件
myChart.on("mouseout", function (event) {
if (event.componentType === "series") {
option.series[0].data = _this.convertData(
_this.changeoutitems(event.name)
);
myChart.setOption(_this.option);
}
});
usa(china);
function usa(usaJson) {
myChart.hideLoading();
echarts.registerMap("china", usaJson, {
南海诸岛: {
left: 115,
top: 15,
width: 6,
},
});
option && myChart.setOption(option);
}
},
// 点击修改图标
changeitems(index) {
this.chinavalue = index;
this.chinaData.forEach((item) => {
const name = item.name;
if (name === index) {
item.value[0] = "1";
} else {
item.value[0] = "0";
}
});
return this.chinaData;
},
// 鼠标移动上修改图标
changemoveitems(index) {
this.chinaData.forEach((item) => {
const name = item.name;
if (name === index || name === this.chinavalue) {
item.value[0] = "1";
} else {
item.value[0] = "0";
}
});
return this.chinaData;
},
// 鼠标移走恢复图标
changeoutitems() {
this.chinaData.forEach((item) => {
const name = item.name;
if (name === this.chinavalue) {
item.value[0] = "1";
} else {
item.value[0] = "0";
}
});
return this.chinaData;
},
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
},
},以上就是vue 中使用echarts修改图标的方法，我使用的是通过改变chinaData中的value来改变图标，大家一开始如果比较懵，可以根据步骤，看着官方文档一步一步来，echarts官方文档写的超级详细，属性在配置项，事件在api 中。
在官方那个例子里面，我们点击完整代码可以看到js 完整的代码
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
8
0- 0
已为社区贡献1条内容
所有评论(0)