本文為個人近期學習總結，若有錯誤之處，歡迎指出！

一、簡單介紹

??????一個基于 JavaScript 的開源可視化圖表庫，支持用戶交互和個性化定制，提供折線圖、柱狀圖、餅圖、散點圖、關系圖、樹圖、地圖、儀表盤等各種圖表類型，功能非常強大。
這里提供幾個官網相關地址：
??????官網地址：https://echarts.apache.org/zh/index.html
??????官網使用手冊：https://echarts.apache.org/handbook/zh/get-started/
??????官網圖表示例地址：https://echarts.apache.org/examples/zh/index.html，
??????圖表配置項手冊地址：https://echarts.apache.org/zh/option.html#title，
??????圖表API地址：https://echarts.apache.org/zh/api.html#echarts
??????在繪制具體圖表時，可在配置項里查閱各個屬性和其代表含義；涉及圖形交互時，可查看API的使用。
??????再推薦倆關于echarts的社區網站，可參考學習（逛一逛，你一定會驚嘆網友的智慧，個人也會受益匪淺哦^_）。
網站一：https://www.makeapie.cn/echarts
網站二：https://echarts.zhangmuchen.top/#/index

二、基本使用（vue2中）

1.npm安裝

npm install echarts --save

這里個人安裝的版本是5.4.3
所以，安裝命令為：npm install echarts@5.4.3 --save
注意：不同版本的echarts，部分屬性的書寫格式可能存在差異。后續更文中圖表的屬性寫法，皆是5.4.3版本。

2.main.js引入

// 引入Echarts
import * as echarts from 'echarts'// 將ECharts實例化函數設為vue的原型函數，便于全局訪問
Vue.prototype.$echarts = echarts

組件內使用時，用this.$echarts.xxx。

3.使用步驟

主要步驟分為4步：

(1)準備帶有寬高的DOM容器；

<div ref="chartArea" :style="{width: '300px',height: '100px'}" />

(2)初始化echarts實例；

let myChart = this.$echarts.init(this.$refs.chartArea)

(3)定義圖表的配置項和數據；

常規配置如下：

option={color:[],//系列(如：柱子、折線、餅塊)的顏色（若不寫，則取默認值）tooltip:{},// 懸浮框，會在鼠標懸停或者觸摸某個數據點時顯示legend:{},//圖例grid:{},//直角坐標系繪圖網格xAxis:[],//x軸yAxis:[],//y軸//系列圖表series:[{name: '銷量',  // 系列名稱type: 'bar',  // 系列圖表類型data: [5, 20, 36, 10, 10, 20]  // 系列中的數據內容}]  
}

注意：
①這些配置屬性中，color、xAxis、yAxis、series屬性是數組（color里的元素是字符串，而xAxis、yAxis、series里的元素是對象），其它屬性是對象；
②若series系列中的對象設置了name屬性值，則legend.data可以不必寫，只需寫其它相關圖例配置。

各個配置屬性對應圖像中的位置如下：

(4)為echarts實例設置配置項和數據。

myChart.setOption(this.option, true)

PS：繪圖時，讓圖表跟隨屏幕自適應

window.addEventListener('resize', () => {myChart.resize()
})

好了，echarts在vue2項目中的使用基礎就講完了，后面咱就可以逐步開始繪制具體的各類圖表啦！