ECharts中如何绘制电量柱状图表？

发布于：2024-12-07 ⋅ 阅读:(120) ⋅ 点赞:(0)

        在ECharts中绘制电量柱状图表，可以使用类型为pictorialBar的象形柱图来实现，象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。用于有至少一个类目轴或时间轴的直角坐标系上。

        象形柱图可以被想象为：它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。

1.1 常规柱状图               

1.2 电量图表

1.3 多系列电量图表 

        接下介绍，如何将常规的柱状图，变成第二张的电量柱状图表。

一、绘制图表

        首页，将第一张常规的柱状图绘制出来，配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '电量',
      type: 'bar',
      barWidth: '30%'
    }
  ]
}

        如果有些朋友只想看下效果，可以直接在EChart在线演示的编辑器中，将配置项代码贴入查看即可。常规柱状图表演示地址：Examples - Apache ECharts

        当上述配置项执行后，一个常规的柱状图表就呈现出来了。接下来将对配置项进行一系列调整，让它呈现出电量图表。

二、绘制电量图表

2.1 pictorialBar象形柱图

        将type="bar"改为type="pictorialBar"类型，来看看效果，配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '电量',
      type: 'pictorialBar',
      barWidth: '30%'
    }
  ]
}

        此时页面效果变成如下效果，如下图：

2.2 symbol图形类型

        如上图，为此次绘制电量柱状图的相关参数，首先将symbol改为rect，再来看看效果。

        配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '电量',
      type: 'pictorialBar',
      barWidth: '30%',
      symbol: 'rect'
    }
  ]
}

        会神奇的发现，图表又变回常规的柱状图样式了，如下图：

2.3 symbol图形切割

        在修改配置项前，我们先来了解下两个参数，如下表：

序号 参数 描述
1 symbolMargin 图形的两边间隔（『两边』是指其数值轴方向的两边）。
可以是正值，表示间隔大；也可以是负数。当 symbolRepeat 被使用时，负数时能使图形重叠。
2 symbolRepeat 指定图形元素是否重复，值可为：false/null/undefined（不重复），true（使图形元素重复），a number（指定重复次数），'fixed'（一般在用于做背景时有用）

        接下来我们将它们加入到配置项中，再来看下效果。配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '电量',
      type: 'pictorialBar',
      barWidth: '30%',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true
    }
  ]
}

        页面效果开始出现切割效果，有点接近电量图的效果了，如下图：

2.4 调整图形大小

        上面切割后的图形，已经很接近电量图，只要将切割每个区域的高度调低点即可。那么则需要使用到symbolSize参数，它是用来修改图形大小的。

        我们将电量柱状图的宽度调整为50%，调度设置为3，配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '电量',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['50%', 3]
    }
  ]
}

        此时页面则呈现出电量柱状图表效果了，如下图，：

三、多系列电量图

        在EChart中，可以通过丰富的API配置项，添加或修改相关参数，实现不同的图表效果。

3.1 绘制多系列电量图

         当出现多系列的电量柱状图时，又是什么效果呢？此时我们将配项中数据更换为多系列，配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '南京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['30%', 3]
    },
    {
      data: [550, 300, 460, 150, 180, 240, 250, 150, 170, 210, 330, 400],
      name: '上海',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['30%', 3]
    },
    {
      data: [400, 320, 460, 300, 120, 280, 210, 180, 700, 190, 230, 300],
      name: '北京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['30%', 3]
    }
  ]
}

        页面效果：

        大家会发现，多系列图表都在同一基准柱上，简言而之，就是重叠到一起了；那么如何将它们分开呢？这则需要使用图形的定位位置，来解决这个问题。

3.2 图形的定位

        每个象形图形根据基准柱的定位，是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。

       这里使用symbolOffset对电量柱状图位置进行调整即可，注意的是，symbolOffset = [0, 0]中，第一个数值为X轴，第二个数值为Y轴；所以在修改每个柱状位置时，调整X轴即可，Y轴始终为0。

        现在有三个系列数据，所将将第一个往右移'-50%'，第二个不动，第三个往右移'50%'，再来看下效果。 配置项代码如下：

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '南京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['30%', 3],
      symbolOffset: ['-50%', 0]
    },
    {
      data: [550, 300, 460, 150, 180, 240, 250, 150, 170, 210, 330, 400],
      name: '上海',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['30%', 3],
      symbolOffset: [0, 0]
    },
    {
      data: [400, 320, 460, 300, 120, 280, 210, 180, 700, 190, 230, 300],
      name: '北京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: ['30%', 3],
      symbolOffset: ['50%', 0]
    }
  ]
};

        页面效果如下图：

        此时，电量柱状图还是重叠在一起，这是因为我们在设置symbolSize时，使用了百分比，使宽度过和位置位置出现重叠。所以，我们需要将symbolSize和symbolOffset一起调整下，改为实际宽度和位置距离的像素值。

        将电量柱状图的宽度设置为20，第一个往左移-20px，第三个往右移20px，配置项代码如下：

const symbolWidth = 20

option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '南京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: [symbolWidth, 3],
      symbolOffset: [`-${symbolWidth}px`, 0]
    },
    {
      data: [550, 300, 460, 150, 180, 240, 250, 150, 170, 210, 330, 400],
      name: '上海',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: [symbolWidth, 3],
      symbolOffset: [0, 0]
    },
    {
      data: [400, 320, 460, 300, 120, 280, 210, 180, 700, 190, 230, 300],
      name: '北京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: [symbolWidth, 3],
      symbolOffset: [`${symbolWidth}px`, 0]
    }
  ]
}

        页面效果如下图：

        现在，三个系列的电量柱状图则沿自己的基准柱的相对位置显示。

        不过都挨一起还是不太美观，所以需要将它们中间设置出点间隙来；可以将第一个电量柱状图多往左移4像素，第二个电量柱状图往右多移4像素；并且将原来电量柱状宽度调为15。

        配置项代码如下：

const symbolWidth = 15 // 电量柱状宽度
const gap = 4 // 间隙
option = {
  xAxis: {
    type: 'category',
    data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: { },
  series: [
    {
      data: [500, 200, 360, 100, 100, 200, 150, 80, 70, 110, 130, 100],
      name: '南京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: [symbolWidth, 3],
      symbolOffset: [`-${symbolWidth + gap}px`, 0]
    },
    {
      data: [550, 300, 460, 150, 180, 240, 250, 150, 170, 210, 330, 400],
      name: '上海',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: [symbolWidth, 3],
      symbolOffset: [0, 0]
    },
    {
      data: [400, 320, 460, 300, 120, 280, 210, 180, 700, 190, 230, 300],
      name: '北京',
      type: 'pictorialBar',
      symbol: 'rect',
      symbolMargin: 1,
      symbolRepeat: true,
      symbolSize: [symbolWidth, 3],
      symbolOffset: [`${symbolWidth + gap}px`, 0]
    }
  ]
}

        页面效果如下图：

        此篇则讲到这里，希望对大家有所帮助！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布