ECharts 图表类型

本文档介绍 ECharts 中常见的图表类型及其配置方式。

柱状图（Bar）

柱状图（或称条形图）是一种通过柱形的长度来表现数据大小的常用图表类型。设置柱状图的方式，是将 series 的 type 设为 'bar'。

最简单的柱状图

javascript

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    }
  ]
}

多系列柱状图

javascript

option = {
  xAxis: {
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 27, 28, 25]
    },
    {
      type: 'bar',
      data: [26, 24, 18, 22, 23, 20, 27]
    }
  ]
}

柱条样式设置

通过 series.itemStyle 设置柱条样式：

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [10, 22, 28, 43, 49],
      itemStyle: {
        barBorderRadius: 5,
        borderWidth: 1,
        borderType: 'solid',
        borderColor: '#73c0de',
        shadowColor: '#5470c6',
        shadowBlur: 3
      }
    }
  ]
}

柱条宽度和间距

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      data: [23, 24, 18, 25, 18],
      barWidth: '20%',        // 柱条宽度
      barGap: '20%',          // 不同系列间距
      barCategoryGap: '40%'   // 类目间距
    },
    {
      type: 'bar',
      data: [12, 14, 9, 9, 11]
    }
  ]
}

柱条背景色

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(220, 220, 220, 0.8)'
      }
    }
  ]
}

堆叠柱状图

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'bar',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'bar',
      stack: 'x'
    }
  ]
}

动态排序柱状图

从 ECharts 5 开始内置支持动态排序柱状图：

javascript

option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2
  },
  series: [
    {
      realtimeSort: true,
      name: 'X',
      type: 'bar',
      data: [23, 24, 18, 25, 27],
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  animationDuration: 3000,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
}

折线图（Line）

折线图主要用来展示数据项随着时间推移的趋势或变化。

最简单的折线图

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
}

笛卡尔坐标系中的折线图

javascript

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      data: [
        [20, 120],
        [50, 200],
        [40, 50]
      ],
      type: 'line'
    }
  ]
}

折线样式设置

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      lineStyle: {
        color: 'green',
        width: 4,
        type: 'dashed'
      }
    }
  ]
}

数据点标签

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      label: {
        show: true,
        position: 'bottom',
        fontSize: 20
      }
    }
  ]
}

空数据处理

使用 '-' 表示空数据：

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [0, 22, '-', 23, 19],
      type: 'line'
    }
  ]
}

堆叠折线图

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'line',
      stack: 'x',
      areaStyle: {}
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'line',
      stack: 'x',
      areaStyle: {}
    }
  ]
}

区域面积图

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      areaStyle: {}
    }
  ]
}

平滑曲线图

javascript

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 23, 19],
      type: 'line',
      smooth: true
    }
  ]
}

阶梯线图

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Step Start',
      type: 'line',
      step: 'start',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Step Middle',
      type: 'line',
      step: 'middle',
      data: [220, 282, 201, 234, 290, 430, 410]
    },
    {
      name: 'Step End',
      type: 'line',
      step: 'end',
      data: [450, 432, 401, 454, 590, 530, 510]
    }
  ]
}

饼图（Pie）

饼图主要用于表现不同类目的数据在总和中的占比。

基础饼图

javascript

option = {
  series: [
    {
      type: 'pie',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
}

自定义饼图样式

javascript

option = {
  series: [
    {
      type: 'pie',
      radius: '50%',
      center: ['50%', '50%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
}

环形图

javascript

option = {
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
}

玫瑰图

javascript

option = {
  series: [
    {
      type: 'pie',
      radius: [30, 110],
      roseType: 'area',
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '邮件营销' },
        { value: 234, name: '联盟广告' },
        { value: 135, name: '视频广告' },
        { value: 1548, name: '搜索引擎' }
      ]
    }
  ]
}

散点图（Scatter）

散点图可以用来展现数据的分布情况。

基础散点图

javascript

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
        [10.0, 8.04],
        [8.07, 6.95],
        [13.0, 7.58],
        [9.05, 8.81],
        [11.0, 8.33]
      ]
    }
  ]
}

气泡图

通过 symbolSize 映射第三个维度：

javascript

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      symbolSize: function (data) {
        return data[2] / 10
      },
      data: [
        [10.0, 8.04, 100],
        [8.07, 6.95, 200],
        [13.0, 7.58, 150],
        [9.05, 8.81, 80],
        [11.0, 8.33, 120]
      ]
    }
  ]
}

雷达图（Radar）

雷达图主要用于表现多变量的数据对比。

javascript

option = {
  radar: {
    indicator: [
      { name: '销售', max: 6500 },
      { name: '管理', max: 16000 },
      { name: '信息技术', max: 30000 },
      { name: '客服', max: 38000 },
      { name: '研发', max: 52000 },
      { name: '市场', max: 25000 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: '预算分配'
        }
      ]
    }
  ]
}

仪表盘（Gauge）

仪表盘适合用于展示单个数据指标的完成情况。

