数据可视化-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:本篇博客由有道云笔记编辑,然后复制到博客园发布。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏即时通讯技术

全面掌握移动端主流图片格式的特点、性能、调优等

图片通常是移动端应用流量耗费最多的部分,并且占据着重要的视觉空间。以大家最常用的即时通讯IM应用为例,应用中存在大量的图片数据往来(比如图片消息、用户相册、用户...

1502
来自专栏专知

【下载】Scikit-learn作者新书《Python机器学习导论》, 教程+代码手把手带你实践机器学习算法

【导读】哥伦比亚大学老师Andreas C. Müller同时也是著名机器学习Python包scikit-learn的主要贡献者 Andreas Muller ...

6755
来自专栏Spark学习技巧

Kylin及数据仓库的技术概念详解

一 cube 1, Table cube数据源的hive表的定义,在build cube之前需要进行同步。 2, Data Model 这描述了一个星型...

3208
来自专栏大数据文摘

数学烂也要学AI | 带你造一个经济试用版AI终极必杀器

3739
来自专栏ThoughtWorks

测试矩阵

迷阵 “单元测试,集成测试,端到端测试,安全测试,性能测试,压力测试,契约测试,冒烟测试,验收测试,API测试,UI测试,兼容性测试……” 不知道你是不是像我一...

4559
来自专栏PPV课数据科学社区

近期GitHub上最热门的开源项目(附链接)

来源:开源最前线 2 月份 GitHub 上最热门的开源项目又出炉了,又有哪些新的项目挤进热门榜单了呢,一起来看看。 ……………………………… 1、nocode...

3709
来自专栏人工智能头条

6月Python热文Top10,精选自1000篇文章

1063
来自专栏Albert陈凯

大数据领域的性能测试Benchmark介绍

一、Benchmark简介 Benchmark是一个评价方式,在整个计算机领域有着长期的应用。正如维基百科上的解释“As computer architect...

6463
来自专栏企鹅号快讯

python-pcl以及相关资料分享

PCL(Point Cloud Library)是在吸收了前人点云相关研究基础上建立起来的大型跨平台开源C++编程库,它实现了大量点云相关的通用算法和高效数据结...

7545
来自专栏大数据文摘

交互式数据可视化,在Python中用Bokeh实现

41211

扫码关注云+社区

领取腾讯云代金券