在Echarts图中给坐标轴加一个标识线markLine


Posted in Javascript onJuly 20, 2020

Echart3数据可视化视图

给坐标轴加一个标识线markLine

当X轴不是数值时,而是一个类型数据,如年份,公司名,企业名,这时Echarts图就不是从X轴起始位置开始的,所以我们就要给X轴加一个虚拟的值'0',在markLine中也是在赋值起始位置X轴值时,放置虚拟数据,并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0,这时标示线就从X轴起始位置开始了,详细属性可以去Echarts官网查看。

这里还要说一句在设置markLine下面data值时{x:”,//代表的是容器内x的值,y:”,容器内y的值},如果要设置在坐标轴内的标示线,就要设置xAxis和yAxis.

代码如下

option ={
  xAxis: {
     splitLine: {
      show: false,
     },
     axisLabel: {
      color: '#fff',
      rotate: '35',
      fontSize: 10,
     },
     data: ['0', '2013年', '2014年', '2015年', '2016年', '2017年'],
     boundaryGap: 0,
    },
    yAxis: {
     name: '(单位/km)',
     splitLine: {
      show: false,
     },
     axisLabel: {
      color: '#fff',
     },
     axisPointer: {
      lineStyle: {
       color: '#fff',
      },
      value: '140',
     },
    },
    grid: {
     top: '10%',
     bottom: '27%',
    },
    series: [{
     data: DataAll,
     type: 'scatter',
     symbolSize: function (parmas) {
      return Math.ceil(parmas[2] / 1000);
     },
     label: {
      emphasis: {
       show: true,
       formatter: function (param) {
        return param.data[3] + param.data[4];
       },
       position: 'top',
      },
     },
     markLine: {
      data: [
       [
        { name: '标线1起点', xAxis: 0, yAxis: 300, symbol: 'circle'},
        { name: '标线1终点', xAxis: '2017年', yAxis: 300, symbol: 'circle' },
       ],
      ],
      label: {
       normal: {
        show: true,
        position: 'middle',
        formatter: '节能与新能源汽车技术路线图2020年目标',
       },
      },
      lineStyle: {
       normal: {
        type: 'solid',
        color: '#fff',
       },
      },
     },
     itemStyle: {
      normal: {
       color: '#0fefee',
      },
     },
    }],
}

效果图

在Echarts图中给坐标轴加一个标识线markLine

补充知识:日常记要 之 Echarts结合百度地图,动态添加不同颜色的markline(markpoint同理)

其实找了网上的资料,大部分是同个颜色的markline,或者没有所谓的定时,很是苦恼,于是自己查找API,解决了实际开发中的问题,今天有空特地拿出来简单整理下,有什么不懂,或者我没说清楚的,欢迎留言,废话不多说,直接开始吧。

根据echarts官方API,动态添加markline需要使用addMarkLine()方法,它接收两个参数:一个seriesIdx系列索引(这里应该是指对应每一条markline的索引值)和一个markData(这里请参考官方API)。

在遇到的实际需求中,要求动态添加传播的路线,并且能够添加根据不同的颜色区分开来。这里遇到的问题主要有一下几个:

既然是动态添加markline,那么就存在一对多,或者多对一的情况。这个比较好处理,就是在数据中,添加一个表示层级关系的属性,一方面可以表现所谓的层级传播关系,另一方面,在每次传播过程中,同一层不管是一条markline还是多条,都是一样的处理方法;

颜色的区分,因为实际遇到的情况是层级并不会很多,所以没有做一个专门的Color对象去给每一层随机添加颜色,而是实现定义好一个长度能够满足需求的数组存储颜色值,这样的一个好处是避免随机下颜色接近看不出层级的关系;但是还有一个问题,是涉及到百度地图的,这个留在后面说;

索引值的问题,既然需要动态添加markline,那么seriesIdx是否动态变化呢,还是每一层一个seriesIdx呢,想知道吗?请耐心往下看吧。

其实上面提到的问题,在单纯用echarts下应该是比较好解决的(虽然我并没有做过测试),但是结合百度地图的话,有个坑这里必须提一下,就是百度地图是可以推动、缩放,以及它和echarts其实是两个东西啊(当然我这里说的是,你动态添加到ecahrts里面的数据,对百度地图来说,根本就不知道啊)。

那么怎么解决呢,上代码吧。

首先关于上面的第1个问题,由于数据是查询出来的,并且业务需求是没有实现规定好哪一条markline是哪一层,所以值考虑首位是不相同的,也就是开始和结束不在同一个位置,当然中间线的传播是可以的,这个根据具体的业务去处理就可以了。(这里插句话,阿里的 fastjson还是挺好用的,但是在它的JSONArray有点尴尬,有数据冲突(还是相同这个有点忘记了)然后遍历时,会生成一个$ref这样的循环引用的东西出来,简直了,不过JSONObject则不会出现同样的问题)。

require.config({ // ecahrts引用,这里不做解释了,请自行参考ecahrts的API例子
        paths: {
echarts: './lib/echarts'
        },
        packages: [
{
  name: 'BMap',
  location: './lib/echarts/Bmap',
  main: 'main'
}
        ]
      });
      require(
        [
'echarts',
'BMap',
'echarts/chart/map'
// 使用柱map模块,按需加载
        ],
        function (echarts, BMapExtension) {
// 初始化地图
var BMapExt = new BMapExtension(that.element.find('div')[0], BMap, echarts, {
  enableMapClick: false
});
var map = BMapExt.getMap();
          
// 因为这个有实际用途了,所以这里的代码块就不贴出来了,可按照自己的需求实现,具体查看百度地图的API
// 这里主要处理的是,设置了百度地图的边界,初始化时显示的区域,以及地图的放大系数
......
          
// 在加载时,以下操作请加上,这里就回答了上面提到的第2个问题,因为echarts在动态加载markline时,其实数据时没有加载进百度地图的(当然我不知道这样说明对不对哈),但百度地图在每次缩放、拖拽时,都会重新渲染页面,导致出现的加载情况不是我们想要的,比如刚才添加的markline不见了,或者所有的markline颜色变得跟当前最后一条添加的markline一样,这些都是应该在这里先处理好,避免它发生。在全部的markline加载完之后,再初始化一下百度地图的数据,那么这个时候恢复百度地图原有的功能,不管怎么渲染,都不会再出现前面的情况。
map.disableScrollWheelZoom(); // 禁用滚轮缩放
map.disableDoubleClickZoom(); // 禁用双击放大
map.disableDragging(); // 禁止拖拽
map.disableAutoResize(); // 禁止自适应容器变化

// 初始化echarts
var fm = '{b}';
var count = 0;
var option = {
  color: [],
  tooltip: {
    trigger: 'item',
    formatter: fm
  },
  series: []
};
// 这里是添加鼠标hover在markline上时,显示的指定格式的内容
if (!$.isEmptyObject(that.options.tooltip)) {
  if (that.options.tooltip.formatter && that.options.tooltip.formatter.indexOf('function') > -1) {
    option.tooltip.formatter = eval('(' + that.options.tooltip.formatter + ')');
  }
}
          // 添加第一层的markline
that.buildMM(null, option, color, geoCoordVar, data, count);
// 百度地图获取echarts容器
var container = BMapExt.getEchartsContainer();
// 初始化
myChart = BMapExt.initECharts(container);
// 第一次设置option
BMapExt.setOption(option, true);


// setInterval的方式动态添加markline,count用来记录当前的层,用以判断是否所有层都已添加
var clear = null;
var count = 0;  
clear = setInterval(function () {
 count++;
  if (count > level.length) {
     clear = window.clearInterval(clear);
     // 第二次设置option,这一步很重要,如果不设置,就会产生前面提到的情况(这真是一个坑,浪费了好多时间)
     BMapExt.setOption(option, true);
     map.enableScrollWheelZoom(); // 允许滚轮缩放
     map.enableDoubleClickZoom(); // 允许双击放大
     map.enableDragging();
   }
   // 添加下一层的markline
   that.buildMM(myChart, option, color, geoCoordVar, data, count);
         
         // 其它操作
         ......
           }, that.options.speed); // speed是指定的添加速度
        });
        
        buildMM: function (myChart, option, color, geoCoordVar, data, count) {
      for (var i = 0; i < data.length; i++) {
        // 在查询结果数据中,level标表示层级关系,这里与count匹配下一层的数据
        if (data[i]['level'] == count) {
          // 生成markline数据
var ml = {
  smooth: true,
  effect: {
    show: false
  },
  data: this.getMM(data[i])['markline'],
  itemStyle: {
    normal: {
      color: color[count],
      borderWidth: 1,
      lineStyle: {
        type: 'solid',
        shadowBlur: 20,
        color: color[count]
      }
    }
  }
};
// 由于每一条markline是一个series,并且结合百度地图,所以这里的参数中,需要注意type=map,mepType=none
var item = {
  name: data[i]['name'],
  type: 'map',
  mapType: 'none',
  data: [],
  markLine: ml,
  geoCoord: geoCoordVar,
  itemStyle: {
    normal: {
      color: color[count],
      borderWidth: 1,
      lineStyle: {
        type: 'solid',
        shadowBlur: 20,
        color: color[count]
      }
    }
  }
};
// 将当前markline的item添加到series中
option.series.push(item);
// 调用addMarkLine,这里请注意看,seriesIdx我设置的都是0,如果不设置0,是会报错的,所以也就是这么简单地解决了第三个问题,因为每一个addMarkLine的markline对echarts来时都是新增的(当然这也只是我个人理解)
   myChart.addMarkLine(
     0,
     ml
   );
        }
      }

    }

以上的代码我没有全部贴出来,但是已经够用了,主要的内容都在里面了。在每个地方基本都有做注释,如有什么说的不对的,欢迎批评指正。好了,就到这了~希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript获取当前ip的代码
May 10 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
Dec 13 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
jquery实现的美女拼图游戏实例
May 04 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
uniapp开发打包多端应用完整方法指南
Dec 24 Javascript
jquery实现简单拖拽效果
Jul 20 #jQuery
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 #Javascript
微信小程序实现时间戳格式转换
Jul 20 #Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 #Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 #jQuery
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 #Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
Jul 20 #Javascript
You might like
分享PHP入门的学习方法
2007/01/02 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
献给php初学者(入门学习经验谈)
2010/10/12 PHP
php文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
php服务器的系统详解
2019/10/12 PHP
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JavaScript的React框架中的JSX语法学习入门教程
2016/03/05 Javascript
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Python正则表达式介绍
2012/08/06 Python
寻找网站后台地址的python脚本
2014/09/01 Python
python xlsxwriter库生成图表的应用示例
2018/03/16 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python numpy元素的区间查找方法
2018/11/14 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
keras分类模型中的输入数据与标签的维度实例
2020/07/03 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Python实现AES加密,解密的两种方法
2020/10/03 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
给医院的感谢信
2015/01/21 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL