依舊還是學妹給的封面

直接進入主題…在vue中使用個啥，都差不多是一個流程。

引入Echarts

安裝

npm install echarts --save

我們寫一個Echarts組件，在內進行引入

import * as echarts from 'echarts'

入門使用

如果之前沒有接觸過Vue或者Echarts 的小伙伴，了解方式無疑就是Echarts官方文檔或各大搜索引擎了。

我的了解方式無疑也是這個，但是我在看官方文檔的時候，覺得官方給的那個例子，有點點不符合Vue的風格，不過我先貼出來，實現最簡單的入門：

<template><div id="echarts" style="width: 600px; height: 600px"></div> </template> <script> import * as echarts from 'echarts' export default {mounted() {this.createEcharts();},methods: {createEcharts() {// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById("echarts"));// 繪制圖表 // 最重要的就是理解各個配置的作用吧，這個沒啥說的 就算熟能生巧myChart.setOption({title: {text: "ECharts 入門示例",},tooltip: {},xAxis: {data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],},yAxis: {},series: [{name: "銷量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],});}} }; </script>

將這個組件，在app組件中進行引入即可，我們來看看初始效果是如何的。

問題

1）從DOM操作改為ref

不知道你們有沒有發現問題所在：

官方文檔中它是直接對于dom進行操作的document.getElementById("echarts")，這和Vue的理念其實是不一樣的。

在vue中我們要做到盡可能減少直接對dom的操作，那么在這里我們可以如何改進勒？？

我們明確一下document.getElementById("echarts")獲得的是什么即可了。這里無疑就是獲得了節點信息，打印出來可以看到console.log(document.getElementById("echarts"));

那么我們就只要用vue的方式獲取到這個節點信息即可，因此可以使用vue中的ref屬性來實現。

<div id="echarts" ref="myEcharts" style="width: 600px; height: 600px"></div>console.log(this.$refs.myEcharts);

我們輸出來看一下好吧

和我們之前獲取到的是一模一樣的哈。

為了更符合Vue中的方式，我們再將這個案例改的更加靈活些：

<template><div ref="myEcharts" style="width: 600px; height: 600px"></div> </template> <script> import * as echarts from 'echarts'export default {data() {return {myEcharts: null,option:{title: { text: '普通圖表'},tooltip: {},xAxis: {data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]}}},methods: { initChart() {this.myEcharts = echarts.init(this.$refs.myEcharts);this.myEcharts.setOption(this.option);}},mounted () {this.initChart()}} </script>

這樣子才像vue中的寫法哈。

2）優化思路

1、如果我們在項目中要用到多種樣式的圖，那么直接引入也不是不可以的，但是如果僅僅只是使用了折線圖或者柱狀圖這種，那么還是建議大家采用按需引入的方式，那樣項目打包體積會更小一點。

官方文檔介紹的按需引入

2、另外就是我們可以將echarts封裝成組件，這樣是最佳的方式吧，將一切都動態化。

個人小小見解，僅考慮優化使用方式，并非是性能上的。如有不足，請及時指出，非常感謝。

這是最簡單的柱狀圖哈，知道大家的需求都是不一樣的，下面講講該如何學習。

---

多種多樣的圖表

在官方文檔中，有非常非常多的案例，就算我們什么都不會，cv大法一出，也是可以輕松用起來的哈。

官方示例

并且點進每個圖表都是有核心代碼的。

所謂的核心代碼就是option中的各種配置項。關于每一項配置項官方也給了詳細介紹。

數據的那一欄就是data，其他的都是配置項，不過如何渲染還是看大伙們的業務是啥。

點頂部菜單中的文檔那一欄，就有一個配置項手冊

最常用的幾個配置項應該下圖中這個了吧，俗稱的九大配置項。

---

如果想要快速理解的話，建議直接點擊一個復雜點的官方示例圖中，然后拿著配置手冊查一查，理解很快的，我認為這種方式應該是最簡單的啦吧。

授人以魚，不如授之以漁

因為不同的業務，可能會產生不一樣的需求，所以更多的我們是需要學會如何去學習。

用Echarts 可以畫那么多種圖，我不可能每個都作出一個小Demo給大家，而且大家的數據都不一樣，也就抄不了作業嗎，所以我們干脆聊聊如何去學會玩這種玩意。

看官方文檔在我認為永遠是了解它的最快方式。（也許大家會說為啥不是看各種博客，或者直接百度、Google）

原因有以下兩點：

版本原因，你搜索到的博客使用的不一定是最新的版本，技術的迭代在現在真的是非常快的。

其次博客內容真的很少有像官方文檔那種寫的十分完備的，另外在寫的過程中，大多數作者（包括我自己）更多的是會貼出自己認為十分核心的東西，對于一些非常細的東西，十分有可能會被忽略掉。

動手嘗試

看完文檔，不應該立即應用到現用的項目，最佳的方式應該是寫上個demo，看看效果如何（個人想法）

紙上得來終覺淺，絕知此事要躬行。

---

完事了完事啦

總結

以上是生活随笔為你收集整理的「后端小伙伴来学前端了」Vue中学会使用Echarts生成各种各样的图表，得学学了，必须要会的基本操作了的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。