数据可视化-EChart2.0.0使用中遇到的2个问题

之前项目中都是使用FusionChart和HighChart,基本都是没有购买商业许可。然后现在开发的系统需要交付给客户使用。所以现在图表控件不能直接使用FusionChart和HighChart,通过对比EChart和D3.js,EChart由百度开发,相关的中文文档和问题应该会更好。而且D3.js代码配置和选项相对于EChart也要复杂,所以团队最后决定在图表类库采用EChart。

1.漏斗图,左右斜边不是一条直线

产生原因:

http://echarts.baidu.com/doc/example/funnel1.html 页面给出漏斗图的展现如下所示:

首先漏斗图对数据本身有一定的需求。因为是一个漏斗展现形式,所以最上一层的数据应该比下面一层的数据,然后每层数据都有一个递减的趋势。要不然算不上漏斗图。百度给出EChart的漏斗,看起来确实一个漏斗图,但是它对数据要求的非常严格。基本在商业应用中基本用不了。我在这个页面修改一下数据,修改配置参数配置如下:

{value: 100, name: ‘展现‘},

{value: 90, name: ‘点击‘},

{value: 60, name: ‘访问‘},

{value: 50, name: ‘咨询‘},

{value: 20, name: ‘订单‘}

现在数据不是非常的规整,但是数据还是遵循了从最上一级往下减少的规律。但是呈现出来的漏斗图,现在估计都不敢叫漏斗图,完全变形了。所以这个漏斗图实际在开发过程中是无法使用,用户应该也接受不了这种漏斗图。

效果如下:

其他类库:FusionChart,参考网址:http://www.fusioncharts.com/charts/funnel-chart 效果如下所示:

不管开发者如何修改数据,FusionChart始终保持左右两边斜线是一条直线,它主要是通过改变层的高度来实现的。

解决办法:然后我在github上向百度EChart提出了这个issue,但是好像目前他们也没有修复的打算。所以目前还没有很好的版本,而且在新版本中这个问题会不会解决还不知道。百度kener给出的答复:https://github.com/ecomfe/echarts/issues/807

2.地图2.1.10中地图hover时,值域选择最大值出现数字重叠。

效果如下:

百度EChart给出了解决方法:https://github.com/ecomfe/echarts/issues/1188

项目之前使用的是2.0.0版本,如果只有一条记录,因为我们为了地图的颜色看起来更好看,对值域选择设置了最小值和最大值。考虑到浮点数,最大值值数据里面最大值向上取整,使用Math.ceil();最小值是数据里面最小值向下取整。Math.Floor()方法。但是在2.0.0版本中,EChart有个bug,这个点不会在地图上显示出来。在2.1.10中解决了这个问题。也提醒使用EChart的开发者,需要经常关注EChart官网对EChart的更新。我们当时使用的是2.0.0的版本,现在已经更新到2.1.10版本了。

同时大家可以关注修改记录。http://echarts.baidu.com/doc/changelog.html

参考网址:

1.百度 http://echarts.baidu.com/

2.D3.js http://d3js.org/

ps:本篇博客由有道云笔记编辑,然后复制到博客园发布。

时间: 2024-10-28 15:15:41

数据可视化-EChart2.0.0使用中遇到的2个问题的相关文章

数据可视化-EChart2.0使用总结1

图表是企业级Web开发必不可少的一个功能点.也是“数据可视化的一个具体呈现”.今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库.阮一峰的文章同时也适合产品经理和设计师看,因为很多产品经理和设计师其实不能完全区分哪些地方需要哪些图表去呈现具体的数据. 1.柱状图-Bar Chart 适合场景:二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较.一般是Y轴.柱状图利用柱子的高度,反映数据的差异. 特点:肉眼对高度差异特别敏感,辨别效

深入浅出Zabbix 3.0 -- 第九章 数据可视化

第九章 数据可视化 Zabbix是一个非常灵活.强大的监控系统,它不仅能够监控大量不同类型的数据指标,并为这些数据及数据之间的关联提供了多种可视化工具,通过图形.展示屏.网络拓扑图等将数据直观的展现出来,实时的浏览和查看监控设备的状态. 9.1 图形 Zabbix 3.0中支持三种graphs(图形),即simple graphs(简单图形).ad-hocgraphs(自组图形)和customgraphs(自定义图形). 9.1.1 简单图形 简单图形是Zabbix系统内置的一种方法,为监控项数

