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 常用图表类型的详细内容，请搜索本站历史文章或继续浏览相关文章，感谢支持！

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

一、柱状图

1. 基本柱状图

1.1 最简单的柱状图

1.2 多系列柱状图

1.3 柱状图的样式设置

2. 堆叠柱状图

3. 动态排序柱状图

4. 阶梯瀑布图

二、折线图

1. 基础折线图

1.1 最基础的折线图

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

1.3 折线图样式设置

1.4 在数据点处显示数值

1.5 空数据

2. 堆叠折线图

3. 区域面积图

4. 平滑曲线图

5. 阶梯线图

三、饼图

1. 基础饼图

2. 圆环图

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

四、散点图

基础散点图

1. 最简单的散点图

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

3. 散点图样式设置

总结

实用工具推荐