炫意html5
最早CSS3和HTML5移动技术网站之一

ECharts – 图表类型概述

概述

  • 图表类型通过每个系列的type 决定。
series: [{
name: '销量',  // 系列名称
type: 'bar',  // 系列图表类型
data: [5, 20, 36, 10, 10, 20]  // 系列中的数据内容
}]
  • 每个系列通过 type 决定自己的图表类型:
  • 不同的type的值对应的图表类型如下:
    • type: ‘bar’:柱状/条形图
    • type: ‘line’:折线/面积图
    • type: ‘pie’:饼图
    • type: ‘scatter’:散点(气泡)图
    • type: ‘effectScatter’:带有涟漪特效动画的散点(气泡)
    • type: ‘radar’:雷达图
    • type: ‘tree’:树型图
    • type: ‘treemap’:树型图
    • type: ‘sunburst’:旭日图
    • type: ‘boxplot’:箱形图
    • type: ‘candlestick’:K线图
    • type: ‘heatmap’:热力图
    • type: ‘map’:地图
    • type: ‘parallel’:平行坐标系的系列
    • type: ‘lines’:线图
    • type: ‘graph’:关系图
    • type: ‘sankey’:桑基图
    • type: ‘funnel’:漏斗图
    • type: ‘gauge’:仪表盘
    • type: ‘pictorialBar’:象形柱图
    • type: ‘themeRiver’:主题河流
    • type: ‘custom’:自定义系列

图表类型图例

Line 折线图

  • 直观描述变化趋势
  • 可描述一个或多个项目
  • 可在极坐标下展示

Bar 柱状图(条形图)

  • 直观描述“量”
  • 可描述一个或多个项目
  • 正负条形图-可用于两个项目的直观比较(收入和支出的差值)
  • 堆叠条形图-子项目堆叠(总收入包括不同的收入来源)
  • 瀑布阶梯图-同时显示某一阶段的变化量和总量
  • 可在极坐标下展示

Pie 饼图

  • 显示部分占总数的比例
  • 可同时显示总类和子类的比例

Scatter 散点图

  • 最初用于回归分析
  • 可用于坐标点在直接坐标系,极坐标和地图上的分布
  • 可使用不同颜色和大小的点

Map 地图

  • 路线轨迹
  • 交通
  • 区域分布

Candlestick K线图(阴阳烛图)

  • 运用于股市及期货市场
  • 包含开盘价、最高价、最低价、收盘价

Radar 雷达图(蜘蛛网图)

  • 财务分析报表的一种
  • 可直观显示每个维度上的状态

Boxplot 盒须图(箱形图)

  • 反映原始数据的分布特征
  • 常见于品质管理
  • 包含最大值、最小值、中位数和两个四分位数
  • 排除数据异常值

Heatmap 热力图

  • 用于地图交通
  • 用于网站点击
  • 流量大为红色,流量少为蓝色或无色

Graph 关系图

  • 一般由圆圈和箭头组成
  • 箭头由原因指向结果,由手段指向目的

Tree 树图

  • 利用包含关系表达层次化数据
  • 可以从各个方向展开,也可以是放射状

Treemap 矩形树图

  • 树图的不同展现形式
  • 直观体现同级之间的比较

Sunburst 旭日图(太阳图)

  • 饼图的变体
  • 比饼图展现形式和内容更加丰富

Parallel 平行坐标图

  • 用于对高维几何和多元数据的可视化
  • 多个维度,多个坐标,等长且等距
  • 克服了笛卡尔坐标系难以表达三维以上数据的问题

Sankey 桑基图(桑吉能量分流图、桑吉能量平衡图)

  • 分支宽度对应数据量大小
  • 用于能源、材料成分等数据的可视化分析
  • 始末端分支宽度总和相等

Funnel 漏斗图

  • 用于单流程单向分析

Gauge 仪表盘

  • 拟物化图表
  • 更友好、更人性化

PictorialBar 象形柱图(异性柱状图)

  • 使用图片或特殊形状表示

ThemeRiver 主题河流图

  • 表示事件或主题在一段时间内的变化

日历坐标图

  • 在日历中显示数据

炫意HTML5 » ECharts – 图表类型概述

Java基础教程Android基础教程