vue+echarts繪制省份地圖并添加自定義標(biāo)注方式
更新時間：2023年04月25日 09:26:30 作者：微笑的魚_
這篇文章主要介紹了vue+echarts繪制省份地圖并添加自定義標(biāo)注方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
echarts繪制省份地圖并添加自定義標(biāo)注
效果圖
在main.js中引入地圖
import echarts from 'echarts' Vue.prototype.$echarts = echarts;
省份是動態(tài)引入的，在.vue文件中
html部分
<div id="province_map_box"> <div id=province_map"></div> </div>
css部分
<style lang="scss" scoped>
#province_map_box {
height: 500px;
position: relative;
}
#province_map_box #province_map{
height: 100%;
}
#province_map_box .province_map_logo{
position: absolute;
top: 0;
left: 0;
width:45px;
}
</style>
<style lang="scss">
#province_map.tooltip_style{
line-height:1.7;
overflow: hidden;
}
#province_map.tooltip_left{
float: left;
}
#province_map.tooltip_right{
float: right;
}
</style>
script部分
data () {
return {
options: {
geo: {
map: "city",
scaleLimit: {
min: 1,
max: 2
},
zoom: 1,
top: 20,
label: {
normal: {
show:false,
fontSize: "14",
color: "rgba(0,0,0,0.7)"
},
emphasis: {
color: '#fff'
}
},
itemStyle: {
normal: {
borderColor: "rgba(0, 0, 0, 0.2)",
areaColor: "#3b9cff",//設(shè)置地圖區(qū)域背景色
},
emphasis: {
areaColor: "#3b9cff",
shadowOffsetX: 0,
shadowOffsetY: 0
}
}
},
series: [
{
name: '省份',
type: 'map',
geoIndex: 0,
map: 'province',
data:[]
},
{
name: '企業(yè)分布', //紅色標(biāo)注
type: 'custom',
coordinateSystem: 'geo',
clickable:true,
data:[]
}
]
}
},
cityJson: {
features: []
}
},
created(){
this.city = this.$route.query.city
},
mounted() {
this.$nextTick(()=>{
this.initEchartMap()
})
},
methods:{
//初始化中國地圖
initEchartMap() {
let mapDiv = document.getElementById('japan_map')
let myChart = this.$echarts.init(mapDiv)
let city = this.city
//動態(tài)引入省份json文件
this.cityJson = require(`echarts/map/json/province/${city}.json`)
this.$echarts.registerMap('city', this.cityJson, {})
this.setEchartOption()
myChart.setOption(this.options)
//可為自定義圖標(biāo)添加點擊事件
myChart.on('click', {element: 'aaa'}, (params) => {
// todo: 當(dāng) name 為 'aaa' 的圖形元素被點擊時，此回調(diào)被觸發(fā)。
});
},
//修改echart配制
setEchartOption(){
//紅色標(biāo)注點的坐標(biāo)
let markList = [
{ name: '五常', value: [123.523565,52.920114] },
{ name: '中治', value: [126.319954,46.400728] },
{ name: '中順', value: [133.310927,47.271857] },
{ name: '常也', value: [129.631468,45.65747] },
{ name: '可譚', value: [130.551333,47.321922] },
{ name: '順允', value: [125.436884,48.460261] },
]
this.options.series[1].data = markList
if(markList.length>0){
this.options.series[1].renderItem = function(params,api){
return {
type: 'image',
name: 'aaa',
style: {
image: require("@/assets/img/icon_mark.png"), //標(biāo)注點圖標(biāo)
width: 14,
height: 18,
x: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[0],
y: api.coord([markList[params.dataIndex].value[0], markList[params.dataIndex].value[1]])[1]
}
}
}
}
}
}
注： echarts v4.2.1版本安裝后會有地圖json文件
echarts添加地圖標(biāo)點（筆記）
如圖：
實例html：
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script> -->
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="E:\incubator-echarts-4.8.0\map\js\province\guangxi.js"></script>
<!-- <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script> -->
<!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var geoCoordMap = {
"南寧醫(yī)院":[108.324994,22.810701]
};
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push(geoCoord.concat(data[i].value).concat(data[i].name));
}
}
console.log(res);
return res;
};
option = {
backgroundColor: '#fff',
title: {
text: '廣西區(qū)合作醫(yī)院分布',
subtext: 'data from 數(shù)字廣潤',
sublink: 'http://gxgrtech.com.cn/',
left: 'center',
textStyle: {
color: '#000'
}
},
tooltip: {
trigger: 'item',
//formatter: "名稱:{a}<br />坐標(biāo):{c}"
formatter:function(params){
console.log(params);
console.log(params.data[3]);
var res = '名稱:'+params.data[3]+'<br/>';
return res;
}
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data:['醫(yī)院'],
textStyle: {
color: '#fff'
}
},
visualMap: {
min: 0,
max: 300,
splitNumber: 5,
color: ['#d94e5d','#eac736','#50a3ba'],
textStyle: {
color: '#fff'
},
dimension:3
},
geo: {
map: '廣西',
label: {
normal: {
show:true,
areaColor: '#ffefd5',
borderColor: '#111',
textStyle:{color:"#c71585"}
},
emphasis: {
show: false,
textStyle:{color:"#fff"}
}
},
itemStyle: {
normal: {
show:false,
areaColor: '#ffefd5',
borderColor: '#009fe8'
},
emphasis: {
show:false,
areaColor: '#f47920'
}
}
},
series: [
{
name: '醫(yī)院',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData([
{name: "南寧醫(yī)院", value: 9}
]),
encode: {
value: 2
},
symbolSize: 12,
label: {
normal: {
show: false,//顯示市區(qū)標(biāo)簽
textStyle:{color:"#c71585"}//省份標(biāo)簽字體顏色
},
emphasis: {//對應(yīng)的鼠標(biāo)懸浮效果
show: true, //關(guān)閉文字 （這東西有問題得關(guān)）
textStyle:{color:"#800080"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//區(qū)域邊框?qū)挾?
borderColor: '#009fe8',//區(qū)域邊框顏色
areaColor:"#ffefd5",//區(qū)域顏色
},
emphasis: {
show:true,
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#f47920",
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue下拉框回顯并默認(rèn)選中隨機(jī)問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
眾所周知：目前可視化大屏,視頻播放等常見功能都需要用到全屏,本文將使用兩種技術(shù)實現(xiàn)全屏功能的封裝,讓不同技術(shù)棧的同學(xué)都可以輕松掌握,好了,讓我們來實現(xiàn)一個既兼容性強又易于管理的全屏功能組件吧,需要的朋友可以參考下2024-08-08
組件是 vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用,所以組件間的相互通信是非常重要的,這篇文章主要給大家介紹了關(guān)于Vue組件之間的通信方式,需要的朋友可以參考下2022-06-06
這篇文章主要介紹了Vue中遍歷數(shù)組的新方法,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
眾所周知Axios是一個基于promise的HTTP庫,可以用在瀏覽器和 node.js中,下面這篇文章主要給大家介紹了關(guān)于vue2中使用axios及axios攔截器的配置的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置
這篇文章主要介紹了vue keep-alive列表頁緩存 詳情頁返回上一頁不刷新,定位到之前位置，本文通過實例代碼效果圖展示給大家介紹的非常詳細(xì),需要的朋友可以參考下2019-11-11
在工作中遇到N次input無法輸入的問題,所以下面這篇文章主要給大家介紹了關(guān)于vue?el-input輸入框輸入不了的解決方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
在項目開發(fā)中有時候需求需要手動實現(xiàn)橫屏功能,所以這篇文章主要為大家詳細(xì)介紹了如何使用Vue實現(xiàn)手機(jī)橫屏功能,需要的小伙伴可以參考一下2024-03-03
css文件可以直接引入到main.js中,scss文件如果沒有scss特殊語法也可以直接引入index.js,只有scss文件中的特殊語法全局引入的時候無法顯示,所以需要特殊處理,下面這篇文章主要給大家介紹了關(guān)于vue全局引入scss樣式文件的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了詳解vue如何添加babel?polyfill實現(xiàn)方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06