示例來自於Echarts官網:https://www.echartsjs.com/examples/zh/index.html
解析柱狀圖的配值內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>柱狀圖</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '某地區蒸發量和降水量', //大標題
subtext: '純屬虛構' //小標題
},
tooltip: { //提示框組件
trigger: 'axis' // 'axis'座標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。
},
legend: { //顯示圖例
data: ['蒸發量', '降水量']
},
toolbox: { //顯示工具箱組件
show: true, //是否顯示
feature: {
dataView: { //數據視圖工具,展示當前圖標數據
show: true, //是否顯示該工具
readOnly: false}, //是否不可編輯(只讀)
magicType: { //動態類型切換
show: true, type: ['line', 'bar']}, //可在line,bar之間切換顯示
restore: {show: true},//配置項還原
saveAsImage: {show: true} //是否保存圖片
}
},
calculable: true,
xAxis: [
{
type: 'category', //座標軸類型。'value' 數值軸,適用於連續數據。'category' 類目軸,適用於離散的類目數據,爲該類型時必須通過 data 設置類目數據。
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}
],
yAxis: [
{
type: 'value' //座標軸類型。'value' 數值軸,適用於連續數據。'category' 類目軸,適用於離散的類目數據,爲該類型時必須通過 data 設置類目數據。
}
],
series: [
{
name: '蒸發量',
type: 'bar', //柱形圖
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], //數值
markPoint: { //標記點(輔助線)
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: { //標記線
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
markPoint: { //標記點
data: [
{name: '年最高', value: 182.2, xAxis: 7, yAxis: 183},
{name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
]
},
markLine: { //標記線(輔助線)
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
最終視圖如下: