在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 相关文章推荐
网站被黑的假象--ARP欺骗之页面中加入一段js
May 16 Javascript
一个JS的日期格式化算法示例
Jul 31 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
Jan 26 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
提升jQuery的性能需要做好七件事
Jan 11 Javascript
基于zepto的移动端轻量级日期插件--date_picker
Mar 04 Javascript
javascript常用经典算法详解
Jan 11 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
jquery实现倒计时代码分享
2014/06/13 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
解析jquery easyui tree异步加载子节点问题
2017/03/08 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
React-Native 组件之 Modal的使用详解
2017/08/08 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
小程序实现自定义导航栏适配完美版
2019/04/02 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python操作MySQL模拟银行转账
2018/03/12 Python
python实现堆和索引堆的代码示例
2018/03/19 Python
详解利用django中间件django.middleware.csrf.CsrfViewMiddleware防止csrf攻击
2018/10/09 Python
Python爬取成语接龙类网站
2018/10/19 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
python数值基础知识浅析
2019/11/19 Python
python实现俄罗斯方块小游戏
2020/04/24 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
针对HTML5的Web Worker使用攻略
2015/07/12 HTML / CSS
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
机电一体化专业应届本科生求职信
2013/09/27 职场文书
公司活动策划方案
2014/01/13 职场文书
学生安全承诺书
2014/05/22 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
顶岗实习协议书
2015/01/29 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书
《植树问题》教学反思
2016/03/03 职场文书
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS