示例来自于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=900px;height:600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title:{
text:'未来一周气温变化', //大标题
subtext:'虚构' //小标题
},
tooltip:{ //提示框组件
trigger:'axis' // 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
},
legend:{ //显示图例
show:true, //是否显示
data:['最高气温','最低气温']
},
toolbox:{ //显示工具箱组件
show:true, //是否显示
feature:{
dataZoom:{ //数据区域缩放
yAxisIndex:'none'},
dataView:{ //数据视图工具，展示当前图表数据
readOnly:false}, //是否不可编辑（只读）
magicType:{ //动态类型切换
type:['line','bar']}, //可在line，bar之间切换显示
restore:{ //配置项还原
show:true,
title:'还原'
},
saveAsImage:{} //保存图片
}
},
xAxis:{ //x轴
type:'category', //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
boundaryGap:false, //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
data:['周一','周二','周三','周四','周五','周六','周日']
},
yAxis:{
type:'value',
axisLabel:{ //坐标轴刻度标签的相关设置
formatter:'{value}°C'
}
},
series:[
{
name:'最高气温',
type:'line', //折线图
data:[11,11,15,13,12,13,10],
markPoint:{ //标记点
data:[
{type:'max',name:'最大值'},
{type:'min',name:'最小值'}
]
},
markLine:{ //标记线（辅助线）
data:[
{type:'average',name:'平均值'},
]
}
},
{
name:'最低气温',
type:'line',
data:[1,-2,2,5,3,2,0],
markPoint:{ //标记点
data:[
{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
]
},
markLine:{ //标记线（辅助线）
data:[
{type:'average',name:'平均值'},
[{
symbol:'none',
x:'90%',
yAxis:'max'
},{
symbol:'circle',
label:{
position:'start',
formatter:'最大值'
},
type:'max',
name:'最高点'
}]
]
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
最终视图如下：
