vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例
前言
echarts 提供了直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表。而vue更合適操縱數(shù)據(jù)。
最近一直忙著搬家，就沒有更新博客，今天抽出空來寫一篇關(guān)于vue和echarts的博客。下面是結(jié)合地圖的一個小的echarts demo，我在使用npm的時候?qū)Ρ攘薳charts和vue-echarts兩個依賴，最后決定使用echarts依賴包，因?yàn)樗咏?，使用現(xiàn)實(shí)更小，如果對vue生命周期比較了解，那就更容易操作。
下面講一下做出這樣一個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)建一個裝載echarts圖表的盒子
<div id="chart1"></div>
差不多就是這樣，設(shè)置一個id即可。
3.按需引入需要的echarts組件
4.在data里面配置好echarts的配置項(xiàng)和數(shù)據(jù)
5.在mounted生命周期中初始化echarts圖表，在對應(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ā)生變化時，我們重新渲染圖表
這一步很簡單只需調(diào)用resize方法即可
window.onresize = () => {
this.chart1.resize();
};
這樣一來我們就完成了這樣一個簡單的圖表，想做出更炫酷的圖表請研讀echarts文檔，接下來我們看看怎么使用echarts的地圖功能
二 echarts地圖的使用
1.echarts地圖功能也不復(fù)雜，只需要引入對應(yīng)省份國家的地圖js庫即可
然后在想使用的地方引入
import "echarts/map/js/province/beijing.js";
2.配置地圖配置項(xiàng)
3.修改地圖默認(rèn)數(shù)據(jù)
這樣配置之后會有一些問題，地圖一些名稱會有顯示的問題，就像這樣
文字顯示的位置不太滿意，我們調(diào)整一下文字顯示的位置。打開地圖js文件，修改經(jīng)緯度，知道自己滿意。
這樣就可以操作我們的地圖了，是不是很簡單？！喜歡就加個關(guān)注，我會定期更新一些使用的小文章
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對腳本之家的支持。
- Java調(diào)用echarts提供的地圖壓縮方法來壓縮地圖
- React 使用recharts實(shí)現(xiàn)散點(diǎn)地圖的示例代碼
- echarts實(shí)現(xiàn)地圖定時切換散點(diǎn)與多圖表級聯(lián)聯(lián)動詳解
- echarts設(shè)置圖例顏色和地圖底色的方法實(shí)例
- vue+vuex+axios+echarts畫一個動態(tài)更新的中國地圖的方法
- echarts3 使用總結(jié)（繪制各種圖表,地圖）
- jsp使用ECharts動態(tài)在地圖上標(biāo)識點(diǎn)
- 如何使用PHP+jQuery+MySQL實(shí)現(xiàn)異步加載ECharts地圖數(shù)據(jù)(附源碼下載)
- Vue Echarts實(shí)現(xiàn)可視化世界地圖代碼實(shí)例
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue3中jsoneditor的使用相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起了解下2024-01-01
今天小編就為大家分享一篇vue設(shè)置動態(tài)請求地址的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue :src 文件路徑錯誤問題的簡單解決方法，本文分步驟給大家介紹的非常詳細(xì)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
最近在寫vue的一個項(xiàng)目要實(shí)現(xiàn)過渡的效果,雖然vue動畫不是強(qiáng)項(xiàng),庫也多,但是基本的坑還是得踩扎實(shí),下面這篇文章主要給大家介紹了關(guān)于Vue中實(shí)現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
vue3?錨點(diǎn)定位的多種實(shí)現(xiàn)方式
這篇文章主要介紹了vue3?多種方法的錨點(diǎn)定位，使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進(jìn)行權(quán)限控制，但需要學(xué)習(xí)和理解相關(guān)概念，并且需要手動編寫和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
Vue實(shí)現(xiàn)一個返回頂部backToTop組件
本篇文章主要介紹了Vue實(shí)現(xiàn)一個返回頂部backToTop組件，可以實(shí)現(xiàn)回到頂部效果，具有一定的參考價值，有興趣的可以了解一下2017-07-07
Vue項(xiàng)目中引入外部文件的方法（css、js、less）
本篇文章主要介紹了Vue項(xiàng)目中引入外部文件的方法（css、js、less），非常具有實(shí)用價值，需要的朋友可以參考下2017-07-07
Vue SPA 初次進(jìn)入加載動畫實(shí)現(xiàn)代碼
今天小編就為大家分享一篇Vue SPA 初次進(jìn)入加載動畫實(shí)現(xiàn)代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10