ECharts常用图表类型配置详解：柱状图、折线图、饼图与散点图

作者：开源拾贝时间：2026-10-31 08:35:51浏览：378

本文详细介绍ECharts中柱状图、折线图、饼图和散点图的常用配置方法。涵盖柱状图的堆叠与动态排序、折线图的平滑与阶梯效果、饼图的圆环与南丁格尔图，以及散点图的自定义图形与大小映射，帮助开发者快速实现复杂数据可视化效果。

内容篇幅较长，建议先收藏以便后续查阅。

一、柱状图

柱状图通过条形的长度直观展示数据大小，配置时只需将 series 中的 type 设置为 bar 即可。

1. 基本柱状图

1.1 最简单的柱状图

仅需正确设置 type 参数即可生成基础柱状图。

<script type="text/javascript">
    // 因为该demo会经常更该，所以要销毁前一个图表
    echarts.init(document.getElementById('div')).dispose();
    //定义
    var myChart = echarts.init(document.getElementById('div'));
    var option= {
        xAxis:{
            data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
        },
        yAxis:{},
        series :[
            {type:'bar',
            data:[12,31,67,32,13,42,36,]}
        ]
    }
  myChart.setOption(option);
 
</script>

一、柱状图

1.2 多系列柱状图

若在 series 中配置多个 type 为 bar 的系列，图表将同时显示多个柱状图系列。

var option= {
        xAxis:{
            data: ['星期一','星期二','星期三','星期四','星期五','星期六','星期天']
        },
        yAxis:{},
        series :[
            {type:'bar',
            data:[12,31,67,32,13,42,36,]},
            {type:'bar',
            data:[23,15,67,34,17,53,41]}
  ]
    }

一、柱状图

1.3 柱状图的样式设置

（1）柱条样式

可通过 series.itemStyle 配置柱条样式，具体包括：

柱条颜色（color）；
柱条描边颜色（borderColor）、宽度（borderWidth）及样式（borderType）；
柱条圆角半径（barBorderRadius）；
柱条透明度（opacity）；
阴影效果，包括阴影模糊度（shadowBlur）、阴影颜色（shadowColor）及阴影偏移量（shadowOffsetX、shadowOffsetY）。

 series :[
            //单个数据设置柱状样式
            {type:'bar',
            data:[12,31,67,{
                value :34,
                itemStyle:{
                    color: 'green',
                    borderColor: 'backer',
                    opacity: 0.6
                }
            },13,42,36,]},
           //全局设置柱状样式
            {type:'bar',
            data:[23,15,67,34,17,53,41],
                itemStyle:{
                color:'#91cc3',
                    borderColor:'red',
                    borderType:'dashsed',
                    opacity:0.5
                }}
  ]

（2）柱条的宽度和高度

柱条宽度由 barWidth 控制，例如 barWidth: '20%' 表示每个柱条宽度占类目的 20%；高度通过 barHeight 控制，配置方式与宽度一致。

（3）柱条间距

柱条间距分为两类：不同系列在同一类目下的间距 barGap，以及类目与类目之间的间距 barCategoryGap。

type:'bar',
            data:[12,31,67,34,13,42,36,],
            barGap:'20%',
                barCategoryGap:'40%'

例如：barGap: '20%' 表示不同系列在同一类目下柱条间距占类目的 20%，而 barCategoryGap: '40%' 表示每个类目右侧柱条空间占类目的 40%。

（4）为柱条添加背景颜色

可通过设置 showBackground 为 true 开启背景显示，并通过 backgroundStyle 配置背景样式。

 series :[
            //单个数据设置柱状样式
            {type:'bar',
            data:[12,31,67,34,13,42,36,],
            barGap:'20%',
                barCategoryGap:'40%',
                //背景颜色设置
                showBackground:true,
                backgroundstyle:{
                color: 'rgba(220,220,220,0.8)'
                }
            },
           //全局设置柱状样式
            {type:'bar',
            data:[23,15,67,34,17,53,41],
                itemStyle:{
                color:'#91cc3',
                    borderColor:'red',
                    borderType:'dashsed',
                    opacity:0.5
                }}
  ]

