那今天，我们来说一波可视化。嗯，就先说echarts地图吧。在echarts的官网上，有各种各样的echarts地图，挑花眼了是小事，找不到那可是大事。皇天不负有心人啊~~~在一个个地图的摸索中，终于悟出了一条通往罗马的道路。nice!
感觉有用就点个赞吧,给我一波小动力~~~
话不多说，来波代码感受一下~~~这是一个可以绘制任何地图的万能模板。只要有json文件，那一切都小意思啦
1、样例
that.chart0 = this.$echarts.init(document.getElementById("map"));
that.$echarts.registerMap("城市名称", require("需要引入的json文件"));
$.ajax({
cache: false,
type: "get",
success: function(data) {
window.dataList = [];
let option0 = {
layoutCenter: ["50%", "43%"], //距离左右，上下距离的百分比
layoutSize: "68%", //map百分比大小
tooltip: { //map标题
triggerOn: "click",
formatter: function(e, t, n) {
return 0.5 == e.value
? e.name + "：有疑似病例"
: e.seriesName + "<br />" + e.name + "：" + e.value;
}
},
visualMap: { //视觉映射组件
min: 0,
max: 1000,
left: 36,
bottom: 240,
showLabel: !0,
//text: ["高", "低"],
textStyle:{
color:"rgb(58,227,228)"
},
pieces: [ //用于鉴别数据的高低风险，以及地图区域的颜色
{
gt: 100, //大于
label: "高风险",
color: "rgb(175,51,55)"
},
{
gte: 50,
lte: 100, //小于
label: "较高风险",
color: "rgb(194,121,48)"
},
{
gte: 20,
lt: 50,
label: "中风险",
color: "rgb(214,195,61)"
},
{
gt: 5,
lt: 10,
label: "较低风险",
color: "rgb(35,115,167)"
},
{
gt: 0,
lt: 5,
label: "低风险",
color: "rgb(34,150,128)"
}
],
show: !0
},
geo: {
map: "城市名称",
roam: !1,
scaleLimit: {
min: 1,
max: 2
},
zoom: 1.23,
top: 120,
label: { //在map中显示各区域的名称
normal: {
show: !0,
fontSize: "14",
color: "#fff"
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)"
},
show: true, // 是否显示对应地名
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
},
series: [
{
name: "确诊病例",
type: "map",
geoIndex: 0,
data: window.dataList
}
]
};
that.chart0.setOption(option0);
}
});
总结：这段代码的前两句是精髓，你需要获取创建地图的json数据以及dom，通过registerMap获取地图json数据。此外，geo中的map要和registerMap的城市名称对应。
噔噔噔噔~~~模板就是上一段的代码，可以说能解决大部分的问题，第二行代码改一下名称和json文件，就可以直接用了
2、配置
series: [
{
map: "chinaMapOutline", //用来设置地图外边框
silent: true,
type: "map",
zoom:1, //控制地图在页面中的大小
label: {
normal: {
show: false,
textStyle: {
color: "#fff",
},
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
top: "14%",
roam: false,
itemStyle: {
normal: {
areaColor: "rgba(0,255,255,.02)",
borderColor: "#00ffff",
borderWidth: 1.5,
shadowColor: "#00ffff",
shadowOffsetX: 0,
shadowOffsetY: 4,
shadowBlur: 10,
},
emphasis: {
areaColor: "transparent", //悬浮背景
textStyle: {
color: "#fff",
},
},
},
},
{
map: "chinaMap", //地图内部区域颜色渐变
type: "map",
zoom: 1,
label: {
normal: {
show: true,
textStyle: {
color: "#D4EEFF",
},
},
emphasis: {
textStyle: {
color: "#fff",
},
},
},
top: "14%",
tooltip: {
show: true,
},
roam: false,
//地图区域渐变颜色
itemStyle: {
normal: {
//areaColor: "transparent",
borderColor: "rgba(0,255,255,.1)",
borderWidth: 1,
areaColor: {
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#073684", // 0% 处的颜色
},
{
offset: 1,
color: "#061E3D", // 100% 处的颜色
},
],
},
},
//鼠标滑动地图变色
emphasis: {
areaColor: "rgba(0,255,255,.1)",
textStyle: {
color: "red",
},
},
},
data: this.dataList, //地图数据
},
],
3、地图数据
datav.aliyun.com/tools/atlas…
DataV有着你所需要的各种地图数据
4、获取地图json数据
this.$axios.get("../static/370200.json").then((res) => {
this.mapData = res.data; //地图数据
});
5、重绘
document.getElementById('e1').removeAttribute('_echarts_instance_');
this.init();
如果数据没有变化，只执行init函数，图表不会重新绘制，需要执行document.getElementById('e1').removeAttribute('_echarts_instance_');这一行代码，移除echarts_instance属性，如果没有此属性，地图就会进行重绘
感觉有用就点个赞吧,给我一波小动力~~~
