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


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

     
     
    1.柱状图-Bar Chart
    适合场景:二维数据集(每个数据点包括两个值x和y),但只有一个维度需要比较。一般是Y轴。柱状图利用柱子的高度,反映数据的差异。
     
    特点:肉眼对高度差异特别敏感,辨别效果非常好。
     
    Demo截图:
    569929.png
     
     
     
    说明:百度EChart申请的专利有一个是可拖动计算。但是这个专利对很多企业级场景的应用是一个鸡肋,一点用都没有。所以大家可以把option里面的calculable 值设置为false
     
     
    2.折线图-Line Chart
    适合场景:
    1. 适合二维的大数据集,多个数据之间有一定的趋势变化
    2. 适合多个二维数据集的比较,趋势对比。
    有时,线图和柱状图一起混合使用,目前在系统里面还是不推荐这种做法。线图和柱状图单个表现的意义不一致。
     
    特点:通过数据之间的比较,更容易辨别2组数据之间的趋势变化
     
    Demo截图:
    800673.png
     
     
    说明:无
     
    3.饼图-Pie Chart
    适合场景:反映某个部分占整体的比重。
     
    特点:阮一峰的翻译中说,饼图是一种应该避免使用的图表,因为人的肉眼对扇形的面积大小不敏感。特别是数据都相近的情况下。
     
    demo截图:
    147871.png
     
    说明:目前EChart不支持对饼图点击之后绑定相关事件,实际项目中有这个需求,比如:点击了某一个扇形区域,会弹出来。然后可以监听一些事件,弹出一个模态框。
    比如下图的效果:
    568602.png
     
     
    未完待续。后面会继续介绍EChart中的散点图、
     
    参考网址:
     
    2.EChart2.0官方网址:http://echarts.baidu.com/
     
    3.Data Visualization with JavaScript:http://jsdatav.is/intro.html

     这篇博客是通过有道云笔记写作的,然后分享出来,我直接复制到博客园。大家可以直接访问:http://note.youdao.com/share/?id=bfce0b658da2eea9d426dccc69ea1cd7&type=note

  • 相关阅读:
    磁盘管理之磁盘组成
    用户管理
    定时任务
    虚拟机安装centos6.9
    linux的文件属性与文件权限
    linux磁盘容量不足
    正则表达式与特殊符号
    linux三剑客与正则案例
    借用父构造函数继承属性
    myeclipse常用快捷键
  • 原文地址:https://www.cnblogs.com/liminjun88/p/4136241.html
Copyright © 2020-2023  润新知