一、柱状图

2. 堆叠柱状图

堆叠柱状图不仅展示不同系列的数值，还能体现数值之和的变化。配置时，只需在 series 中为需要堆叠的系列设置相同的 stack 参数即可实现。

series :[
            //单个数据设置柱状样式
            {type:'bar',
            data:[12,31,67,34,13,42,36,],
            barGap:'20%',
                barCategoryGap:'40%',
                //背景颜色设置
                showBackground:true,
                backgroundstyle:{
                color: 'rgba(220,220,220,0.8)'
                },
            stack:'x',
                },
           //全局设置柱状样式
            {type:'bar',
                stack: 'x',
            data:[23,15,67,34,17,53,41],
                itemStyle:{
                color:'#91cc3',
                    borderColor:'red',
                    borderType:'dashsed',
                    opacity:0.5
                }}
  ]

一、柱状图

3. 动态排序柱状图

将柱状图系列的 realtimeSort 设为 true，即可开启该系列的动态排序效果。
将 yAxis.inverse 设为 true，表示 Y 轴从下往上按从小到大排列。
建议将 yAxis.animationDuration 设为 300，表示首次柱条排序动画的时长。
建议将 yAxis.animationDurationUpdate 设为 300，表示后续柱条排序动画的时长。
若只需显示前 n 名，将 yAxis.max 设为 n - 1，否则将显示所有柱条。
建议将 xAxis.max 设为 'dataMax'，以数据最大值作为 X 轴最大值，视觉效果更佳。
如需实时改变标签，需将 series.label.valueAnimation 设为 true。
将 animationDuration 设为 0，表示第一份数据无需从 0 开始动画（若希望从 0 开始，则设为与 animationDurationUpdate 相同的值）。
建议将 animationDurationUpdate 设为 3000，表示每次更新动画的时长，该数值应与调用 setOption 改变数据的频率保持一致。
以 animationDurationUpdate 的频率调用 setInterval 更新数据值，即可显示下一个时间点对应的柱条排序。

var data = [];
for (let i = 0; i < 5; ++i) {
  data.push(Math.round(Math.random() * 200));
}
 
option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    data: ['A', 'B', 'C', 'D', 'E'],
    inverse: true,
    animationDuration: 300,
    animationDurationUpdate: 300,
    max: 2 // only the largest 3 bars will be displayed
  },
  series: [
    {
      realtimeSort: true,
      name: 'X',
      type: 'bar',
      data: data,
      label: {
        show: true,
        position: 'right',
        valueAnimation: true
      }
    }
  ],
  legend: {
    show: true
  },
  animationDuration: 3000,
  animationDurationUpdate: 3000,
  animationEasing: 'linear',
  animationEasingUpdate: 'linear'
};
 
function update() {
  var data = option.series[0].data;
  for (var i = 0; i < data.length; ++i) {
    if (Math.random() > 0.9) {
      data[i] += Math.round(Math.random() * 2000);
    } else {
      data[i] += Math.round(Math.random() * 200);
    }
  }
  myChart.setOption(option);
}
 
setInterval(function() {
  update();
}, 3000);

一、柱状图

动态排序柱状图效果展示。

4. 阶梯瀑布图

可通过堆叠柱状图模拟阶梯瀑布图效果。

假设数据数组中的值表示对前一个值的增减：

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];

即第一个数据为 900，第二个数据 345 表示在 900 的基础上增加了 345。展示为阶梯瀑布图时，可使用三个系列：第一个为不可交互的透明系列，用于实现“悬空”柱状图效果；第二个系列表示正数；第三个系列表示负数。

