本章節我們将為大家介紹使用 ECharts 生成圖表的一些配置。
建立一個 HTML 頁面，引入 echarts.min.js：
執行個體中 id 為 main 的 div 用于包含 ECharts 繪制的圖表:
ECharts 庫使用 json 格式來配置。
這裡 option 表示使用 json 資料格式的配置來繪制圖表。步驟如下：
标題
為圖表配置标題：
提示資訊
配置提示資訊：
圖例元件
圖例元件展現了不同系列的标記(symbol)，顔色和名字。可以通過點選圖例控制哪些系列不顯示。
X 軸
配置要在 X 軸顯示的項:
Y 軸
配置要在 Y 軸顯示的項。
系列清單
每個系列通過 type 決定自己的圖表類型:
每個系列通過 type 決定自己的圖表類型：
type: 'bar'：柱狀/條形圖
type: 'line'：折線/面積圖
type: 'pie'：餅圖
type: 'scatter'：散點（氣泡）圖
type: 'effectScatter'：帶有漣漪特效動畫的散點（氣泡）
type: 'radar'：雷達圖
type: 'tree'：樹型圖
type: 'treemap'：樹型圖
type: 'sunburst'：旭日圖
type: 'boxplot'：箱形圖
type: 'candlestick'：K線圖
type: 'heatmap'：熱力圖
type: 'map'：地圖
type: 'parallel'：平行坐标系的系列
type: 'lines'：線圖
type: 'graph'：關系圖
type: 'sankey'：桑基圖
type: 'funnel'：漏鬥圖
type: 'gauge'：儀表盤
type: 'pictorialBar'：象形柱圖
type: 'themeRiver'：主題河流
type: 'custom'：自定義系列
以下為完整的執行個體：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一個 ECharts 執行個體</title>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts執行個體
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和資料
var option = {
title: {
text: '第一個 ECharts 執行個體'
},
tooltip: {},
legend: {
data:['銷量']
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和資料顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
點選 "嘗試一下" 按鈕檢視線上執行個體
更多配置項内容參考：https://echarts.apache.org/zh/option.html