vue使用e-charts制作专题图（广西省为例）---第一篇
程序员文章站
2022-06-16 08:37:26
...
vue使用E-Charts制作专题图（广西省为例）---第一篇
写博客是为了做笔记
先给大家看一下效果图：
“专题图”顾名思义就是地图的每一部分根据一定的标准，展现出不一样颜色，使人们更直观的看出这个标准的变化的图。这个地图的颜色是因为从后台获取的数据的问题展示出现在这种颜色的。接下来，上干货：
第一步：获取e-charts以及在main.js中对其进行配置，详情见我上一篇文章或e-charts官网
第二步：创建容器
<template>
<div>
<!-- 我是地图 -->
<div id='theMap' ></div>
</div>
</template>
第三步：封装制作专题图方法
//array是鼠标放到专题图上展示的数据，是一个[[{},{}...],[]....地图长度]这样数据结构的数组
//title是专题图名称（虽然在上面的效果图中没有展示出来）
//adCode是我用来获取json的一个参数，如果小伙伴直接从本地获取，那就不用
map(array,title,adCode) {
// 基于准备好的dom，初始化echarts实例
var mapData=[]
var myChart = echarts.init(document.getElementById("theMap"));
//这里是仿axios获取地图的json数据，因为我做的项目需要很多的json,所以我这样写的，
//如果不需要很多的同学可以忽略这一步，直接var datas=获取的json数据
this.$axios({
//第三个参数在这里用到
url:'../../../static/json/'+adCode+'.json',
}).then(res=>{
//喏，获取到的json赋值给了datas
var datas = res.data;
//给这个json的地图取个名字，我的叫广西
echarts.registerMap('广西', datas);
mapData=datas
var nameColor = " rgb(55, 75, 113)";
var name_fontFamily = "宋体";
var name_fontSize = 60;
var data = [];
var geoCoordMap = {};
var toolTipData = [];
//获取地图数据
myChart.showLoading();
var mapF = mapData.features;
myChart.hideLoading();
mapF.forEach(function(v,k) {
// 地区名称
var name = v.properties.name;
var adcode=v.properties.adcode;
// 地区经纬度
geoCoordMap[name] = v.properties.center;
data.push({
name: name,
//因为专题图json数据中的adCode跟传进来的array中的adCode不一致，所以我在这里处理一下
adCode:adcode+"000000",
//地图颜色根据这个value变化,可以换成array中的数据
value: Math.round(Math.random() * 100 + 10)
});
//鼠标放上去显示的内容
toolTipData.push({
name: name,
value:array[k]
});
});
//-------------------------------------------↓
//这一堆是最后铺图层时用的，控制涟漪圆圈，还有气泡大小等
var max = 480,
min = 9; // todo
var maxSize4Pin = 50,
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 = {};
option = {
tooltip: {
trigger: "item",
//鼠标放到地图上的显示项
formatter: function(params) {
if (typeof params.value[2] == "undefined") {
var toolTiphtml = "";
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ":<br>";
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml +=
toolTipData[i].value[j].name +
":" +
toolTipData[i].value[j].value +
"<br>";
}
}
}
return toolTiphtml;
}
else {
var toolTiphtml = "";
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ":<br>";
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml +=
toolTipData[i].value[j].name +
":" +
toolTipData[i].value[j].value +
"<br>";
}
}
}
// console.log(toolTiphtml);
// console.log(convertData(data))
return toolTiphtml;
}
}
},
//喏，第二个参数title用在这里了
title:{
text:title+'专题图',
textStyle:{
fontSize:17,
color:'#aaa'
},
top:80,
left:90,
subtext:'我是副标题',
subtextStyle:{
fontSize:15
}
},
legend: {
orient: "vertical",
y: "bottom",
x: "right",
data: ["credit_pm2.5"],
textStyle: {
color: "#fff"
}
},
//图2左下角类似于刻度尺一样的东西
visualMap: {
show: true,
min: 0,
max: 100,
bottom:150,
left:90,
itemWidth:35,
text: ["高", "低"], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ["#99FFFF","#5599FF"] // 蓝绿
}
},
//工具按钮组
toolbox: {
show: false,
orient: "vertical",
left: "right",
top: "center",
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
//通过json中的数据将地图画出来，没有点，只有线，面（就像一个画布）
geo: {
show: true,
//这里广西就是之前咱们自己取的名字
map: '广西',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "#031525",
borderColor: "#097bba"
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
//series这个数组，就是一层一层的往地图上铺点
series: [
//第一层点：所有城市中心点
{
name: "散点",
type: "scatter",
coordinateSystem: "geo",
zoom:'1.3',
//通过哪些数据来铺点
data: convertData(data),
//用来控制铺上去的点的大小
symbolSize: function(val) {
// return val[2] / 10;
return 2;
},
//点对应的字的样式
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
textStyle:{
fontSize:14
}
},
emphasis: {
show: true
}
},
//点的样式
itemStyle: {
normal: {
color:"rgba(255,255,0)",
}
}
},
{
type: "map",
// map: mapName,
map: '广西',
zoom:'1.3',
geoIndex: 0,
name:'kkk',
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: true,
textStyle:{
fontSize:14
}
},
emphasis: {
show: true,
textStyle: {
color: "#fff"
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "#031525",
borderColor: "#3B5077"
},
emphasis: {
areaColor: "#2B91B7"
}
},
animation: false,
data: data
},
{
name: "问题 点",
type: "scatter",
coordinateSystem: "geo",
symbol: "pin", //气泡
data: convertData(data),
//用来控制铺上去的点的大小
symbolSize: function(val,params) {
// var a = (maxSize4Pin - minSize4Pin) / (max - min);
// var b = minSize4Pin - a * min;
// b = maxSize4Pin - a * max;
if(params.data.pro[2]>0&¶ms.data.pro[2]<=20){
return params.data.pro[2]+10;
}else if(params.data.pro[2]>20){
return params.data.pro[2];
}
},
label: {
normal: {
formatter: "{b}",
position: "right",
show: false,
textStyle:{
fontSize:14
},
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "rgba(255,0,0)" //标志颜色
}
},
zlevel: 6,
// data: convertData(data)
},
{
name: "正在巡河",
type: "effectScatter",
coordinateSystem: "geo",
zoom:'1.3',
//通过哪些数据来铺点
data: convertData(
data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)
),
symbolSize: function(val,params) {
if(val[2]>0&&val[2]<=20){
return val[2]+10;
}else if(val[2]>20){
return val[2]/10;
}
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
show: false,
textStyle:{
fontSize:14
}
}
},
itemStyle: {
normal: {
color: "rgba(0,255,0,0.8)",
shadowBlur: 10,
shadowColor: "green"
}
},
zlevel: 1
}
]
}
// 使用刚指定的配置项和数据显示图表。
myChart.clear();
myChart.setOption(option,true);
var that=this
myChart.off('click');
//专题图点击事件
myChart.on('click', function (params) {
console.log(params)
});
window.addEventListener("resize", function() {
myChart.resize();
});
}
//axios的catch
}).catch(err=>{
this.$message({
message: '暂无相关数据！',
type: 'warning'
});
})
},
第四步:获取专题图数据array，调用map方法
//获取专题图
getMap(adcode) {
this.$axios({
url:this.$apiUrl.themap.getAllByAd,
method:"get",
params:{
adCode:adcode
}
}).then(res=>{
if(res.data.code==2000){
this.map(res.data.data,'我是标题',adcode)
}
}).catch(err=>{})
},
mounted() {
//传入从cookie中获取的adCode
this.getMap(this.$adCode());//专题图
},
大部分内容都写在了代码片段里，有需要的可以好好看一下，下一篇内容记录专题图点击跳转到对应的专题图的问题。例：点击广西省专题图中的南宁市，跳转到南宁市的专题图。
有些写的不太清楚，请大家勿喷，一起交流，一起学习！