之前项目中都是使用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
 
 
 
参考网址:
 
ps:本篇博客由有道云笔记编辑,然后复制到博客园发布。

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

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

    图表是企业级Web开发必不可少的一个功能点.也是“数据可视化的一个具体呈现”.今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库.阮一峰的文章同时也 ...

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

    接上一篇博客,这篇博客主要讨论EChart里面的散点图.气泡图和雷达图.   4.散点图-Scatter Chart 适合场景:三维数据集,但是只有两个维度需要比较.比较的是X轴和Y轴的数据,第三个数 ...

  3. 数据可视化工具zeppelin安装

    介绍 zeppelin主要有以下功能 数据提取 数据发现 数据分析 数据可视化 目前版本(0.5-0.6)之前支持的数据搜索引擎有如下 安装 环境 centOS 6.6 编译准备工作 sudo yum ...

  4. Superset 0.37 发布——颜值最高的数据可视化平台

    Superset 0.37,增加可视化插件,行级权限控制 使用Superset已经有一段时间,其良好的体验与丰富的图表功能节省了大量的时间.但是对于权限,自定义图表,图表下载,报警邮件一直没有很好的支 ...

  5. Backbone1.0.0数据验证的变化

    0.5.3版本对Model数据验证时,绑定Error就可以了: (function(){ var Model = Backbone.Model.extend({ initialize : functi ...

  6. 删除mssqlserver表数据,使id从0开始

    ********************************* 注意备份好数据! *************************** 1.删除表数据 delete 表名 2.执行 dbcc c ...

  7. T-SQL使用案例——结果数据前面自动补0

    原文:T-SQL使用案例--结果数据前面自动补0 现象: 在开发的过程中,往往需要数字和字符串互转.在转换的过程中,可能需要把1编程00001,这样的格式.实现这种样子是有非常多的方法,本文主要提供一 ...

  8. Ubuntu部署可视化爬虫Portia2.0环境

    部署portia环境官方文档给出的方法太过简单,对于初学者来说是很难根据那一两行字成功部署portia环境的.对于部署portia这只可爱的爬虫的过程还是有很多坑的,主要写一篇portia2.0版本的 ...

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

    在写thymeleaf页面的时候,我为了偷懒,不想为每个select下拉列表框都写一个接口,于是这个懒人jar诞生了.该jar的核心功能是直接通过thymeleaf页面的自定义标签的属性,直接运行sq ...

随机推荐

  1. asp.net 项目Net4.0 在IE10、 IE 11 下出现 “__doPostBack”未定义 的解决办法

    我的项目中,服务器端是Windows Server2008 64位,.net版本是4.0,也遇到了树形结构控件.DropDownList控件等不能调用服务器端代码.最后发现js报错. 错误信息:“__ ...

  2. 【hihoCoder】1288 : Font Size

    题目:http://hihocoder.com/problemset/problem/1288 手机屏幕大小为 W(宽) * H(长),一篇文章有N段,每段有ai个字,要求使得该文章占用的页数不超过P ...

  3. Python实战 :2017国考职业表excel转数据库,再查询生成excel

    最近看2017年国考的职业表,多而杂,不好过滤我想要的信息,特此把它转成Sqlite3数据库,再从数据库里把查询结果导出成excel,方便找职业. (后附上整套代码) 环境:python2.7   x ...

  4. spark 大数据 LR测试

    #!/bin/bash size="120Y*10W"date1=`date +%F_%H-%M-%S`config="spark-submit \ --jars /da ...

  5. C\C++中声明与定义的区别

    声明和定义是完全同的概念,声明是告诉编译器"这个函数或者变量可以在哪找到,它的模样像什么".而定义则是告诉编译器,"在这里建立变量或函数",并且为它们分配内存空 ...

  6. ubuntu 安装与开始学习

    下载地址 http://cn.ubuntu.com/download/ 经验: 1.遇到安装问题,首先尝试解读错误,再使用  ./configure --help  不行再上Stack overflo ...

  7. 搭建spark环境

    1.wget http://www.apache.org/dyn/closer.cgi/spark/spark-1.2.0/spark-1.2.0-bin-hadoop2.4.tgz

  8. 标准数据源访问库 - JayData

    JayData 是一个标准的.跨平台的库和方法,用于访问和操作各种不同的数据源,最适合用于 JavaScript 和 HTML5 应用. 官方网站:http://jaydata.org/  ASP.N ...

  9. 从Facebook跑来阿里的赵海平大叔,你要干啥?

    赵海平在今年三月份来到阿里,听毕玄(他现任主管)说去年五六月份就跟赵海平聊上了.有人问:为啥 BAT 三大巨头,你看中了阿里巴巴?在今天现场达一千多人的分享中赵海平给出了回复:“因为百度和腾讯没找我呗 ...

  10. 给Mac OS X的“逻辑宗卷组”改名

    近日更新了Mac OS X的10.10版本——Yosemite,感觉良好,但当我在打开磁盘工具的时候发现了一个美中不足的地方,磁盘宗卷组的名字居然还是我之前的“Mavericks”,如图: 如何对它进 ...