ECharts的特性：Echarts,一個使用javaScript實現的開源可視化庫，可以流暢的運行在pc和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11,Chrome,Firefox,Safari等），底層依賴輕量級的矢量圖形庫，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
官網地址：https://www.echartsjs.com/index.html先下載echarts.min.js
echarts應用場景的使用：
1.在jquery下使用直接引入jquery.js文件和echarts.min.js文件
1.1引入ECharts<script src="echarts.min.js"></script>
1.2繪制一個簡單的圖表，在繪圖前我們需要為ECharts准備一個具備寬和高的DOM容器。
<body>
<!-- 為 ECharts 准備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
然后就可以通過 echarts.init 方法初始化一個 echarts 實例並通過 setOption 方法生成一個簡單的柱狀圖
<script type="text/javascript">
// 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
//每次窗口大小改變的時候都會觸發onresize事件，這個時候我們將echarts對象的尺寸賦值給窗口的大小這個屬性，從而實現圖表對象與窗口對象的尺寸一致的情況
window.onresize = echart.resize;
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
學習ECharts主要學習其配置項和api，推薦先學習配置項了解其內部的屬性在學習api
其中主要學習的echarts的基本配置，也是我認為學習echarts主要掌握的配置項。
其中xAxis:{} yAxis:{} series:{} 是繪圖中必不可少的配置項。
每次窗口大小改變的時候都會觸發onresize事件，這個時候我們將echarts對象的尺寸賦值給窗口的大小這個屬性，從而實現圖表對象與窗口對象的尺寸一致的情況
window.onresize = echart.resize;其寫法在傳統的html中配合js和jquery使用。
在傳統的html中使用jquery或js完成對echarts的前后端交互，其實和jquery
的正常ajax交互一樣。
Echarts 配合 jquery 交互的demo 網站：https://www.cnblogs.com/hjptopshow/p/7943235.html
2.在vue-cli(簡稱vue腳手架)中使用Echarts中的使用方法：
2.1 先創建vue-cli 項目創建vue-cli項目的教程網
站:https://www.jianshu.com/p/c275414839dc
運行項目之后下載Echarts，在操作這步的時候要注意在vue腳手架中看清楚自
己下載的Echarts版本，版本2.0.0下會報錯，圖表無法生效。
這時則需要看vue腳手架中的Echarts版本了。
創建好vue-cli項目之后再package.json文件中找到在vue腳手架中echarts
的版本，目前推薦使用最新版本的4.2.1版本。確認在vue-cli中是最新的版本
之后開始下載Echarts包
Echarts NPM命令下載: npm install echarts --save
下載完成后 全局引入 在vue-cli的main.js中引入
新建一個World.vue組件(這個vue自己隨意創建)
直接上代碼：
這就是一個柱狀圖的demo,直接啟動項目可以看到如圖：
在vue-cli中的Echarts使用已經實現。
接下來則要對 Vue中如何進行Echarts進行數據交互。
數據交互的演示demo網站：https://www.cnblogs.com/samve/p/10884748.html
用axios進行請求，在vue-cli中用數據交互請求的話最好用用vue-cli的三方庫axios工具請求，對vue比較友好，jquery的ajax也是可以用但是推薦使用axios.
在echarts中圖形的繪制有多重類型
基礎類型圖有：
折線圖 柱狀圖 餅圖 散點圖 地理坐標/地圖 k線圖 雷達圖 盒須圖 熱力圖
關系圖 路徑圖 樹圖 矩形樹圖 旭日圖 平行坐標系 桑基圖 漏斗圖 儀表盤 象形柱圖
主題河流圖 日歷坐標系
入上圖的demo 和樣式在如下鏈接：
https://www.echartsjs.com/examples/#chart-type-funnel
其中 除了盒須圖 地理坐標/地圖 平行坐標系 是需要引入特定的js文件配合使用之外其他圖的用法大同小異。
盒須圖的用法：
在自己的html文件下引入一個dataTool.js工具其他js就按需引入則可以正常使用。
地理坐標/地圖的用法：
這里的地圖調用的是百度地圖
為什么會用百度地圖而不用高德地圖?
因為echarts的團隊是百度的，所以用的肯定就是自家的地圖了。
需要引入
bmap.js是echarts給百度地圖寫的js
加入百度地圖的api秘鑰鏈接 這里的秘鑰自己可以在百度開發者賬號中自己申請。
如果地圖的數據是json數據的話，則需要用ajax方式去獲取數據之后再做如上操作。
平行坐標系的用法：
在平行坐標系的demo中牽扯到世界地圖的使用，所以在這類圖中要使用世界地圖的js。
由於世界地圖的數據來自第三放，數據不符合國家《測繪法》規定，目前是下不了的，
但是在最新的echarts 4.2.1中的js包中有世界地圖的js所以直接下載最新版本的echarts則可找到世界地圖的js。文件名叫 world.js
如圖:
其他的圖 如 折線圖 柱狀圖 散點圖 餅圖
其中最核心的就三個點：
xAxis： {
data:[] 類目軸 所有類目名稱列表
} 設置x軸屬性
yAxis: {
data:[] 類目軸 所有類目名稱列表
} 設置y軸屬性
Series: [
type: ‘’每個系列通過type決定自己的圖表類型。
] 系列列表。