专栏首页快乐八哥数据可视化-EChart2.0使用总结1

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

图表是企业级Web开发必不可少的一个功能点。也是“数据可视化的一个具体呈现”。今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库。阮一峰的文章同时也适合产品经理和设计师看,因为很多产品经理和设计师其实不能完全区分哪些地方需要哪些图表去呈现具体的数据。

1.柱状图-Bar Chart

适合场景:二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。一般是Y轴。柱状图利用柱子的高度,反映数据的差异。

特点:肉眼对高度差异特别敏感,辨别效果非常好。

Demo截图:

demo地址:http://echarts.baidu.com/doc/example/bar1.html

说明:百度EChart申请的专利有一个是可拖动计算。但是这个专利对很多企业级场景的应用是一个鸡肋,一点用都没有。所以大家可以把option里面的calculable 值设置为false

2.折线图-Line Chart

适合场景:

  1. 适合二维的大数据集,多个数据之间有一定的趋势变化
  2. 适合多个二维数据集的比较,趋势对比。

有时,线图和柱状图一起混合使用,目前在系统里面还是不推荐这种做法。线图和柱状图单个表现的意义不一致。

特点:通过数据之间的比较,更容易辨别2组数据之间的趋势变化

Demo截图:

demo地址:http://echarts.baidu.com/doc/example/line1.html

说明:无

3.饼图-Pie Chart

适合场景:反映某个部分占整体的比重。

特点:阮一峰的翻译中说,饼图是一种应该避免使用的图表,因为人的肉眼对扇形的面积大小不敏感。特别是数据都相近的情况下。

demo截图:

demo地址:http://echarts.baidu.com/doc/example/pie1.html

说明:目前EChart不支持对饼图点击之后绑定相关事件,实际项目中有这个需求,比如:点击了某一个扇形区域,会弹出来。然后可以监听一些事件,弹出一个模态框。

比如下图的效果:

未完待续。后面会继续介绍EChart中的散点图、

参考网址:

1.数据可视化:基本图表http://www.ruanyifeng.com/blog/2014/11/basic-charts.html

2.EChart2.0官方网址:http://echarts.baidu.com/

3.Data Visualization with JavaScript:http://jsdatav.is/intro.html

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Angular企业级开发(6)-使用Gulp构建和打包前端项目

    1.gulp介绍 基于流的前端自动化构建工具,利用gulp可以提高前端开发效率,特别是在前后端分离的项目中。使用gulp能完成以下任务: 压缩html、css和...

    八哥
  • 使用Docker-Docker for Web Developers(2)

    1. 使用镜像 1.1 在Docker Hub上查找镜像 我们查找一下之前博客里面,推送到Docker Hub里面的bage88/docker-demo,能看到...

    八哥
  • 使用jQuery UI的draggable和droppable完成拖拽功能--介绍

    第一部分--拖拽介绍 在https://code.csdn.net/2013ossurvey中最后一个开源项目就是zTree,一方面是因为自己看到有项目中使用了...

    八哥
  • 智能威胁分析之图数据构建

    RSAC大会的热度似乎持续了一整个北京的春天,直播、新闻、技术解读、研讨活动让人应接不暇。从RSA大会官网上查询今年“Better.”主题的由来和背景,发现会议...

    绿盟科技研究通讯
  • 服务器-Nginx模块化结构

    习惯上将Nginx分为:核心模块、标准模块、可选HTTP模块、邮件服务模块和第三方模块五大类。

    小二三不乌
  • AI 技术讲座精选:利用深度学习分析医学图像

    【AI100 导读】当下深度学习的研究领域仍然停留在通用图像的层面上,但我们的目标是将这些研究应用于医学图像,提升医疗保健行业的服务水平。在这篇文章中,作者会从...

    AI科技大本营
  • 集装箱时代的分布式记录(第3部分)

    你参加集装箱革命吗?开始利用Platform9对Kubernetes部署的最终指导来利用容器管理 。

  • 关于软件开发,都应该知道的10个常识

    2011年,马克·安德列森(Marc Andreessen)写了一篇文章,预言“软件吞噬世界”。观点主要有两个:第一,许多传统业务正在被软件公司所取代;第二,所...

    半吊子全栈工匠
  • 深度学习性能提升的诀窍

    克服过拟合和提高泛化能力的20条技巧和诀窍 你是如何提升深度学习模型的效果? 这是我经常被问到的一个问题。 有时候也会换一种问法: 我该如何提高模型的准...

    CSDN技术头条
  • 【快讯】TARS于“中国PHP大会”首次全面发布PHP版本

    腾讯开源

扫码关注云+社区

领取腾讯云代金券