RockWare RockWorks v14.0.0.0 (石油化工岩土工程采矿业的可视化分析工具)

Charm.v11.43.0.12 1CD R&L CAD Services Plate'n'Sheet v4.12.12 eVersion build 22.06.2018 1CD Scientific Toolworks Understand 4.0.895 Win32_64 2CD Autodesk EAGLE Premium 9.2.0 Win64 1CD Chasm Consulting VentSim Premium Design v5.1.1.2 1CD Datablast Rel

袋鼠云数据中台专栏2.0 | 数据中台综述:三个维度看数据中台

一.关于数据中台的9个名词 数据中台是什么,当前有很多解释,但是它一定不是哈姆雷特. 新兴的事物总会被各种解读,但是当人们足够熟悉了以后,总会有一个公允的定义得到广泛的认可和接受.这个过程中,最可以用于度量的便是「功能定义」与「业务价值」.袋鼠云认为,数据中台表现出的最主要特征是一种企业数据化体系的架构,而且就目前而言,这种架构是最为有效的一种架构. 目前很多人把数据中台直接等同于企业数据化,AI和大数据,或者是直接的业务价值,甚至企业变革(比如新零售).这些都是不准确的,数据中台的价值被过于放

袋鼠云数据中台专栏2.0 | 数据中台之数据集成

关于袋鼠云数据中台专栏V2.0 数据中台如何定义?企业数据化与数据中台的关系是什么?数据中台如何支撑企业战略转型?袋鼠云近两年来,先后为国内数十家大型龙头企业提供数据中台咨询与实施落地服务,积累了大量的实战经验,同时也在为客户服务的过程中,不断完善和升华自身的数据中台理论体系和实践方法论.希望通过后续文章的分享,与诸位读者交流,共同加快企业全面数据化进程.本专栏每周更新1-2篇,敬请期待~ 数据中台之数据集成 1 在现代企业中,由于使用场景.业务形态.技术选型.开发架构的差异,往往有多个异构的.

如何在Mac上安装可视化系统优化工具Sensei 1.0.0

Sensei是适用于任何运行macOS 10.15(Catalina)或更高版本的Mac的应用程序.如何在Mac上安装可视化系统优化工具Sensei 1.0.0,我们设计Sensei来帮助您优化,监控和清洁Mac,以使其性能最大化.Sensei提供了一些与硬件和软件相关的功能,例如超级易于使用的应用程序卸载程序,快速的磁盘清理程序,电池和存储驱动器的运行状况信息等等. Sensei for Mac https://www.macdown.com/mac/6473.html Sensei mac版

Backbone1.0.0数据验证的变化

0.5.3版本对Model数据验证时,绑定Error就可以了: (function(){ var Model = Backbone.Model.extend({ initialize : function(){ this.bind('error',function(model,error){ alert(error); }); }, validate : function(attrs){ for (var key in attrs){ if (attrs[key] == ''){ return

开发人员学Linux(14):CentOS7安装配置大数据平台Hadoop2.9.0

1.前言 "大云物移"是当年很火热的一个话题,分别指大数据.云计算.物联网和移动互联网,其中大数据领域谈论得多就是Hadoop.当然Hadoop不代表大数据,而是大数据处理领域的一个比较有名的开源框架而已,通常说的大数据包含了大数据的存放.大数据的分析处理及大数据的查询展示,本篇提到的Hadoop只不过是在其中的大数据的分析处理环节起作用,Apache提供了一个开源全家桶,包括了Hadoop.HBase.Zookeeper.Spark.Hive及Pig等一些框架.不过限于篇幅,本篇只介

thymeleaf-extras-db 0.0.1发布,select标签加载数据的新姿势

在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sql并初始化select数据. 项目地址: github gitee 简介 thymeleaf-extras-db是针对thymeleaf的扩展,主要是简化前端select标签数据的获取,让select标签直接从数据库加载数据,而不需要单独写接口,支持缓存. 导入 <dependency> <