vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
前言
echarts 提供了直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。而vue更合適操縱數(shù)據(jù)。
最近一直忙著搬家，就沒有更新博客，今天抽出空來寫一篇關(guān)于vue和echarts的博客。下面是結(jié)合地圖的一個(gè)小的echarts demo，我在使用npm的時(shí)候?qū)Ρ攘薳charts和vue-echarts兩個(gè)依賴，最后決定使用echarts依賴包，因?yàn)樗咏?，使用現(xiàn)實(shí)更小，如果對(duì)vue生命周期比較了解，那就更容易操作。
下面講一下做出這樣一個(gè)echarts圖。話不多說了，來一起看看詳細(xì)的介紹吧
一 基礎(chǔ)的echarts圖表制作
1.首先在vue項(xiàng)目中引入echarts并全局配置
npm install echarts --save
在main.js中引入并掛在到vue的prototype上
import echarts from "echarts"; Vue.prototype.$echarts = echarts;
2.創(chuàng)建一個(gè)裝載echarts圖表的盒子
<div id="chart1"></div>
差不多就是這樣，設(shè)置一個(gè)id即可。
3.按需引入需要的echarts組件
4.在data里面配置好echarts的配置項(xiàng)和數(shù)據(jù)
5.在mounted生命周期中初始化echarts圖表，在對(duì)應(yīng)的方法中獲取echarts節(jié)點(diǎn)并渲染。
首先在mounted中調(diào)用初始化函數(shù)
this.drawLine();
然后獲取echarts節(jié)點(diǎn)
this.chart1 = this.$echarts.init(document.getElementById("chart1"));
this.chart1.setOption(this.items2);
6.在屏幕大小發(fā)生變化時(shí)，我們重新渲染圖表
這一步很簡(jiǎn)單只需調(diào)用resize方法即可
window.onresize = () => {
this.chart1.resize();
};
這樣一來我們就完成了這樣一個(gè)簡(jiǎn)單的圖表，想做出更炫酷的圖表請(qǐng)研讀echarts文檔，接下來我們看看怎么使用echarts的地圖功能
二 echarts地圖的使用
1.echarts地圖功能也不復(fù)雜，只需要引入對(duì)應(yīng)省份國(guó)家的地圖js庫(kù)即可
然后在想使用的地方引入
import "echarts/map/js/province/beijing.js";
2.配置地圖配置項(xiàng)
3.修改地圖默認(rèn)數(shù)據(jù)
這樣配置之后會(huì)有一些問題，地圖一些名稱會(huì)有顯示的問題，就像這樣
文字顯示的位置不太滿意，我們調(diào)整一下文字顯示的位置。打開地圖js文件，修改經(jīng)緯度，知道自己滿意。
這樣就可以操作我們的地圖了，是不是很簡(jiǎn)單？！喜歡就加個(gè)關(guān)注，我會(huì)定期更新一些使用的小文章
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。
- Java調(diào)用echarts提供的地圖壓縮方法來壓縮地圖
- React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼
- echarts實(shí)現(xiàn)地圖定時(shí)切換散點(diǎn)與多圖表級(jí)聯(lián)聯(lián)動(dòng)詳解
- echarts設(shè)置圖例顏色和地圖底色的方法實(shí)例
- vue+vuex+axios+echarts畫一個(gè)動(dòng)態(tài)更新的中國(guó)地圖的方法
- echarts3 使用總結(jié)（繪制各種圖表,地圖）
- jsp使用ECharts動(dòng)態(tài)在地圖上標(biāo)識(shí)點(diǎn)
- 如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
- Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了iview實(shí)現(xiàn)圖片上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏鼠標(biāo)移到時(shí)彈窗顯示全部
這篇文章主要介紹了使用VUE實(shí)現(xiàn)在table中文字信息超過5個(gè)隱藏，鼠標(biāo)移到時(shí)彈窗顯示全部,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
這篇文章主要介紹了element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要給大家分享關(guān)于Vue 購(gòu)物車案例的小練習(xí)，文章個(gè)悲劇購(gòu)物車為標(biāo)題需求利用HTML代碼實(shí)現(xiàn)整個(gè)過程,需要的朋友可以參考一下文章的具體內(nèi)容2021-10-10
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項(xiàng)目里面有一個(gè)功能是日期選擇功能,第一反應(yīng)是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關(guān)于element日期選擇器el-date-picker樣式的相關(guān)資料,需要的朋友可以參考下2022-09-09
Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡(jiǎn)單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了Vue父子組件傳值&自定義事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(defineProperty表示不背這個(gè)鍋)
這篇文章主要介紹了為什么Vue3.0使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽？defineProperty表示不背這個(gè)鍋，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
vue 提供了很多自定義指令，大大方便了我們的開發(fā)，其中最常用的也就是 v-model，他可以在組件上使用以實(shí)現(xiàn)雙向綁定。它可以綁定多種數(shù)據(jù)結(jié)構(gòu), 今天總結(jié)一下用法2023-04-04
vue中調(diào)接口的方式詳解this.$api、直接調(diào)用、axios
這篇文章主要介紹了vue中調(diào)接口的方式：this.$api、直接調(diào)用、axios,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-11-11