markPoint: 标记点---------------------------markLine:标记线
看了好几天还是不太理解markPoint和markLine的作用, 昨晚看视频终于有点理解了, 比如在一个折线图形当中我们经常看到最高和最低点都会有个标记,在echarts当中markPoint就是来标记最高和最低点的, 而有的图表中会有个平均值得虚线,markLine就是用来表示平局值的这条线的,我做个demo看下会更直观
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>markLine</title>
</head>
<body>
<div id="main" style="height: 500px;">
</div>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
var myCharts = echarts.init(document.getElementById("main"));
var option = {
title: {
text: "2018-3最后一周车辆统计"
},
legend:{
data: ["小轿车","大巴车","共享单车"]
},
tooltip:{
show: true
},
toolbox: {
show: true,
feature: {
mark:{
show:true
},
saveAsImage: {
show:true
}
}
},
xAxis: {
type: "category",
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
yAxis: {
type:"value"
},
series: [
{
name: "小轿车",
type: "line",
data: [10002,8000,13000,14000,7999,13333,9000],
markPoint:{
symbol: "pin", //标注类型
symbolSize: 20 , //标记大小
data:[
{type: "max", name: "最大值"},
{type: "min", name: "最小值"}
]
}
},
{
name: "大巴车",
type: "line",
data: [2002,5000,3000,4800,3999,3333,3000]
},
{
name: "共享单车",
type: "line",
data: [20002,28000,23000,24000,27999,23333,29000],
markLine:{
symbol: "arrow",
data:[
{type : 'max', name: '最大值'}, // 最大值水平线或垂直线
{type : 'min', name: '最小值'}, // 最小值水平线或垂直线
{type : 'average', name: '平均值'}// 平均值水平线或垂直线
]
}
}
]
}
myCharts.setOption(option);
</script>
</body>
</html>
图中像气球的是标记点->markPoint, 紫色是标记线->markLine, 我没有用过多的语言去修饰