var data = [900, 345, 393, -108, -154, 135, 178, 286, -119, -361, -203];
var help = [];
var positive = [];
var negative = [];
for (var i = 0, sum = 0; i < data.length; ++i) {
  if (data[i] >= 0) {
    positive.push(data[i]);
    negative.push('-');
  } else {
    positive.push('-');
    negative.push(-data[i]);
  }
 
  if (i === 0) {
    help.push(0);
  } else {
    sum += data[i - 1];
    if (data[i] < 0) {
      help.push(sum + data[i]);
    } else {
      help.push(sum);
    }
  }
}
 
option = {
  title: {
    text: 'Waterfall'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    splitLine: { show: false },
    data: (function() {
      var list = [];
      for (var i = 1; i <= 11; i++) {
        list.push('Oct/' + i);
      }
      return list;
    })()
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'bar',
      stack: 'all',
      itemStyle: {
        normal: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        },
        emphasis: {
          barBorderColor: 'rgba(0,0,0,0)',
          color: 'rgba(0,0,0,0)'
        }
      },
      data: help
    },
    {
      name: 'positive',
      type: 'bar',
      stack: 'all',
      data: positive
    },
    {
      name: 'negative',
      type: 'bar',
      stack: 'all',
      data: negative,
      itemStyle: {
        color: '#f33'
      }
    }
  ]
};

一、柱状图

二、折线图

1. 基础折线图

1.1 最基础的折线图

折线图的实现方式为：横坐标设置为 category，纵坐标设置为 value，同时 series 的 type 为 line。

option={
       xAxis:{
           type:'category',
           data:['A','B','C','D'],
    },
       yAxis:{
         type: 'value',
       },
       series:{
           type:'line',
         data: [23,42,11,28,32],
       },
   }

一、柱状图

1.2 笛卡尔坐标系中的折线图

若希望折线图在横纵坐标上均连续（即笛卡尔坐标系），只需将 series 中的 data 每个数据用包含两个元素的数组表示即可。

  option={
       xAxis:{},
       yAxis:{},
       series:{
           type:'line',
         data: [
             [10,10],
             [30,30],
             [60,10],
             [90,30],
             [120,10]
         ],
       },
   }

一、柱状图

1.3 折线图样式设置

折线样式

折线图样式可通过 lineStyle 设置，包括颜色、线宽、折线类型、阴影、不透明度等。此处以设置颜色（color）、线宽（width）和折线类型（type）为例说明。

type 参数可选值包括：

'solid' 实线
'dashed' 点圆线
'dotted' 点方线

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

一、柱状图

数据点样式

数据点样式可通过 series.itemStyle 指定，包括填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）及不透明度（opacity）等。

1.4 在数据点处显示数值

数据点标签通过 series.label 属性指定。若将 label 下的 show 指定为 true，则表示默认显示数值；若为 false 且 series.emphasis.label.show 为 true，则表示仅当鼠标悬停时显示数值。

例如：鼠标移动时显示数值。

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

又例如：始终显示数值的折线图。

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

一、柱状图

1.5 空数据

使用字符串 '-' 表示空数据，该方式同样适用于其他系列。

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

一、柱状图

2. 堆叠折线图

堆叠折线图通过系列的 stack 属性设置哪些系列堆叠在一起。

option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {data: [10, 22, 33, 23, 19],
                type: 'line',
            stack:'x'},
            {
                data:[23,32,44,32,37],
                type:'line',
                stack: 'x'
            }
        ]
    };

一、柱状图

