前言

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)樗咏褂矛F(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ì)武林網(wǎng)的支持。