echarts地图区域显示不同颜色代码示例
更新时间：2023年10月28日 16:24:00 作者：开心就好1314520
地图在我们日常的数据可视化分析中是很常见的一种展示手段,不仅美观而且很大气,这篇文章主要给大家介绍了关于echarts地图区域显示不同颜色的相关资料,需要的朋友可以参考下
<template>
<div class="map">
<div class="map_chart" ref="map_chart"></div>
</div>
</template>
<script>
import axios from "axios";
import {mapData} from '../utils/map'
export default {
name: "Map",
data() {
return {
chartInstance: null,
allData: null,
mapData: {}, // 所获取的省份的地图矢量数据
dataList:[
{name: '庐阳区', value: 101},
{name: '肥东县', value: 101},
{name: '濉溪县', value: 101},
{name: '埇桥区', value: 18},
{name: '萧县', value: 101},
{name: '蚌山区', value: 101},
{name: '颍泉区', value: 101},
{name: '临泉县', value: 101},
{name: '太和县', value: 101},
{name: '舒城县', value: 101},
{name: '当涂县', value: 101},
{name: '南陵县', value: 101},
{name: '宣州区', value: 101},
{name: '郎溪县', value: 101},
{name: '广德市', value: 101},
{name: '泾县', value: 101},
{name: '休宁县', value: 101},
],
nameStr:'庐阳区肥东县濉溪县埇桥区萧县蚌山区颍泉区临泉县太和县舒城县当涂县南陵县宣州区郎溪县广德市泾县休宁县'
};
},
created() {},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
async initChart() {
this.chartInstance = this.$echarts.init(this.$refs.map_chart);
// 获取中国地图的矢量数据
// http://localhost:8999/static/map/china.json
// 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
this.$echarts.registerMap("anhui", mapData);
const initOption = {
// title: {
// text: "▎ 公墓分布",
// left: 20,
// top: 20,
// },
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true
}
}
}, // 提供下载工具
// visualMap: {
// min: 0,
// max: 100000,
// left: 26,
// bottom: 40,
// showLabel: !0,
// // text: ["土葬", "智慧殡葬"],
// pieces: [{
// gte: 1,
// lt: 100,
// label: "土葬区",
// color: "red",
// }, {
// gte: 100,
// lt: 1000,
// label: "土葬区",
// color: "#ff3990",
// },
// {
// gt: 1000,
// lt: 10000,
// label: "智慧殡葬",
// color: "#f2d5ad"
// }],
// show: false
// },
geo: {
// type: "map",
map: "anhui",
// 默认设置完地图是固定死的不能拖动
// roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
roam: 1,
//zoom :1,//当前视角的缩放比例。越大比例越大
// center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
// label:{//地图上显示文字提示信息
// show:true,
// // color:"#ff6600",
// fontSize:10//字体大小
// },
label: {
normal: {
// formatter:(params)=>{
// console.log(params,'747')
// // if(params.name=="庐阳区"||params.name=="肥东县"||params.name=="濉溪县"||params.name=="埇桥区"||params.name=="萧县"||params.name=="蚌山区"||params.name=="颍泉区"||params.name=="临泉县"||params.name=="太和县"||params.name=="舒城县"||params.name=="当涂县"||params.name=="南陵县"){
// // return params.name
// // }else{
// // return ''
// // }
// if(this.nameStr.includes(params.name)){
// return params.name
// }else{
// return ''
// }
// },
show: !0,
fontSize: "7",
color: "#000"
}
},
itemStyle: {
normal: {
areaColor: "#f2d5ad",
// areaColor: "#ff3940",
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#ff6600",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
// itemStyle:{//地图区域的多边形 图形样式。
// areaColor:"#ff6600"//地图区域的颜色。
// }
// label: {
// show: true,
// color: "#1DE9B6",
// },
},
// legend: {
// left: '5%',
// bottom: '5%',
// orient: 'vertical'
// },
series:[
{
name: "殡葬",
type: "map",
geoIndex: 0,
data: this.dataList
}
]
};
this.chartInstance.setOption(initOption);
this.chartInstance.on("click", async (arg) => {
// arg.name 得到所点击的省份, 这个省份他是中文
});
},
},
};
</script>
<style scoped>
.map {
width: 100%;
height: 100%;
}
.map_chart {
width: 600px;
height: 800px;
margin:0 auto;
}
</style>
<template>
<div class="map">
<div class="map_chart" ref="map_chart"></div>
</div>
</template>
<script>
import axios from "axios";
import {mapData} from '../utils/map'
export default {
name: "Map",
data() {
return {
chartInstance: null,
allData: null,
mapData: {}, // 所获取的省份的地图矢量数据
dataList:[
{name: '金寨县', value: 18},
{name: '岳西县', value: 18},
{name: '旌德县', value: 18},
{name: '绩溪县', value: 18},
{name: '休宁县', value: 18},
{name: '歙县', value: 18},
{name: '黟县', value: 18},
{name: '祁门县', value: 18},
{name: '石台县', value: 18},
{name: '青阳县', value: 18},
{name: '东至县', value: 18},
{name: '黄山区', value: 18},
],
names:['东至县','黄山区','金寨县','岳西县','旌德县','绩溪县','休宁县','歙县','黟县','祁门县','石台县','青阳县',]
};
},
created() {},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
async initChart() {
this.chartInstance = this.$echarts.init(this.$refs.map_chart);
// 获取中国地图的矢量数据
// http://localhost:8999/static/map/china.json
// 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
this.$echarts.registerMap("anhui", mapData);
const initOption = {
// title: {
// text: "▎ 公墓分布",
// left: 20,
// top: 20,
// },
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true
}
}
}, // 提供下载工具
visualMap: {
min: 0,
max: 100000,
left: 26,
bottom: 40,
showLabel: !0,
// text: ["土葬", "智慧殡葬"],
pieces: [{
gte: 1,
lt: 100,
label: "土葬区",
color: "#ff3940",
}, {
gt: 100,
lt: 1000,
label: "智慧殡葬",
color: "#f2d5ad"
}],
show: false
},
geo: {
// type: "map",
map: "anhui",
// 默认设置完地图是固定死的不能拖动
// roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
roam: 1,
//zoom :1,//当前视角的缩放比例。越大比例越大
// center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
// label:{//地图上显示文字提示信息
// show:true,
// // color:"#ff6600",
// fontSize:10//字体大小
// },
label: {
normal: {
formatter:(params)=>{
console.log(params,'747')
if(params.name=="金寨县"||params.name=="岳西县"||params.name=="旌德县"||params.name=="绩溪县"||params.name=="休宁县"||params.name=="歙县"||params.name=="黟县"||params.name=="祁门县"||params.name=="石台县"||params.name=="青阳县"||params.name=="东至县"||params.name=="黄山区"){
return params.name
}else{
return ''
}
},
show: !0,
fontSize: "11",
color: "#000"
}
},
itemStyle: {
normal: {
areaColor: "#f2d5ad",
// areaColor: "#ff3940",
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#ff6600",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
// itemStyle:{//地图区域的多边形 图形样式。
// areaColor:"#ff6600"//地图区域的颜色。
// }
// label: {
// show: true,
// color: "#1DE9B6",
// },
},
// legend: {
// left: '5%',
// bottom: '5%',
// orient: 'vertical'
// },
series:[
{
name: "殡葬",
type: "map",
geoIndex: 0,
data: this.dataList
}
]
};
this.chartInstance.setOption(initOption);
this.chartInstance.on("click", async (arg) => {
// arg.name 得到所点击的省份, 这个省份他是中文
});
},
},
};
</script>
<style scoped>
.map {
width: 100%;
height: 100%;
}
.map_chart {
width: 600px;
height: 800px;
margin:0 auto;
}
</style>
<template>
<div class="map">
<div class="map_chart" ref="map_chart"></div>
</div>
</template>
<script>
import axios from "axios";
import {mapData} from '../utils/map'
export default {
name: "Map",
data() {
return {
chartInstance: null,
allData: null,
mapData: {}, // 所获取的省份的地图矢量数据
dataList:[
{name: '庐阳区', value: 101},
{name: '肥东县', value: 101},
{name: '濉溪县', value: 101},
{name: '埇桥区', value: 18},
{name: '萧县', value: 101},
{name: '蚌山区', value: 101},
{name: '颍泉区', value: 101},
{name: '临泉县', value: 101},
{name: '太和县', value: 101},
{name: '舒城县', value: 101},
{name: '当涂县', value: 101},
{name: '南陵县', value: 101},
{name: '宣州区', value: 101},
{name: '郎溪县', value: 101},
{name: '广德市', value: 101},
{name: '泾县', value: 101},
{name: '休宁县', value: 101},
],
nameStr:'庐阳区肥东县濉溪县埇桥区萧县蚌山区颍泉区临泉县太和县舒城县当涂县南陵县宣州区郎溪县广德市泾县休宁县'
};
},
created() {},
mounted() {
this.initChart();
window.addEventListener("resize", this.screenAdapter);
},
destroyed() {
window.removeEventListener("resize", this.screenAdapter);
},
methods: {
async initChart() {
this.chartInstance = this.$echarts.init(this.$refs.map_chart);
// 获取中国地图的矢量数据
// http://localhost:8999/static/map/china.json
// 由于我们现在获取的地图矢量数据并不是位于KOA2的后台, 所以咱们不能使用this.$http
this.$echarts.registerMap("anhui", mapData);
const initOption = {
// title: {
// text: "▎ 公墓分布",
// left: 20,
// top: 20,
// },
toolbox: {
show: true,
feature: {
saveAsImage: {
show:true
}
}
}, // 提供下载工具
visualMap: {
min: 0,
max: 100000,
left: 26,
bottom: 40,
showLabel: !0,
// text: ["土葬", "智慧殡葬"],
pieces: [{
gte: 1,
lt: 100,
label: "土葬区",
color: "red",
}, {
gte: 100,
lt: 1000,
label: "土葬区",
color: "#ff3990",
},
{
gt: 1000,
lt: 10000,
label: "智慧殡葬",
color: "#f2d5ad"
}],
show: false
},
geo: {
// type: "map",
map: "anhui",
// 默认设置完地图是固定死的不能拖动
// roam:true,//否开启鼠标缩放和平移漫游。默认不开启。
roam: 1,
//zoom :1,//当前视角的缩放比例。越大比例越大
// center:[108.956239,34.268309],//当前视角的中心点，用经纬度表示108.956239,34.268309
// label:{//地图上显示文字提示信息
// show:true,
// // color:"#ff6600",
// fontSize:10//字体大小
// },
label: {
normal: {
formatter:(params)=>{
console.log(params,'747')
// if(params.name=="庐阳区"||params.name=="肥东县"||params.name=="濉溪县"||params.name=="埇桥区"||params.name=="萧县"||params.name=="蚌山区"||params.name=="颍泉区"||params.name=="临泉县"||params.name=="太和县"||params.name=="舒城县"||params.name=="当涂县"||params.name=="南陵县"){
// return params.name
// }else{
// return ''
// }
if(this.nameStr.includes(params.name)){
return params.name
}else{
return ''
}
},
show: !0,
fontSize: "11",
color: "#000"
}
},
itemStyle: {
normal: {
areaColor: "#f2d5ad",
// areaColor: "#ff3940",
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)"
},
emphasis: {
areaColor: "#ff6600",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0
}
}
// itemStyle:{//地图区域的多边形 图形样式。
// areaColor:"#ff6600"//地图区域的颜色。
// }
// label: {
// show: true,
// color: "#1DE9B6",
// },
},
// legend: {
// left: '5%',
// bottom: '5%',
// orient: 'vertical'
// },
series:[
{
name: "殡葬",
type: "map",
geoIndex: 0,
data: this.dataList
}
]
};
this.chartInstance.setOption(initOption);
this.chartInstance.on("click", async (arg) => {
// arg.name 得到所点击的省份, 这个省份他是中文
});
},
},
};
</script>
<style scoped>
.map {
width: 100%;
height: 100%;
}
.map_chart {
width: 600px;
height: 800px;
margin:0 auto;
}
</style>总结
到此这篇关于echarts地图区域显示不同颜色的文章就介绍到这了,更多相关echarts地图显示不同颜色内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Underscore是一个非常实用的JavaScript库，提供许多编程时需要的功能的支持，他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下2012-12-12
下面小编就为大家带来一篇js 单引号替换成双引号,双引号替换成单引号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
微信小程序如何根据不同用户切换不同TabBar(简单易懂!)
小程序中我们可能需要根据不同的权限展示不同的tabbar,下面这篇文章主要给大家介绍了关于微信小程序如何根据不同用户切换不同TabBar的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
这篇文章主要为大家详细介绍了js实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
其实很久前就想写一个这样的函数了。因为很多时候需要利用递增数字返回一个渐变颜色序列，今天终于完成了。2008-10-10
使用iconfont字体图标可以随意改变大小,避免图片放大失真问题,但是值得注意,修改字体图标大小的时候使用font-size属性,并且颜色可随意更改,本文给大家介绍iconfont的N种使用方法,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了用js模拟struts2的多action调用的实现过程，需要的朋友可以参考下2014-05-05
这篇文章主要给大家介绍了如何通过一篇文章快速从零快速上手Rollup的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
大家都知道要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。下面这篇文章给大家详细介绍了JavaScript中绑定事件的三种方式以及去除绑定的方法，有需要来一起看看吧。2016-11-11
在现代Web开发中，JavaScript已经成为无法替代的核心技术，在现代Web开发中，JavaScript已经成为无法替代的核心技术，本文将通过代码示例详细介绍一些实践解决方案，感兴趣的同学可以参考下2023-06-06
最新评论