与普通折线图不同，堆叠折线图通常建议使用区域填充色以明确展示堆叠情况。

 option = {
        xAxis: {
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {},
        series: [
            {data: [10, 22, 33, 23, 19],
                type: 'line',
            stack:'x',
            areaStyle:{}},
            {
                data:[23,32,44,32,37],
                type:'line',
                stack: 'x',
                areaStyle: {}
            }
        ]
    };

一、柱状图

3. 区域面积图

区域面积图将折线与坐标轴之间的空间填充背景色，通过区域面积表达数据。

option = {
        xAxis: {
            type:'category',
            data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {type:'value'},
        series: [
            {data: [10, 22, 28, 23, 19],
                type: 'line',
                label:{show:true},
            areaStyle:{}},
            {
                data:[25, 14, 23, 35, 10],
                type:'line',
                label: {show:true},
                areaStyle: {
                    color:'#232323',
                    opacity:0.5
                }
            }
        ]
    };

一、柱状图

4. 平滑曲线图

使用时，只需将折线图系列的 smooth 属性设置为 true 即可。

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

一、柱状图

5. 阶梯线图

系列的 step 属性用于表征阶梯线图的连接类型，共有三种取值：'start'、'middle' 和 'end'，分别表示在当前点、当前点与下个点的中间点、下个点拐弯。

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]
    }
  ]
};

一、柱状图

三、饼图

饼图主要用于展示不同类目数据在总和中的占比，每个扇形的弧度表示数据数量的比例。

1. 基础饼图

饼图的配置与折线图、柱状图略有不同，无需配置坐标轴，而是将数据名称和值直接写入 series 中。

 option = {
      series:[
          {
              type:'pie',
              data:[
                  {value:34,name:'星期一'},
                  {value:26,name:'星期二'},
                  {value:19,name:'星期三'},
              ],
          }
      ],
    };

一、柱状图

数据为 0 的饼图

默认情况下，若数据值和为 0，会显示平均分割的扇形。例如，若有 4 个数据项且均为 0，则每个扇形为 90°。若希望不显示任何扇形，可将 series.stillShowZeroSum 设为 false。

若希望扇形对应的标签也不显示，可将 series.label.show 设为 false。

2. 圆环图

圆环图同样用于表示数据占总体的比例，中间空余部分可显示额外文字信息。配置时，只需在 series 中设置 radius，形式为 series: ['%','%']，前一个百分比表示镂空部分大小，后一个百分比表示整体大小。

 option = {
      series:[
          {
              type:'pie',
              data:[
                  {value:34,name:'星期一'},
                  {value:26,name:'星期二'},
                  {value:19,name:'星期三'},
              ],
              radius:['40%','70%'],
          }
      ],
    };

一、柱状图

若半径为数组，其中一项为数值，另一项为百分比字符串，可能导致某些分辨率下内半径小于外半径。ECharts 会自动使用较小值作为内半径，但仍需小心避免非预期效果。

1. 在圆环图中间显示高亮扇形对应的文字

option = {
  legend: {
    orient: 'vertical',
    x: 'left',
    data: ['A', 'B', 'C', 'D', 'E']
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 335, name: 'A' },
        { value: 310, name: 'B' },
        { value: 234, name: 'C' },
        { value: 135, name: 'D' },
        { value: 1548, name: 'E' }
      ]
    }
  ]
};

一、柱状图

其中，avoidLabelOverlap 用于控制是否由 ECharts 自动调整标签位置以防止重叠。其默认值为 true，此处不希望标签位置调整到非中间位置，因此需将其设为 false。

这样，圆环图中间将显示高亮数据的 name 值。

3. 南丁格尔图（玫瑰图）

南丁格尔图又称玫瑰图，通常使用弧度相同但半径不同的扇形表示各个类目。

ECharts 可通过将饼图的 series.roseType 值设为 'area' 实现南丁格尔图，其他配置项与饼图相同。

option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 100,
          name: 'A'
        },
        {
          value: 200,
          name: 'B'
        },
        {
          value: 300,
          name: 'C'
        },
        {
          value: 400,
          name: 'D'
        },
        {
          value: 500,
          name: 'E'
        }
      ],
      roseType: 'area'
    }
  ]
};

一、柱状图

四、散点图

