vue使用Echarts繪制地圖完整步驟
更新時(shí)間：2023年09月25日 09:38:26 作者：shmilynn_
這篇文章主要給大家介紹了關(guān)于vue使用Echarts繪制地圖的相關(guān)資料,Apache ECharts一個(gè)基于JavaScript的開源可視化圖表庫(kù),提供了常規(guī)的折線圖、柱狀圖、散點(diǎn)圖、餅圖、K線圖,用于統(tǒng)計(jì)的盒形圖,需要的朋友可以參考下
大致實(shí)現(xiàn)就是這個(gè)效果，鼠標(biāo)滑過的時(shí)候會(huì)顯示該區(qū)域的一個(gè)信息，加上自定義的顯示圖標(biāo)
有需要希望可以幫到各位
一、在vue中引入Echarts
這個(gè)可以看Echarts官方文檔，按照步驟一步一步來就可以了
//1.安裝Echarts
npm install echarts --save
//2.局部引入
import * as echarts from 'echarts';
//3. 基于準(zhǔn)備好的dom，初始化echarts實(shí)例，此處我們也可以通過ref來獲取dom
//通常我們封裝一個(gè)函數(shù)來獲取dom和繪制Echarts然后在mounted這個(gè)鉤子里去調(diào)用
var myChart = echarts.init(document.getElementById('main'));
//4. 繪制圖表
myChart.setOption({
});二、下載并引入china.json文件
因?yàn)槲覀兝L制的是中國(guó)地圖，所以需要到china.json的數(shù)據(jù),我們?cè)诮M件中引入并使用
有需要的可以上我的資源去免費(fèi)下載，
注意修改成自己的路徑，此處echarts和china.json必須全部正確引入
import geoJson from '@/utils/china.json'
import * as echarts from 'echarts';
echarts.registerMap('china', geoJson)三、準(zhǔn)備html容器、css中給圖表需要的寬高
這里用到了elementui的布局，需要的自行引入
這部分大家就按照自己需要的寬高去設(shè)定就可以了
<div class="managingPatientSize">
<el-row>
<el-col :span="1"></el-col>
<el-col :span="23">
<div id="china-map"></div>
</el-col>
<el-col :span="1"></el-col>
</el-row>
</div>.managingPatientSize {
width: 100%;
height: 100%;
// background-color: #111b41;
color: #fff;
.el-row {
height: 100%;
.el-col {
height: 100%;
position: relative;
#china-map {
height: 100%;
}
}
}
}四、完整代碼
這里代碼直接cv放在組件里引入就可以看到效果，數(shù)據(jù)都是死的，根據(jù)實(shí)際需要去改動(dòng)就可以了
代碼是什么意思看注釋去修改。
這里我使用自定義png圖片去繪制散點(diǎn)，就不能修改漣漪特效的顏色了，有會(huì)的兄弟可以評(píng)論交流一下
<template>
<div class="managingPatientSize">
<el-row>
<el-col :span="1"></el-col>
<el-col :span="23">
<div id="china-map"></div>
</el-col>
<el-col :span="1"></el-col>
</el-row>
</div>
</template>
<script>
import geoJson from '@/utils/china.json'
import * as echarts from 'echarts';
echarts.registerMap('china', geoJson)
export default {
name: 'ChinaMap',
data () {
return {
provinceInfo: [
{
name: "北京",
oredrNum: 599,//訂單數(shù)量
goodsNum: 599,//貨品數(shù)量
},
{
name: "上海",
oredrNum: 142,
goodsNum: 599,
},
{
name: "黑龍江",
oredrNum: 44,
goodsNum: 599,
},
{
name: "深圳",
oredrNum: 92,
goodsNum: 599,
},
{
name: "湖北",
oredrNum: 810,
goodsNum: 599,
},
{
name: "四川",
oredrNum: 453,
goodsNum: 599,
},
{
name: "新疆",
oredrNum: 36,
goodsNum: 31,
},
{
name: "福建",
oredrNum: 106,
goodsNum: 30211111,
},
],
}
},
methods: {
drawCharts () {
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var chinaMap = echarts.init(document.getElementById("china-map"));
window.onresize = chinaMap.resize; // 窗口或框架被調(diào)整大小時(shí)執(zhí)行chinaMap.resize
chinaMap.setOption({
// 進(jìn)行相關(guān)配置
tooltip: {
// 鼠標(biāo)移到圖里面的浮動(dòng)提示框
backgroundColor: 'rgba(0,0,0,0.5)',//提示框背景色
borderColor: 'rgba(0,0,0,0)',//邊框夜色
textStyle: {
color: 'rgba(255, 255, 255, 1)'//文字顏色
},
//自定義提示框自動(dòng)調(diào)用函數(shù)
formatter: function (params) {
let showname = params;
return (
`
<div style='width:100%;height:60px'>
<p style="font-size:12px" >${showname.data ? showname.data.name : '暫無信息'}</p>
<p style="font-size:12px" >訂單總數(shù):${showname.data ? showname.data.oredrNum : '暫無信息'}</p>
<p style="font-size:12px">貨品數(shù)量:${showname.data ? showname.data.goodsNum : '暫無信息'}</p>
</div>
`
);
}
},
dataRange: {
show: false,
min: 0,
max: 1000,
text: ["High", "Low"],
realtime: true,
calculable: true,
color: ["#fd7b78"],
},
geo: {
// 這個(gè)是重點(diǎn)配置區(qū)
map: "china", // 表示中國(guó)地圖
// roam: true, //是否允許放大
label: {
normal: {
show: false, // 是否顯示對(duì)應(yīng)地名
textStyle: {
color: "#fd7b88", //對(duì)應(yīng)地名顏色
},
},
},
//點(diǎn)擊變色
select: {
itemStyle: {
areaColor: "#fd7b88", //點(diǎn)擊之后的省份顏色
},
},
itemStyle: {
normal: {
//正常狀態(tài)下的地圖背景色
borderColor: "#fff",
borderWidth: "0.5",
color: new echarts.graphic.LinearGradient( // 漸變色
0,
0,
1,
0, // 漸變色的起止位置, 右/下/左/上
[
// offset 位置
{ offset: 0.8, color: '#f2aca0' },
{ offset: 0, color: '#fd7b78' }
]
),
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,//聚焦時(shí)候的陰影范圍
borderWidth: 0,
shadowColor: "#f04b30",//聚焦時(shí)候的陰影顏色
// 鼠標(biāo)放上去地圖區(qū)域背景顏色
areaColor: '#fd7b78',//聚焦之后的顏色
borderWidth: 0
},
},
},
series: [
{
type: "scatter",
coordinateSystem: "geo", // 對(duì)應(yīng)上方配置
},
{
// name: "啟動(dòng)次數(shù)", // 浮動(dòng)框的標(biāo)題
type: "map",
geoIndex: 0,
data: this.provinceInfo
},
],
});
// 地圖打點(diǎn)-----
var cityData = [
{
name: "北京",
oredrNum: 599,//訂單數(shù)量
goodsNum: 599,//貨品數(shù)量
},
{
name: "天津",
ename: "天津",
},
{
name: "上海",
oredrNum: 142,
goodsNum: 599,
},
{
name: "重慶",
ename: "重慶",
},
{
name: "河北",
ename: "河北",
},
{
name: "河南",
ename: "河南",
},
{
name: "云南",
ename: "云南",
},
{
name: "遼寧",
ename: "遼寧",
},
{
name: "黑龍江",
oredrNum: 44,
goodsNum: 599,
},
{
name: "湖南",
ename: "湖南",
},
{
name: "安徽",
ename: "安徽",
},
{
name: "山東",
ename: "山東",
},
{
name: "新疆",
oredrNum: 1,//訂單數(shù)量
goodsNum: 599,//貨品數(shù)量
ename: "新疆",
},
{
name: "江蘇",
ename: "江蘇",
},
{
name: "浙江",
value: 3,
ename: "浙江",
},
{
name: "江西",
ename: "江西",
},
{
name: "湖北",
oredrNum: 810,
goodsNum: 599,
},
{
name: "廣西",
ename: "廣西",
},
{
name: "甘肅",
ename: "甘肅",
},
{
name: "山西",
ename: "山西",
},
{
name: "內(nèi)蒙古",
ename: "內(nèi)蒙古",
},
{
name: "陜西",
ename: "陜西",
},
{
name: "吉林",
ename: "吉林",
},
{
name: "福建",
oredrNum: 106,
goodsNum: 30211111,
},
{
name: "貴州",
ename: "貴州",
},
{
name: "廣東",
value: 53,
ename: "廣東",
},
{
name: "青海",
ename: "青海",
},
{
name: "西藏",
ename: "西藏",
},
{
name: "四川",
oredrNum: 453,
goodsNum: 599,
},
{
name: "寧夏",
ename: "寧夏",
},
{
name: "海南",
ename: "海南",
},
{
name: "臺(tái)灣",
ename: "臺(tái)灣",
},
{
name: "香港",
ename: "香港",
},
{
name: "澳門",
ename: "澳門",
},
];
const geoCoordMap = {
廣東: [113.75, 23.04,],
黑龍江: [128.34, 47.05],
北京: [116.40, 40.40],
新疆: [86.61, 40.79,],
內(nèi)蒙古: [112.17, 42.81],
青海: [97.07, 35.62],
西藏: [89.13, 30.66],
}
this.convertData = (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),//將上面數(shù)組的value添加到經(jīng)緯度后面
oredrNum: data[i].oredrNum ? data[i].oredrNum : '暫無數(shù)據(jù)',
goodsNum: data[i].goodsNum ? data[i].goodsNum : '暫無數(shù)據(jù)',
});
}
}
return res;
};
this.getMapChart(cityData);
},
//處理漣漪特效的函數(shù)
getMapChart (data) {
var myChart = this.$echarts.init(document.getElementById("china-map"));
var option = {
tooltip: {
show: true,
textStyle: {
color: "#fff",
},
},
series: [
{
type: "effectScatter",//圖例類型
coordinateSystem: "geo",//使用geo地圖
symbol: "image://data:image/png;base64,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",//圖例樣式
// symbol: "image://data:image/png;base64,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",//圖例樣式
showEffectOn: "emphasis",//漣漪特效何時(shí)觸發(fā)
symbolSize: 20,//圖例大小,
symbolOffset: [0, -10],
rippleEffect: {//特效設(shè)置
scale: 2.5,
color: "rgba(207, 55, 55, 1)",
number: 3
},
showEffectOn: "render",
data: this.convertData(data),
},
],
};
myChart.on("click", (params) => {
});
myChart.setOption(option);
window.onresize = () => {
myChart.resize();
}
},
},
mounted () {
this.drawCharts();
}
}
</script>
<style lang="scss" scoped>
.managingPatientSize {
width: 100%;
height: 100%;
// background-color: #111b41;
color: #fff;
.el-row {
height: 100%;
.el-col {
height: 100%;
position: relative;
#china-map {
height: 100%;
}
}
}
}
</style>總結(jié)
到此這篇關(guān)于vue使用Echarts繪制地圖的文章就介紹到這了,更多相關(guān)vue Echarts繪制地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue3中如何使用codemirror6增加代碼提示功能的相關(guān)資料,Codemirror是一個(gè)不錯(cuò)的Web代碼編輯庫(kù),可以方便簡(jiǎn)單的集成,需要的朋友可以參考下2023-08-08
vue打包后,用后端接口報(bào)錯(cuò)304、404問題
這篇文章主要介紹了vue打包后,用后端接口報(bào)錯(cuò)304、404問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)excel表格的導(dǎo)入導(dǎo)出的示例
本文主要介紹了vue實(shí)現(xiàn)excel表格的導(dǎo)入導(dǎo)出的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue3動(dòng)態(tài)路由(響應(yīng)式帶參數(shù)的路由)變更頁(yè)面不刷新的問題解決辦法
問題來源是因?yàn)槲业拈_源項(xiàng)目Maple-Boot項(xiàng)目的網(wǎng)站前端,因?yàn)轫?xiàng)目主打的內(nèi)容發(fā)布展示,所以其中的內(nèi)容列表頁(yè)會(huì)根據(jù)不同的菜單進(jìn)行渲染不同的路由,本文降介紹Vue3動(dòng)態(tài)路由變更頁(yè)面不刷新的問題解決辦法,需要的朋友可以參考下2024-07-07
這篇文章主要給大家介紹了關(guān)于Vue中添加滾動(dòng)事件設(shè)置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
Vue二次封裝el-select實(shí)現(xiàn)下拉滾動(dòng)加載效果(el-select無限滾動(dòng))
el-select默認(rèn)是不支持虛擬滾動(dòng)的,需要使用第三方插件來實(shí)現(xiàn)虛擬滾動(dòng)功能,下面這篇文章主要給大家介紹了關(guān)于Vue二次封裝el-select實(shí)現(xiàn)下拉滾動(dòng)加載效果的相關(guān)資料,需要的朋友可以參考下2024-04-04
vue+elementUI-el-table實(shí)現(xiàn)動(dòng)態(tài)顯示隱藏列方式
這篇文章主要介紹了vue+elementUI-el-table實(shí)現(xiàn)動(dòng)態(tài)顯示隱藏列方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue使用axios引起的后臺(tái)session不同操作
這篇文章主要介紹了Vue使用axios引起的后臺(tái)session不同操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue Router的手寫實(shí)現(xiàn)方法實(shí)現(xiàn)
這篇文章主要介紹了Vue Router的手寫實(shí)現(xiàn)方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05