Echarts的簡介
ECharts是百度公司開源的一個使用 JavaScript 實現的開源可視化庫，兼容性強，底層依賴矢量圖形
庫 ZRender ，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
- 開源免費
- 功能豐富
- 社區活躍
- 多種數據的支持
- 移動端的優化
- 跨平臺
Echarts的快速上手
- 引入echarts.js文件
<script src="lib/echarts.min.js"></script>
- 準備展示圖標的容器
<div style="width: 600px;height: 400px"></div>
- 初始化echarts實例對象
let mCharts = echarts.init(document.querySelector('div'))
- 準備配置項
var option = {
title: {
text: '成績', // 標題文字
link: 'http://www.baidu.com', // 標題超鏈接
textStyle: { // 標題樣式設置
color: 'red' // 標題文字
}
},
xAxis: {
type: 'category', // 指明x軸為 類目軸
data: ['小明', '小紅', '小王'] // 為類目軸提供數據, 該數據是一個數組, 數組中的每個元素會呈現在x軸上
},
yAxis: {
type: 'value' // 指明x軸為 數值軸, 指明數值軸之后, 無需指定data
},
series: [
{
name: '語文', // 為圖標起一個名稱
type: 'bar', // 指明該圖標類型為 柱狀圖
data: [70, 92, 87] // 為x軸的每一個元素, 指明呈現在y軸的數值
}
]
- 把配置項設置為echarts實例對象
mCharts.setOption(option)
如下圖所示
image-20201128202558746
