簡單實現(xiàn)一個echarts圖表
首先下載echarts.js
在 https://www.jsdelivr.com/package/npm/echarts 選擇 dist/echarts.js，點擊并保存為 echarts.js 文件。
接下來通過五步來實現(xiàn)一個基礎(chǔ)的柱狀圖表。
步驟1：引入echarts.js文件
步驟2：準(zhǔn)備一個呈現(xiàn)圖標(biāo)的盒子
步驟3：初始化echarts實例對象
步驟四：準(zhǔn)備配置項
步驟5：將配置項設(shè)置給echarts實例對象
示例圖片：
image.png
示例代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts的快速上手</title>
<!-- 步驟1：引入echarts.js文件 -->
<script src="lib/echarts.js"></script>
</head>
<body>
<!-- 步驟2：準(zhǔn)備一個呈現(xiàn)圖標(biāo)的盒子 -->
<div style="width: 600px; height: 400px;"></div>
<script>
// 步驟3：初始化echarts實例對象
// 參數(shù)，dom，決定圖標(biāo)最終呈現(xiàn)的位置
let mCharts = echarts.init(document.querySelector('div'));
// 步驟四：準(zhǔn)備配置項
let option = {
title: {
text: '成績', //主標(biāo)題文本
link: 'http://www.baidu.com', //主標(biāo)題文本超鏈接。
textStyle: { //主標(biāo)題文本的樣式
color: 'red'
}
},
xAxis: {
type: 'category', //類目軸
data: [ '小明', '小紅', '小王' ]
},
yAxis: {
type: 'value' //數(shù)值軸
},
series: [
{
name: '語文',
type: 'bar', //柱狀
data: [70, 92, 87]
}
]
}
// 步驟5：將配置項設(shè)置給echarts實例對象
mCharts.setOption(option)
</script>
</body>
</html>