散点图由许多“点”组成，这些点可表示数据在坐标系中的位置（如笛卡尔坐标系下的 x、y 坐标，或地图坐标系下的位置）；点的形状、大小、颜色等属性也可映射到数据值，以表现高维数据。

基础散点图

1. 最简单的散点图

以下是一个横坐标为类目轴、纵坐标为数值轴的最简单散点图配置。

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

一、柱状图

2. 笛卡尔坐标系下的散点图

数据的横坐标和纵坐标一同写入 data 中即可。

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
        [10, 5],
        [0, 8],
        [6, 10],
        [2, 12],
        [8, 9]
      ]
    }
  ]
};

一、柱状图

3. 散点图样式设置

图形形状

图形（symbol）指散点图中数据“点”的形状，可选三类：ECharts 内置形状、图片、SVG 路径。

ECharts 内置形状包括：圆形、矩形、圆角矩形、三角形、菱形、大头针形、箭头形，分别对应 'circle'、'rect'、'roundRect'、'triangle'、'diamond'、'pin'、'arrow'。使用内置形状时，只需将 symbol 属性指定为对应形状的字符串即可。

若需指定任意图片，以 'image://' 开头，后跟图片的绝对或相对地址。例如：'image://http://example.com/xxx.png' 或 'image://./xxx.png'。

此外，还支持 SVG 路径作为矢量图形，将 symbol 设置为以 'path://' 开头的 SVG 路径即可。使用矢量图形的好处是图片缩放无锯齿或模糊，且通常文件更小。查看路径的方法为：打开 SVG 文件，找到形如 <path d="M… L…"></path> 的路径，将 d 的值添加在 'path://' 后即可。

以下展示将图形设置为矢量爱心形状的方法。

首先，需准备一个爱心 SVG 文件，可通过矢量编辑软件绘制或从网络下载，内容如下。

<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 51.997 51.997" style="enable-background:new 0 0 51.997 51.997;" xml:space="preserve">
    <path d="M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z"/>
</svg>

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: 20,
      symbol:
        'path://M51.911,16.242C51.152,7.888,45.239,1.827,37.839,1.827c-4.93,0-9.444,2.653-11.984,6.905 c-2.517-4.307-6.846-6.906-11.697-6.906c-7.399,0-13.313,6.061-14.071,14.415c-0.06,0.369-0.306,2.311,0.442,5.478 c1.078,4.568,3.568,8.723,7.199,12.013l18.115,16.439l18.426-16.438c3.631-3.291,6.121-7.445,7.199-12.014 C52.216,18.553,51.97,16.611,51.911,16.242z'
    }
  ]
};

一、柱状图

图形大小

图形大小可通过 series.symbolSize 控制，既可以是表示大小的像素值，也可以是包含两个 number 元素的数组（分别表示宽和高）。

此外，它还可以是一个回调函数，参数格式为：

(value: Array | number, params: Object) => number | Array;

第一个参数为数据值，第二个参数为数据项的其他参数。

在以下示例中，将散点图点的大小设置为与数据值成正比。

option = {
  xAxis: {
    data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  },
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [220, 182, 191, 234, 290, 330, 310],
      symbolSize: function(value) {
        return value / 10;
      }
    }
  ]
};

一、柱状图

总结

本文介绍了 ECharts 数据可视化中常用图表类型的基本使用方法，更多关于 ECharts 常用图表类型的详细内容，请搜索本站历史文章或继续浏览相关文章，感谢支持！

作者最新文章

JS 怎么使用 pako.js 解压 gzip 数据流

2026-11-05 15:54:33

零基础先学JavaScript还是Python？对比学习难度与上手曲线

2026-11-05 14:47:40

JS代码反混淆：主流在线工具与本地软件推荐

2026-11-04 19:28:41

浏览器控制台查看格式化JSON有哪些实用技巧

2026-11-04 16:56:53

JS控制台打印基础：console.log语法与多参数用法

2026-11-04 09:23:11