javascript

option = {
  series: [
    {
      type: 'gauge',
      detail: { formatter: '{value}%' },
      data: [
        { value: 50, name: '完成率' }
      ]
    }
  ]
}

漏斗图（Funnel）

漏斗图适用于展示数据的转化过程。

javascript

option = {
  series: [
    {
      type: 'funnel',
      data: [
        { value: 100, name: '展现' },
        { value: 80, name: '点击' },
        { value: 60, name: '访问' },
        { value: 40, name: '咨询' },
        { value: 20, name: '订单' }
      ]
    }
  ]
}

热力图（Heatmap）

热力图通过颜色来表现数据的大小。

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'category',
    data: ['Morning', 'Afternoon', 'Evening']
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true
  },
  series: [
    {
      type: 'heatmap',
      data: [
        [0, 0, 10], [1, 0, 20], [2, 0, 30],
        [0, 1, 40], [1, 1, 50], [2, 1, 60]
      ]
    }
  ]
}

关系图（Graph）

关系图用于展示节点和边的关系数据。

javascript

option = {
  series: [
    {
      type: 'graph',
      layout: 'force',
      data: [
        { name: 'Node 1' },
        { name: 'Node 2' },
        { name: 'Node 3' }
      ],
      links: [
        { source: 'Node 1', target: 'Node 2' },
        { source: 'Node 2', target: 'Node 3' }
      ]
    }
  ]
}

K线图（Candlestick）

K线图主要用于展示股票、期货等金融数据。

基础 K 线图

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value',
    scale: true
  },
  series: [
    {
      type: 'candlestick',
      data: [
        // [开盘, 收盘, 最低, 最高]
        [2320.26, 2302.6, 2287.3, 2362.94],
        [2300, 2291.3, 2288.26, 2308.38],
        [2295.35, 2346.5, 2295.35, 2346.92],
        [2347.22, 2358.98, 2337.35, 2363.8],
        [2360.75, 2382.48, 2347.89, 2383.76]
      ]
    }
  ]
}

K 线图配色

javascript

option = {
  series: [{
    type: 'candlestick',
    itemStyle: {
      color: '#ef232a',        // 阳线填充色
      color0: '#14b143',       // 阴线填充色
      borderColor: '#ef232a',  // 阳线边框色
      borderColor0: '#14b143'  // 阴线边框色
    },
    data: [
      [2320.26, 2302.6, 2287.3, 2362.94],
      [2300, 2291.3, 2288.26, 2308.38]
    ]
  }]
}

K 线图配合移动平均线

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五']
  },
  yAxis: {
    type: 'value',
    scale: true
  },
  series: [
    {
      name: 'K线',
      type: 'candlestick',
      data: [
        [2320.26, 2302.6, 2287.3, 2362.94],
        [2300, 2291.3, 2288.26, 2308.38],
        [2295.35, 2346.5, 2295.35, 2346.92],
        [2347.22, 2358.98, 2337.35, 2363.8],
        [2360.75, 2382.48, 2347.89, 2383.76]
      ]
    },
    {
      name: 'MA5',
      type: 'line',
      data: [2315, 2322, 2328, 2335, 2345],
      smooth: true,
      lineStyle: { width: 1 }
    }
  ]
}

地图（Map）

地图用于展示地理数据分布。

中国地图

javascript

// 首先注册地图数据
echarts.registerMap('china', chinaJson)
 
option = {
  geo: {
    map: 'china',
    roam: true,           // 开启缩放和平移
    zoom: 1.2,
    label: {
      show: true
    },
    itemStyle: {
      areaColor: '#f3f3f3',
      borderColor: '#999'
    },
    emphasis: {
      itemStyle: {
        areaColor: '#e0e0e0'
      }
    }
  },
  series: [
    {
      type: 'map',
      map: 'china',
      data: [
        { name: '北京', value: 35000 },
        { name: '上海', value: 42000 },
        { name: '广东', value: 58000 }
      ]
    }
  ]
}

地图 + 散点图

javascript

option = {
  geo: {
    map: 'china',
    roam: true
  },
  series: [
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      data: [
        { name: '北京', value: [116.46, 39.92, 340] },
        { name: '上海', value: [121.48, 31.22, 420] }
      ],
      symbolSize: function(val) {
        return val[2] / 10
      }
    }
  ]
}

地图 + 热力图

javascript

option = {
  visualMap: {
    min: 0,
    max: 60000,
    calculable: true,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d']
    }
  },
  geo: {
    map: 'china',
    roam: true
  },
  series: [{
    type: 'map',
    map: 'china',
    data: [
      { name: '北京', value: 35000 },
      { name: '上海', value: 42000 }
    ]
  }]
}

旭日图（Sunburst）

旭日图用于展示层级数据的占比关系。

基础旭日图

javascript

