示例来自于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>
最终视图如下：
