vue 使用 echarts 繪制中國(guó)地圖的實(shí)現(xiàn)代碼
更新時(shí)間：2022年01月23日 10:37:01 作者：前端小杰
這篇文章主要介紹了vue 使用 echarts 繪制中國(guó)地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1. 插入echarts 所需模塊
import echarts from "echarts"; import 'echarts/map/js/china' // 使用中國(guó)地圖需把China.js文件引入
2. 正式代碼部分
//初始化echarts實(shí)例 通過(guò)傳參獲取要放置的id名稱(chēng)
var myChart = echarts.init(document.getElementById("容器的id名稱(chēng)"));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var optionMap = {
//設(shè)置 背景顏色
backgroundColor: "#FFFFFF",
tooltip: {
trigger: "item",
},
//左側(cè)小導(dǎo)航圖標(biāo)
visualMap: {
// 水平擺放
orient:"horizontal",
// 是否顯示指示條
show: true,
// 設(shè)置字體
textStyle: {
fontSize: 3.5,
},
// 顯示的位置
x: "",
splitList: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 0, end: 0 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 1, end: 9 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 10, end: 99 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 100, end: 499 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 500, end: 999 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 1000, end: 10000 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? { start: 10000 },
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? color: [
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#4a1213",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#772526",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#bb3937",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#d56355",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#e9a188",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#faebd2",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "#f5f5f5",
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ],
},
//配置屬性
series: [
{
name: title,
type: "map", // 類(lèi)型 為map地圖
// 具體地圖類(lèi)型為china 在這里需要引入echarts中自帶的China.js文件
mapType: "china",
roam: false, // 設(shè)置是否可以縮放 false 為不可以縮放
zoom:1.2,// 默認(rèn)縮放比例 剛進(jìn)入頁(yè)面時(shí)的縮放比例
itemStyle:{
normal: {
areaColor: '#000',
borderColor: 'skyblue',
borderWidth: 1,
shadowColor: '#ccc',
shadowBlur: 30,
opacity:1
},
},
label: {
normal: {
show: true, //是否顯示省份名稱(chēng) // 設(shè)置顯示省份名稱(chēng)的的字體大小 ，也可以顯示fontFamily:... ...
textStyle: {
fontSize: 6,
},
},
emphasis: {
show: true,
},
},
data:[{name:'xxx',value:數(shù)字},]
},
],
};
//使用制定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(optionMap);3. 最后的效果
到此這篇關(guān)于vue 使用 echarts 繪制中國(guó)地圖的文章就介紹到這了,更多相關(guān)vue 使用 echarts 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js實(shí)現(xiàn)一個(gè)SPA登錄頁(yè)面的過(guò)程【推薦】
本篇文章主要介紹了Vue.js寫(xiě)一個(gè)SPA登錄頁(yè)面過(guò)程的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04
vue?Keep-alive組件緩存的簡(jiǎn)單使用代碼
keep-alive是Vue提供的一個(gè)抽象組件,用來(lái)對(duì)組件進(jìn)行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關(guān)于vue?Keep-alive組件緩存的簡(jiǎn)單使用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
詳解基于vue-cli配置移動(dòng)端自適應(yīng)
本篇文章主要介紹了詳解基于vue-cli配置移動(dòng)端自適應(yīng)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
使用vue-router切換頁(yè)面時(shí)，獲取上一頁(yè)url以及當(dāng)前頁(yè)面url的方法
這篇文章主要介紹了使用vue-router切換頁(yè)面時(shí)，獲取上一頁(yè)url以及當(dāng)前頁(yè)面url的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例
本文主要介紹了vue3通過(guò)render函數(shù)實(shí)現(xiàn)菜單下拉框的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家介紹了c++游戲教程使用easyx實(shí)現(xiàn)大飛機(jī)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue使用vue-video-player插件播放視頻的步驟講解
在最近的項(xiàng)目中有一個(gè)視頻播放的功能,在之前的項(xiàng)目中沒(méi)有接觸過(guò)類(lèi)似的功能,第一次接觸,把具體操作步驟一下,這篇文章主要給大家介紹了關(guān)于vue使用vue-video-player插件播放視頻的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要為大家分享了vue開(kāi)發(fā)心得和技巧,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
利用Vue2.x開(kāi)發(fā)實(shí)現(xiàn)JSON樹(shù)的方法
這篇文章主要給大家介紹了關(guān)于利用Vue2.x開(kāi)發(fā)實(shí)現(xiàn)JSON樹(shù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Ant Design Upload 文件上傳功能的實(shí)現(xiàn)
這篇文章主要介紹了Ant Design Upload 文件上傳功能的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04