vue 使用 echarts 繪制中國地圖的實現(xiàn)代碼
更新時間：2022年01月23日 10:37:01 作者：前端小杰
這篇文章主要介紹了vue 使用 echarts 繪制中國地圖,內(nèi)容包括插入echarts所需模塊及完整的代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1. 插入echarts 所需模塊
import echarts from "echarts"; import 'echarts/map/js/china' // 使用中國地圖需把China.js文件引入
2. 正式代碼部分
//初始化echarts實例 通過傳參獲取要放置的id名稱
var myChart = echarts.init(document.getElementById("容器的id名稱"));
// 指定圖表的配置項和數(shù)據(jù)
var optionMap = {
//設置 背景顏色
backgroundColor: "#FFFFFF",
tooltip: {
trigger: "item",
},
//左側(cè)小導航圖標
visualMap: {
// 水平擺放
orient:"horizontal",
// 是否顯示指示條
show: true,
// 設置字體
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", // 類型 為map地圖
// 具體地圖類型為china 在這里需要引入echarts中自帶的China.js文件
mapType: "china",
roam: false, // 設置是否可以縮放 false 為不可以縮放
zoom:1.2,// 默認縮放比例 剛進入頁面時的縮放比例
itemStyle:{
normal: {
areaColor: '#000',
borderColor: 'skyblue',
borderWidth: 1,
shadowColor: '#ccc',
shadowBlur: 30,
opacity:1
},
},
label: {
normal: {
show: true, //是否顯示省份名稱 // 設置顯示省份名稱的的字體大小 ，也可以顯示fontFamily:... ...
textStyle: {
fontSize: 6,
},
},
emphasis: {
show: true,
},
},
data:[{name:'xxx',value:數(shù)字},]
},
],
};
//使用制定的配置項和數(shù)據(jù)顯示圖表
myChart.setOption(optionMap);3. 最后的效果
到此這篇關于vue 使用 echarts 繪制中國地圖的文章就介紹到這了,更多相關vue 使用 echarts 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
今天小編就為大家分享一篇解決vue 綁定對象內(nèi)點擊事件失效問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了Vue中的文字換行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了從零開始搭建vue移動端項目到上線的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
在現(xiàn)代Web開發(fā)中,Vue.js與Flask或Django配合使用,實現(xiàn)前后端分離,提高開發(fā)效率和應用性能,本文介紹了整合Vue.js和Flask/Django的步驟,包括環(huán)境搭建、API編寫、項目配置,以及生產(chǎn)部署,此架構不僅加快了開發(fā)進程,還提高了項目的可維護性和可擴展性2024-09-09
微前端qiankun主應用與子應用之間的跳轉(zhuǎn)示例
這篇文章主要為大家介紹了微前端qiankun主應用與子應用之間的跳轉(zhuǎn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
vue-cli中devServer.proxy相關配置項的使用
這篇文章主要介紹了vue-cli中devServer.proxy相關配置項的使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue3利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳
這篇文章主要為大家詳細介紹了Vue3如何利用組合式函數(shù)和Shared Worker實現(xiàn)后臺分片上傳(帶哈希計算),感興趣的小伙伴可以跟隨小編一起學習一下2023-10-10
Vue?vant-ui框架實現(xiàn)上拉加載下拉刷新功能
功能需求——獲取后端接口返回的數(shù)據(jù)，實現(xiàn)列表數(shù)據(jù)上滑加載更多下一頁數(shù)據(jù)，下拉數(shù)據(jù)刷新功能，結(jié)合vant-ui框架實現(xiàn)?？芍苯訁⒖际褂?/div> 2022-09-09
npm無法加載文件：因為在此系統(tǒng)上禁止運行腳本的解決辦法
這篇文章主要介紹了npm無法加載文件：因為在此系統(tǒng)上禁止運行腳本問題的解決辦法,文中通過代碼以及圖文介紹的非常詳細,需要的朋友可以參考下2025-01-01
詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配
這篇文章主要介紹了詳解mpvue實現(xiàn)對蘋果X安全區(qū)域的適配，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07最新評論