关于我们

恒泰艾普(北京)云技术有限公司,由恒泰艾普集团公司(股票代码:300157)发起创立,是基于云技术、石油勘探...

主营业务

企业私有云的基础建设:为企业提供软硬件实施方案设计、虚拟化产品、管控平台、云盘、云存储、超融合一体机等系列化...

企业文化

▓公司作风“信任”--伙伴互信、共谋云技术“积极”--积极拓展、寻发展格局“给力”--技术给力、建服务基础▓...

公司荣誉

公司融合互联网+专业应用的理念,致力于研发和构建云业务生态圈,为企业提供基于专业技术、云技术、大数据和虚拟现...

公司新闻

近日,中国地质调查局某地质调查中心专家一行光临恒泰艾普(北京)云技术有限公司,针对地质应用云技术解决方案和勘...

公司公告

2017年2月,通过公司项目实施部技术团队的攻关和尝试,使用K5000硬件特性调整穿透脚本,完成了K5000...

视频专区

恒泰艾普(北京)云技术有限公司,由恒泰艾普集团公司(股票代码:300157)发起创立,是基于云技术、石油勘探...

云计算与大数据

ChatUs产品基于石油行业工作习惯,提供数据资源和成果的规划管理、软硬件资源的集中化池化管理、实现跨单位、...

VR/AR/MR

MR空间再造系统将虚拟的三维物体与真实的空间相结合,重新搭建新空间。如汽车制作企业,借助MR技术,在汽车设计...

经济评价与决策

储量经济评价系统,集项目管理、基础参数管理、产能设计、财务评价、不确定性分析、经济风险分析、边界值分析、报告...

开发分析与诊断

系统中融合多项先进数据管理理念和100+常规方法及经验公式。该产品充分筛选了传统的气藏工程方法并吸收了国内外...

地质解释与描述

GeoTalk-cloud一套利用地质和油井数据,结合地震构造解释成果进行单井综合资料、连井地质剖面、油藏剖...

油藏智能分析

系统针对开发中后期的层状水驱砂岩油藏,应用井位、小层数据、构造图等静态资料,快速建立地质模型;综合应用射孔、...

云技术

当谈到有关虚拟桌面存储的时候,多数人会问:“每个用户分配多少空间是合适的?”,但实际上,对桌面虚拟化来说,关...

智慧城市

1.设计思路作为智慧城市的一部分,推进城市地下综合管廊和智慧管廊建设,是创新城市基础设施建设的重要举措,能够...

智慧油田

大数据应用|大数据分析技术在油田开发指标预测中的应用(一)1、前言大数据分析在开发指标预测方面的应用,涉及众...

综合展示与应用

有人说HoloLens标志着微软的重生,也有人说HoloLens是继苹果手机后又一伟大发明,其实这些言论都不...

云技术

中车某市云计算平台,根据用户需要建立混合管理门户和资源监控平台,为企业打造机车实验室云计算平台,帮助企业能够...

智慧城市

北京市某区情景慢病医疗系统以患者为中心,为患者、医生和医疗机构以及监管部门提供便捷的管理平台。

智慧油田

结合中石油辽河油田某采油厂实际情况,采用云超融合一体机作为快速搭建云环境的硬件基础,解决数据资源建设、辅助区...

综合展示与应用

大数据时代下“创新”的智慧互联展示中心,全馆采用数字化、智能化设备,实现国内首批一流的体验展厅。

人才招聘

职位描述:根据智慧城市战略、信息消费等国家政策,结合信息技术发展方向,利用公司信息化技术特点和集团整合的技术...

Echarts插件应用经验分享
小编: Mike·jie 2017-09-01

image.png



Echarts具有丰富的图表类型,支持大数据量的展现等多项优点,完善的API文档能够让用户在实际运用中更加灵活,Echarts还可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器,底层依赖轻量级的Canvas类库ZRender,具有直观,生动,可交互的特点。因为软件基于Canvas技术绘图,所以在3D绘图方面具有绝对的优势。

下面在解决专业展现需求中需要做编程方面的灵活处理,不能完全拿来即用的特点,介绍在公司实施的开发规划系统软件编制实践中的几方面使用经验供分享。


1经验一:图表数据分离处理

       问题提出: Echarts本身的特性是图和数据全部展示在Canvas上,而专业实现中要求的效果是数据独立存放并实现与图联动。

       解决思路:根据功能点实现的思路,针对源码中展现数据的模块进行修改,并对原本相关联的代码进行注释,防止影响效果。

       实现效果:数据和图表分离开,并实现联动效果,当修改下面数据时图表动态改变。


image.png

2经验二:实现图层区域选择功能

       问题提出:需要在图表区通过鼠标选择拟合段,从而利用阿尔普斯递减进行产量预测。

       解决思路:自定义一个鼠标事件,当鼠标对图表区域进行选中的时候,返回当前所选区域值的参数。根据不同的数据下属性的值,对Echarts的图表内容进行更改,需要注意的是在brush事件触发之后会执行两次效果,即:当鼠标按下时和当鼠标松开时,所以在此需要做一个判断,并且对它本身事件的发生进行一个延时处理。

       实现效果:

image.png

3经验三:区域颜色的填充

       问题提出:在某专业展现指标实现中,需要做颜色填充,即在折线图中要求对最大值和最小值之间区域进行颜色填充。而Echarts本身自带的区域填充色功能,都是基于x轴实现。

       解决思路:放弃从改变基于x轴特性对的技术设想,将最大值和最小值两条折线连接起来形成一个首尾呼应的二维数组,直接采取进行面填充颜色。

       实现效果:

image.png

4总结

       Echarts具有技术更新迭代较快和不断完善的功能特性,在云公司不断的实践和探索中,Echarts的技术优势将会不断被挖掘和应用,后续会再分享,请持续关注。

集团公司: 恒泰艾普

微信扫一扫

二维码 2826835168 010-56931012