echarts地圖區(qū)域顯示不同顏色代碼示例
更新時(shí)間：2023年10月28日 16:24:00 作者：開(kāi)心就好1314520
地圖在我們?nèi)粘５臄?shù)據(jù)可視化分析中是很常見(jiàn)的一種展示手段,不僅美觀而且很大氣,這篇文章主要給大家介紹了關(guān)于echarts地圖區(qū)域顯示不同顏色的相關(guān)資料,需要的朋友可以參考下
<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: {}, // 所獲取的省份的地圖矢量數(shù)據(jù)
dataList:[
{name: '廬陽(yáng)區(qū)', value: 101},
{name: '肥東縣', value: 101},
{name: '濉溪縣', value: 101},
{name: '埇橋區(qū)', value: 18},
{name: '蕭縣', value: 101},
{name: '蚌山區(qū)', value: 101},
{name: '潁泉區(qū)', value: 101},
{name: '臨泉縣', value: 101},
{name: '太和縣', value: 101},
{name: '舒城縣', value: 101},
{name: '當(dāng)涂縣', value: 101},
{name: '南陵縣', value: 101},
{name: '宣州區(qū)', value: 101},
{name: '郎溪縣', value: 101},
{name: '廣德市', value: 101},
{name: '涇縣', value: 101},
{name: '休寧縣', value: 101},
],
nameStr:'廬陽(yáng)區(qū)肥東縣濉溪縣埇橋區(qū)蕭縣蚌山區(qū)潁泉區(qū)臨泉縣太和縣舒城縣當(dāng)涂縣南陵縣宣州區(qū)郎溪縣廣德市涇縣休寧縣'
};
},
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);
// 獲取中國(guó)地圖的矢量數(shù)據(jù)
// http://localhost:8999/static/map/china.json
// 由于我們現(xiàn)在獲取的地圖矢量數(shù)據(jù)并不是位于KOA2的后臺(tái), 所以咱們不能使用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: "土葬區(qū)",
// color: "red",
// }, {
// gte: 100,
// lt: 1000,
// label: "土葬區(qū)",
// color: "#ff3990",
// },
// {
// gt: 1000,
// lt: 10000,
// label: "智慧殯葬",
// color: "#f2d5ad"
// }],
// show: false
// },
geo: {
// type: "map",
map: "anhui",
// 默認(rèn)設(shè)置完地圖是固定死的不能拖動(dòng)
// roam:true,//否開(kāi)啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開(kāi)啟。
roam: 1,
//zoom :1,//當(dāng)前視角的縮放比例。越大比例越大
// center:[108.956239,34.268309],//當(dāng)前視角的中心點(diǎn)，用經(jīng)緯度表示108.956239,34.268309
// label:{//地圖上顯示文字提示信息
// show:true,
// // color:"#ff6600",
// fontSize:10//字體大小
// },
label: {
normal: {
// formatter:(params)=>{
// console.log(params,'747')
// // if(params.name=="廬陽(yáng)區(qū)"||params.name=="肥東縣"||params.name=="濉溪縣"||params.name=="埇橋區(qū)"||params.name=="蕭縣"||params.name=="蚌山區(qū)"||params.name=="潁泉區(qū)"||params.name=="臨泉縣"||params.name=="太和縣"||params.name=="舒城縣"||params.name=="當(dāng)涂縣"||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:{//地圖區(qū)域的多邊形 圖形樣式。
// areaColor:"#ff6600"http://地圖區(qū)域的顏色。
// }
// 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 得到所點(diǎn)擊的省份, 這個(gè)省份他是中文
});
},
},
};
</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: {}, // 所獲取的省份的地圖矢量數(shù)據(jù)
dataList:[
{name: '金寨縣', value: 18},
{name: '岳西縣', value: 18},
{name: '旌德縣', value: 18},
{name: '績(jī)溪縣', value: 18},
{name: '休寧縣', value: 18},
{name: '歙縣', value: 18},
{name: '黟縣', value: 18},
{name: '祁門(mén)縣', value: 18},
{name: '石臺(tái)縣', value: 18},
{name: '青陽(yáng)縣', value: 18},
{name: '東至縣', value: 18},
{name: '黃山區(qū)', value: 18},
],
names:['東至縣','黃山區(qū)','金寨縣','岳西縣','旌德縣','績(jī)溪縣','休寧縣','歙縣','黟縣','祁門(mén)縣','石臺(tái)縣','青陽(yáng)縣',]
};
},
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);
// 獲取中國(guó)地圖的矢量數(shù)據(jù)
// http://localhost:8999/static/map/china.json
// 由于我們現(xiàn)在獲取的地圖矢量數(shù)據(jù)并不是位于KOA2的后臺(tái), 所以咱們不能使用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: "土葬區(qū)",
color: "#ff3940",
}, {
gt: 100,
lt: 1000,
label: "智慧殯葬",
color: "#f2d5ad"
}],
show: false
},
geo: {
// type: "map",
map: "anhui",
// 默認(rèn)設(shè)置完地圖是固定死的不能拖動(dòng)
// roam:true,//否開(kāi)啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開(kāi)啟。
roam: 1,
//zoom :1,//當(dāng)前視角的縮放比例。越大比例越大
// center:[108.956239,34.268309],//當(dāng)前視角的中心點(diǎn)，用經(jīng)緯度表示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=="績(jī)溪縣"||params.name=="休寧縣"||params.name=="歙縣"||params.name=="黟縣"||params.name=="祁門(mén)縣"||params.name=="石臺(tái)縣"||params.name=="青陽(yáng)縣"||params.name=="東至縣"||params.name=="黃山區(qū)"){
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:{//地圖區(qū)域的多邊形 圖形樣式。
// areaColor:"#ff6600"http://地圖區(qū)域的顏色。
// }
// 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 得到所點(diǎn)擊的省份, 這個(gè)省份他是中文
});
},
},
};
</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: {}, // 所獲取的省份的地圖矢量數(shù)據(jù)
dataList:[
{name: '廬陽(yáng)區(qū)', value: 101},
{name: '肥東縣', value: 101},
{name: '濉溪縣', value: 101},
{name: '埇橋區(qū)', value: 18},
{name: '蕭縣', value: 101},
{name: '蚌山區(qū)', value: 101},
{name: '潁泉區(qū)', value: 101},
{name: '臨泉縣', value: 101},
{name: '太和縣', value: 101},
{name: '舒城縣', value: 101},
{name: '當(dāng)涂縣', value: 101},
{name: '南陵縣', value: 101},
{name: '宣州區(qū)', value: 101},
{name: '郎溪縣', value: 101},
{name: '廣德市', value: 101},
{name: '涇縣', value: 101},
{name: '休寧縣', value: 101},
],
nameStr:'廬陽(yáng)區(qū)肥東縣濉溪縣埇橋區(qū)蕭縣蚌山區(qū)潁泉區(qū)臨泉縣太和縣舒城縣當(dāng)涂縣南陵縣宣州區(qū)郎溪縣廣德市涇縣休寧縣'
};
},
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);
// 獲取中國(guó)地圖的矢量數(shù)據(jù)
// http://localhost:8999/static/map/china.json
// 由于我們現(xiàn)在獲取的地圖矢量數(shù)據(jù)并不是位于KOA2的后臺(tái), 所以咱們不能使用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: "土葬區(qū)",
color: "red",
}, {
gte: 100,
lt: 1000,
label: "土葬區(qū)",
color: "#ff3990",
},
{
gt: 1000,
lt: 10000,
label: "智慧殯葬",
color: "#f2d5ad"
}],
show: false
},
geo: {
// type: "map",
map: "anhui",
// 默認(rèn)設(shè)置完地圖是固定死的不能拖動(dòng)
// roam:true,//否開(kāi)啟鼠標(biāo)縮放和平移漫游。默認(rèn)不開(kāi)啟。
roam: 1,
//zoom :1,//當(dāng)前視角的縮放比例。越大比例越大
// center:[108.956239,34.268309],//當(dāng)前視角的中心點(diǎn)，用經(jīng)緯度表示108.956239,34.268309
// label:{//地圖上顯示文字提示信息
// show:true,
// // color:"#ff6600",
// fontSize:10//字體大小
// },
label: {
normal: {
formatter:(params)=>{
console.log(params,'747')
// if(params.name=="廬陽(yáng)區(qū)"||params.name=="肥東縣"||params.name=="濉溪縣"||params.name=="埇橋區(qū)"||params.name=="蕭縣"||params.name=="蚌山區(qū)"||params.name=="潁泉區(qū)"||params.name=="臨泉縣"||params.name=="太和縣"||params.name=="舒城縣"||params.name=="當(dāng)涂縣"||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:{//地圖區(qū)域的多邊形 圖形樣式。
// areaColor:"#ff6600"http://地圖區(qū)域的顏色。
// }
// 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 得到所點(diǎn)擊的省份, 這個(gè)省份他是中文
});
},
},
};
</script>
<style scoped>
.map {
width: 100%;
height: 100%;
}
.map_chart {
width: 600px;
height: 800px;
margin:0 auto;
}
</style>總結(jié)
到此這篇關(guān)于echarts地圖區(qū)域顯示不同顏色的文章就介紹到這了,更多相關(guān)echarts地圖顯示不同顏色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Underscore.js 的模板功能介紹與應(yīng)用
Underscore是一個(gè)非常實(shí)用的JavaScript庫(kù)，提供許多編程時(shí)需要的功能的支持，他在不擴(kuò)展任何JavaScript的原生對(duì)象的情況下提供很多實(shí)用的功能,需要了解的朋友可以詳細(xì)參考下2012-12-12
js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇js 單引號(hào)替換成雙引號(hào),雙引號(hào)替換成單引號(hào)的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
微信小程序如何根據(jù)不同用戶切換不同TabBar(簡(jiǎn)單易懂!)
小程序中我們可能需要根據(jù)不同的權(quán)限展示不同的tabbar,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何根據(jù)不同用戶切換不同TabBar的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
利用遞增的數(shù)字返回循環(huán)漸變的顏色的js代碼
其實(shí)很久前就想寫(xiě)一個(gè)這樣的函數(shù)了。因?yàn)楹芏鄷r(shí)候需要利用遞增數(shù)字返回一個(gè)漸變顏色序列，今天終于完成了。2008-10-10
使用iconfont字體圖標(biāo)可以隨意改變大小,避免圖片放大失真問(wèn)題,但是值得注意,修改字體圖標(biāo)大小的時(shí)候使用font-size屬性,并且顏色可隨意更改,本文給大家介紹iconfont的N種使用方法,感興趣的朋友一起看看吧2024-01-01
用js模擬struts2的多action調(diào)用示例
這篇文章主要介紹了用js模擬struts2的多action調(diào)用的實(shí)現(xiàn)過(guò)程，需要的朋友可以參考下2014-05-05
這篇文章主要給大家介紹了如何通過(guò)一篇文章快速?gòu)牧憧焖偕鲜諶ollup的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
大家都知道要想讓 JavaScript 對(duì)用戶的操作作出響應(yīng)，首先要對(duì) DOM 元素綁定事件處理函數(shù)。所謂事件處理函數(shù)，就是處理用戶操作的函數(shù)，不同的操作對(duì)應(yīng)不同的名稱。下面這篇文章給大家詳細(xì)介紹了JavaScript中綁定事件的三種方式以及去除綁定的方法，有需要來(lái)一起看看吧。2016-11-11
在現(xiàn)代Web開(kāi)發(fā)中，JavaScript已經(jīng)成為無(wú)法替代的核心技術(shù)，在現(xiàn)代Web開(kāi)發(fā)中，JavaScript已經(jīng)成為無(wú)法替代的核心技術(shù)，本文將通過(guò)代碼示例詳細(xì)介紹一些實(shí)踐解決方案，感興趣的同學(xué)可以參考下2023-06-06