echarts( 資料視覺化)
阿新 • • 發佈：2022-05-19
echarts : Apache ECharts 一個基於 JavaScript 的開源視覺化圖表庫
五分鐘上手教程：
1. 引入echarts.js 檔案
JS
<script src="./js/echarts.js"></script>
2. 為圖表建立一個固定寬高的容器
<div id="mycharts" ></div>
#mycharts{
width: 600px;
height: 600px;
border:1px solid red;
}
3. 建立圖表的例項化物件 初始化圖表
通過圖表容器的dom物件進行初始化操作
let container = document.querySelector('#mycharts')
const mycharts = echarts.init(container);
4. 建立圖表的配置項
let option = {
xAxis:{
data:['週一', '週二', '週三']
},
yAxis:{},
series:[
{
type:'bar',
data:[100, 50, 120]
}
]
}
5. 設定圖表資料項顯示
mycharts.setOption(option)