ECharts學習
ECharts安裝
獨立引入：我們可以在直接下載 echarts.min.js 並用 <script> 標籤引入，根據自己的需要下載需要的版本。
使用CDN方法：
Staticfile CDN（國內） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
百度：https://echarts.baidu.com/dist/echarts.min.js, 保持了最新版本。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
ECharts配置語法
第一步：創建HTML界面，引入echarts文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
第二步：爲 ECharts 準備一個具備高寬的 DOM 容器
實例中 id 爲 main 的 div 用於包含 ECharts 繪製的圖表:
<body>
<!-- 爲 ECharts 準備一個具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
第三步：ECharts 庫使用 json 格式來配置。
echarts.init(document.getElementById('main')).setOption(option);
這裏 option 表示使用 json 數據格式的配置來繪製圖表。
爲表格配置標題：
title: {
text: '第一個 ECharts 實例'
x: 'left', // 水平安放位置，默認爲左對齊，可選爲：
// 'center' ¦ 'left' ¦ 'right'
y: 'top', // 垂直安放位置，默認爲全圖頂端，可選爲：
// 'top' ¦ 'bottom' ¦ 'center'
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 標題邊框顏色
borderWidth: 0, // 標題邊框線寬，單位px，默認爲0（無邊框）
padding: 5, // 標題內邊距，單位px，默認各方向內邊距爲5，
// 接受數組分別設定上右下左邊距，同css
itemGap: 10, // 主副標題縱向間隔，單位px，默認爲10，
textStyle: {
fontSize: 18,
fontWeight: 'bolder',
color: '#333' // 主標題文字顏色
},
subtextStyle: {
color: '#aaa' // 副標題文字顏色
}
}
配置提示信息：
tooltip: {},
圖例組件
圖例組件展現了不同系列的標記(symbol)，顏色和名字。可以通過點擊圖例控制哪些系列不顯示。
legend: {
data: [{
name: '系列1',
// 強制設置圖形爲圓。
icon: 'circle',
// 設置文本爲紅色
textStyle: {
color: 'red'
}
}]
}
X 軸
配置要在 X 軸顯示的項:
xAxis: {
data: ["數據一","數據二","數據三","數據四","數據五","數據六"]
}
Y 軸
配置要在 Y 軸顯示的項。
yAxis: {}
系列列表：
每個系列通過 type 決定自己的圖表類型:
series: [{
name: '銷量', // 系列名稱
type: 'bar', // 系列圖表類型
data: [5, 20, 36, 10, 10, 20] // 系列中的數據內容
}]
每個系列通過 type 決定自己的圖表類型：
- type: ‘bar’：柱狀/條形圖
- type: ‘line’：折線/面積圖
- type: ‘pie’：餅圖
- type: ‘scatter’：散點（氣泡）圖
- type: ‘effectScatter’：帶有漣漪特效動畫的散點（氣泡）
- type: ‘radar’：雷達圖
- type: ‘tree’：樹型圖
- type: ‘sunburst’：旭日圖
- type: ‘boxplot’：箱形圖
- type: ‘candlestick’：K線圖
- type: ‘heatmap’：熱力圖
- type: ‘map’：地圖
- type: ‘parallel’：平行座標系的系列
- type: ‘lines’：線圖
- type: ‘graph’：關係圖
- type: ‘sankey’：桑基圖
- type: ‘funnel’：漏斗圖
- type: ‘gauge’：儀表盤
- type: ‘pictorialBar’：象形柱圖
- type: ‘themeRiver’：主題河流
- type: ‘custom’：自定義系列
學習參考：菜鳥教程