ECharts 教程
本章節(jié)我們將為大家介紹使用 ECharts 生成圖表的一些配置。
創(chuàng)建一個(gè) HTML 頁(yè)面，引入 echarts.min.js：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script>
</head>
</html>
實(shí)例中 id 為 main 的 div 用于包含 ECharts 繪制的圖表:
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>ECharts 庫(kù)使用 json 格式來配置。
echarts.init(document.getElementById('main')).setOption(option);
這里 option 表示使用 json 數(shù)據(jù)格式的配置來繪制圖表。步驟如下：
標(biāo)題
為圖表配置標(biāo)題：
title: {
text: '第一個(gè) ECharts 實(shí)例'
}
提示信息
配置提示信息：
tooltip: {},
圖例組件
圖例組件展現(xiàn)了不同系列的標(biāo)記(symbol)，顏色和名字。可以通過點(diǎn)擊圖例控制哪些系列不顯示。
legend: {
data: [{
name: '系列1',
// 強(qiáng)制設(shè)置圖形為圓。
icon: 'circle',
// 設(shè)置文本為紅色
textStyle: {
color: 'red'
}
}]
}
X 軸
配置要在 X 軸顯示的項(xiàng):
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
Y 軸
配置要在 Y 軸顯示的項(xiàng)。
yAxis: {}
系列列表
每個(gè)系列通過 type 決定自己的圖表類型:
series: [{
name: '銷量', // 系列名稱
type: 'bar', // 系列圖表類型
data: [5, 20, 36, 10, 10, 20] // 系列中的數(shù)據(jù)內(nèi)容
}]每個(gè)系列通過 type 決定自己的圖表類型：
以下為完整的實(shí)例：
點(diǎn)擊 "運(yùn)行代碼" 按鈕查看在線實(shí)例
更多配置項(xiàng)內(nèi)容參考：https://www.echartsjs.com/zh/option.html