option = {
  series: {
    type: 'sunburst',
    data: [
      {
        name: '爷爷',
        children: [
          {
            name: '父亲',
            children: [
              { name: '儿子', value: 10 },
              { name: '女儿', value: 5 }
            ]
          },
          {
            name: '叔叔',
            children: [
              { name: '堂兄', value: 8 },
              { name: '堂弟', value: 6 }
            ]
          }
        ]
      }
    ],
    radius: [60, '90%'],
    label: {
      rotate: 'radial'
    }
  }
}

旭日图样式配置

javascript

option = {
  series: [{
    type: 'sunburst',
    data: data,
    radius: [0, '95%'],
    sort: null,
    emphasis: {
      focus: 'ancestor'
    },
    levels: [
      {},  // 第 0 层
      {
        // 第 1 层
        r0: '15%',
        r: '35%',
        itemStyle: { borderWidth: 2 },
        label: { rotate: 'tangential' }
      },
      {
        // 第 2 层
        r0: '35%',
        r: '70%',
        label: { align: 'right' }
      },
      {
        // 第 3 层
        r0: '70%',
        r: '72%',
        label: { position: 'outside', padding: 3, silent: false }
      }
    ]
  }]
}

桑基图（Sankey）

桑基图用于展示数据流向。

javascript

option = {
  series: {
    type: 'sankey',
    layout: 'none',
    emphasis: {
      focus: 'adjacency'
    },
    data: [
      { name: 'a' },
      { name: 'b' },
      { name: 'c' },
      { name: 'd' }
    ],
    links: [
      { source: 'a', target: 'b', value: 5 },
      { source: 'a', target: 'c', value: 3 },
      { source: 'b', target: 'd', value: 4 },
      { source: 'c', target: 'd', value: 3 }
    ]
  }
}

矩形树图（Treemap）

矩形树图用于展示层级数据的占比关系。

javascript

option = {
  series: [
    {
      type: 'treemap',
      data: [
        {
          name: '节点A',
          value: 10,
          children: [
            { name: '节点A-a', value: 4 },
            { name: '节点A-b', value: 6 }
          ]
        },
        {
          name: '节点B',
          value: 20,
          children: [
            { name: '节点B-a', value: 10 },
            { name: '节点B-b', value: 10 }
          ]
        }
      ]
    }
  ]
}

箱形图（Boxplot）

箱形图用于展示数据分布情况。

javascript

option = {
  xAxis: {
    type: 'category',
    data: ['expr1', 'expr2', 'expr3', 'expr4']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'boxplot',
      data: [
        // [最小值, Q1, 中位数, Q3, 最大值]
        [655, 850, 940, 980, 1075],
        [720, 855, 925, 965, 1010],
        [700, 875, 955, 985, 1100],
        [650, 790, 890, 960, 1100]
      ]
    }
  ]
}

主题河流图（ThemeRiver）

主题河流图用于展示事件或主题随时间变化。

javascript

option = {
  series: {
    type: 'themeRiver',
    data: [
      ['2015/11/08', 10, 'DQ'],
      ['2015/11/09', 15, 'DQ'],
      ['2015/11/08', 5, 'TY'],
      ['2015/11/09', 10, 'TY'],
      ['2015/11/08', 15, 'SS'],
      ['2015/11/09', 20, 'SS']
    ]
  }
}

图表选择指南

按数据类型选择

数据类型	推荐图表
对比类	柱状图、条形图、雷达图
趋势类	折线图、面积图
占比类	饼图、环形图、旭日图、矩形树图
分布类	散点图、热力图、箱形图
关系类	关系图、桑基图
地理类	地图、热力地图
层级类	旭日图、矩形树图、树图
流程类	漏斗图、桑基图

按场景选择

场景	推荐图表
数据仪表盘	仪表盘、柱状图、折线图
销售分析	柱状图、饼图、漏斗图
用户行为	热力图、漏斗图、路径图
金融数据	K线图、折线图、面积图
地理分布	地图、散点地图
组织架构	树图、关系图

ECharts 图表类型

柱状图（Bar）

最简单的柱状图

多系列柱状图

柱条样式设置

柱条宽度和间距

柱条背景色

堆叠柱状图

动态排序柱状图

折线图（Line）

最简单的折线图

笛卡尔坐标系中的折线图

折线样式设置

数据点标签

空数据处理

堆叠折线图

区域面积图

平滑曲线图

阶梯线图

饼图（Pie）

基础饼图

自定义饼图样式

环形图

玫瑰图

散点图（Scatter）

基础散点图

气泡图

雷达图（Radar）

仪表盘（Gauge）

漏斗图（Funnel）

热力图（Heatmap）

关系图（Graph）

K线图（Candlestick）

基础 K 线图

K 线图配色

K 线图配合移动平均线

地图（Map）

中国地图

地图 + 散点图

地图 + 热力图

旭日图（Sunburst）

基础旭日图

旭日图样式配置

桑基图（Sankey）

矩形树图（Treemap）

箱形图（Boxplot）

主题河流图（ThemeRiver）

图表选择指南

按数据类型选择

按场景选择

相关链接