echarts的标记线和标记点

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, 我没有用过多的语言去修饰

echarts的标记线和标记点相关推荐

echarts使用总结（使用echarts画工字型标记线；无数据时设置纵坐标刻度0-1；tooltip数据展示；工具栏 toolBox 图标配置）
1. 使用echarts画标记线(工字型) 1.1 实现效果 1.2 使用属性详细参数可查看echarts官网,markline属性 https://echarts.apache.org/zh/op ...
画线标记html,markline.js——轻量级canvas绘制标记线的库
这段时间要做的是一个数据可视化的小型项目.其中最基本要求是实现两点之间的迁徙关系(比如同一个用户不同时间上网的地点)用一条有向线段(markline)联系在一起.很自然的我一开始想的就是采用百度的ec ...
JavaScript销售经理能力分析echarts（标记点、标记线）
echarts.js下载链接提取码:7gaghttps://pan.baidu.com/s/1XwM6UJV3FK0nkxDxwEoR3w?pwd=7gag 根据以下数据实现图标,设置标记点标记线 ...
Echarts的二次封装思考心得。封装成果：折线柱状混合图、立体柱状折线混合图、markline标记线
先说一下这次对ECharts二次封装总结的一些东西吧,感觉这是重点! 二次封装及使用的矛盾痛点: 一般封装只会暴露出一些常用的属性,最常见的如图表的颜色.数据: 封装人员也不会考虑把所有情况都封装起来 ...
layui + echarts股票K线图（含案例、代码、截图）（转载篇）
文章目录 layui + echarts股票K线图(含案例.代码.截图)(转载篇) 一.案例.代码.截图经验 · 补充说明: layui + echarts股票K线图(含案例.代码.截图)(转载篇) ...
百度地图结合echarts实现飞线
百度地图结合echarts实现飞线目前很流行的地图轨迹飞线图,咱也来实现一个,使用百度地图和echarts图表实现,示例如下,(其实百度地图api有一个位置数据可视化MapV GL也可实现,需要的小 ...
【学习OpenCV4】OpenCV绘制标记/线/矩形/文字/圆等
本文分享内容来自图书<学习OpenCV 4:基于Python的算法实战>,该书内容如下: 第1章 OpenCV快速入门: 第2章图像读写模块imgcodecs: 第3章核心库模块cor ...
vue中使用Echarts绘制K线图
一.需求问题在开发项目中,我们可能会遇到这样的需求.在vue中使用Echarts绘制K线图,进行数据分析.下面是一个简单的K线图绘制,数据是伪造的,虽然不多,但是能够实现大致的K线图效果. 二.需求 ...
12对胸椎对应体表标志_胸部检查第一节胸部的体表标志与常用标记线
<胸部检查第一节胸部的体表标志与常用标记线>由会员分享,可在线阅读,更多相关<胸部检查第一节胸部的体表标志与常用标记线(18页珍藏版)>请在人人文库网上搜索. 1.胸部检 ...

echarts的标记线和标记点

echarts的标记线和标记点相关推荐

最新文章

热门文章