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