欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue cli3.0結(jié)合echarts3.0與地圖的使用方法示例

 更新時間:2019年03月26日 08:33:03   作者:Vadim  
這篇文章主要給大家介紹了關(guān)于vue cli3.0結(jié)合echarts3.0與地圖的使用方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

前言

echarts 提供了直觀,交互豐富,可高度個性化定制的數(shù)據(jù)可視化圖表。而vue更合適操縱數(shù)據(jù)。

最近一直忙著搬家,就沒有更新博客,今天抽出空來寫一篇關(guān)于vue和echarts的博客。下面是結(jié)合地圖的一個小的echarts demo,我在使用npm的時候?qū)Ρ攘薳charts和vue-echarts兩個依賴,最后決定使用echarts依賴包,因為它更接近原生,使用現(xiàn)實更小,如果對vue生命周期比較了解,那就更容易操作。

下面講一下做出這樣一個echarts圖。話不多說了,來一起看看詳細的介紹吧

一 基礎(chǔ)的echarts圖表制作

1.首先在vue項目中引入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的配置項和數(shù)據(jù)


5.在mounted生命周期中初始化echarts圖表,在對應(yīng)的方法中獲取echarts節(jié)點并渲染。

首先在mounted中調(diào)用初始化函數(shù)

this.drawLine();

然后獲取echarts節(jié)點

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.配置地圖配置項


3.修改地圖默認數(shù)據(jù)

這樣配置之后會有一些問題,地圖一些名稱會有顯示的問題,就像這樣

文字顯示的位置不太滿意,我們調(diào)整一下文字顯示的位置。打開地圖js文件,修改經(jīng)緯度,知道自己滿意。

這樣就可以操作我們的地圖了,是不是很簡單?!喜歡就加個關(guān)注,我會定期更新一些使用的小文章

總結(jié)

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

相關(guān)文章

  • Vue3中jsoneditor的使用示例詳解

    Vue3中jsoneditor的使用示例詳解

    這篇文章主要為大家詳細介紹了Vue3中jsoneditor的使用相關(guān)知識,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解下
    2024-01-01
  • vue設(shè)置動態(tài)請求地址的例子

    vue設(shè)置動態(tài)請求地址的例子

    今天小編就為大家分享一篇vue設(shè)置動態(tài)請求地址的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • vue :src 文件路徑錯誤問題的解決方法

    vue :src 文件路徑錯誤問題的解決方法

    這篇文章主要介紹了vue :src 文件路徑錯誤問題的簡單解決方法,本文分步驟給大家介紹的非常詳細,感興趣的朋友跟隨腳本之家小編一起學習吧
    2018-05-05
  • 基于vue.js實現(xiàn)圖片輪播效果

    基于vue.js實現(xiàn)圖片輪播效果

    這篇文章主要為大家詳細介紹了基于vue.js實現(xiàn)圖片輪播效果,vue如何實現(xiàn)輪播圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Vue中動畫與過渡的使用教程

    Vue中動畫與過渡的使用教程

    最近在寫vue的一個項目要實現(xiàn)過渡的效果,雖然vue動畫不是強項,庫也多,但是基本的坑還是得踩扎實,下面這篇文章主要給大家介紹了關(guān)于Vue中實現(xiàn)過渡動畫效果的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue3?錨點定位的多種實現(xiàn)方式

    vue3?錨點定位的多種實現(xiàn)方式

    這篇文章主要介紹了vue3?多種方法的錨點定位,使用?Vue?Router?導(dǎo)航守衛(wèi)可以簡化導(dǎo)航邏輯、統(tǒng)一管理導(dǎo)航邏輯和進行權(quán)限控制,但需要學習和理解相關(guān)概念,并且需要手動編寫和管理導(dǎo)航守衛(wèi)的邏輯,本文給大家介紹的非常詳細,需要的朋友可以參考下
    2023-07-07
  • Vue實現(xiàn)一個返回頂部backToTop組件

    Vue實現(xiàn)一個返回頂部backToTop組件

    本篇文章主要介紹了Vue實現(xiàn)一個返回頂部backToTop組件,可以實現(xiàn)回到頂部效果,具有一定的參考價值,有興趣的可以了解一下
    2017-07-07
  • Vue項目中引入外部文件的方法(css、js、less)

    Vue項目中引入外部文件的方法(css、js、less)

    本篇文章主要介紹了Vue項目中引入外部文件的方法(css、js、less),非常具有實用價值,需要的朋友可以參考下
    2017-07-07
  • Vue SPA 初次進入加載動畫實現(xiàn)代碼

    Vue SPA 初次進入加載動畫實現(xiàn)代碼

    今天小編就為大家分享一篇Vue SPA 初次進入加載動畫實現(xiàn)代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • Vue的自定義事件之組件通信工具詳解

    Vue的自定義事件之組件通信工具詳解

    這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強大的工具,用于實現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下
    2023-10-10

最新評論