基于Echarts实现绘制立体柱状图的示例代码

Editor · 发表于 2023-5-4 11:46:23

效果图
前言
大家好，我是梁木由。之前在做大屏可视化项目时，UI设计了一个立体形状的柱状图，根据之前做的一些图表的项目没有能复用的，没有做过这种立体形状的图表，打开echarts也没看到有相关的demo，看下如何实现

实现方法
先写一个常规的柱状图

2023223142703642.png

在这个基础上进行改进

#main{
  width: 500px;
  height: 350px;
}

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  xAxis: {
axisTick: {
   show: false
},
nameTextStyle: {
   color: '#fff'
},
data: ['春节', '元宵节', '端午节', '中秋节']
  },
  legend: {
data: ['春节', '元宵节', '端午节', '中秋节'],
right: '25',
top: '18',
icon: 'rect',
itemHeight: 10,
itemWidth: 10,
textStyle: {
   color: '#000'
}
  },
  yAxis: {
type: 'value',
axisLabel: {
   color: '#000'
},
splitLine: {
   show: true,
   lineStyle: {
      type: 'dashed',
      color: ['#ccc']
   }
}
  },
  series: [
{
   data: [
      { name: '春节', value: 24 },
      { name: '端午节', value: 44 },
      { name: '中秋节', value: 32 },
      { name: '春节', value: 50 }
   ],
   barWidth: 30,
   type: 'bar'
}
  ]
};

option && myChart.setOption(option);

echarts的配置选项
首先呢我们看下echarts的配置选项

2023223142703643.png

那我们看所有的type 没有立体柱状图的类型，但是呢我们看最后一项type: custom，什么意思呢，自定义系列，那就是说我们可以选择custom 类型来实现立体柱状图
renderItem
type为custom可以自定义系列图形元素渲染。
根据查看配置项，发现有一个renderItem函数，custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem
看下renderItem函数的介绍
renderItem 函数提供了两个参数：
params：包含了当前数据信息和坐标系的信息。
{
context: // {Object} 一个可供开发者暂存东西的对象。生命周期只为：当前次的渲染。
seriesId: // {string} 本系列 id。
seriesName: // {string} 本系列 name。
seriesIndex: // {number} 本系列 index。
dataIndex: // {number} 数据项的 index。
dataIndexInside: // {number} 数据项在当前坐标系中可见的数据的 index（即 dataZoom 当前窗口中的数据的 index）。
dataInsideLength: // {number} 当前坐标系中可见的数据长度（即 dataZoom 当前窗口中的数据数量）。
actionType: // {string} 触发此次重绘的 action 的 type。
coordSys: // 不同的坐标系中，coordSys 里的信息不一样，含有如下这些可能：
coordSys: {
      type: 'cartesian2d',
      x: // {number} grid rect 的 x
      y: // {number} grid rect 的 y
      width: // {number} grid rect 的 width
      height: // {number} grid rect 的 height
},
coordSys: {
      type: 'calendar',
      x: // {number} calendar rect 的 x
      y: // {number} calendar rect 的 y
      width: // {number} calendar rect 的 width
      height: // {number} calendar rect 的 height
      cellWidth: // {number} calendar cellWidth
      cellHeight: // {number} calendar cellHeight
      rangeInfo: {
         start: // calendar 日期开端
         end: // calendar 日期结尾
         weeks: // calendar 周数
         dayCount: // calendar 日数
      }
},
coordSys: {
      type: 'geo',
      x: // {number} geo rect 的 x
      y: // {number} geo rect 的 y
      width: // {number} geo rect 的 width
      height: // {number} geo rect 的 height
      zoom: // {number} 缩放的比率。如果没有缩放，则值为 1。例如 0.5 表示缩小了一半。
},
coordSys: {
      type: 'polar',
      cx: // {number} polar 的中心坐标
      cy: // {number} polar 的中心坐标
      r: // {number} polar 的外半径
      r0: // {number} polar 的内半径
},
coordSys: {
      type: 'singleAxis',
      x: // {number} singleAxis rect 的 x
      y: // {number} singleAxis rect 的 y
      width: // {number} singleAxis rect 的 width
      height: // {number} singleAxis rect 的 height
}
}
其中，关于 dataIndex 和 dataIndexInside 的区别：

dataIndex 指的 dataItem 在原始数据中的 index。

dataIndexInside 指的是 dataItem 在当前数据窗口中的 index。
[renderItem.arguments.api] 中使用的参数都是 dataIndexInside 而非 dataIndex，因为从 dataIndex 转换成 dataIndexInside 需要时间开销。
api：是一些开发者可调用的方法集合。
所有属性
{[value], [coord] , [size] , [style] , [styleEmphasis] , [visual] , [barLayout] , [currentSeriesIndices] , [font], [getWidth] , [getHeight], [getZr], [getDevicePixelRatio]}

我们使用renderItem来自定义元素会使用到renderItem.api的三个方法，先来介绍下这三个方法

[api.value(...)]，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。

[api.coord(...)]，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。

[api.size(...)] ，表示得到坐标系上一段数值范围对应的长度。
看下代码实现
series:  getSeriesData()

function getSeriesData() {
  const data = [];
  seriesData.forEach((item, index) => {
data.push(
   {
      type: 'custom',
      name: item.label,
      renderItem: function (params, api) {
      return getRenderItem(params, api);
      },
      data: item.value,
   }
)
  })
  return data
}

function getRenderItem(params, api) {
  // params.seriesIndex表示本系列 index
  const index = params.seriesIndex;
  // api.coord() 坐标转换计算
  // api.value() 取出当前项中的数值
  let location = api.coord([api.value(0) + index, api.value(1)]);
  // api.size() 坐标系数值范围对应的长度
  var extent = api.size([0, api.value(1)]);
  return {
type: 'rect',
shape: {
   x: location[0] - 20 / 2,
   y: location[1],
   width: 20,
   height: extent[1]
},
style: api.style()
  };
}
来看下我们的实现效果

2023223142703644.png

柱状图效果出来了，那来看下怎么将柱状图改为立体图
return_group
我看到renderItem可以返回一个return_group类型，来看看这个类型的介绍

group 是唯一的可以有子节点的容器。

group 可以用来整体定位一组图形元素。
那就是说我们可以将设定一组图形元素然后组合到一起形成立体柱状图
那么问题又来了怎么设定一组图形元素呢？
graphic
这个呢是关于图形相关的方法，再来了解两个API
graphic.extendShape
创建一个新的图形元素
graphic.registerShape
注册一个开发者定义的图形元素
创建图形元素
那我们先来创建一个新的图形元素
const leftRect = echarts.graphic.extendShape({
shape: {
   x: 0,
   y: 0,
   width: 19, //柱状图宽
   zWidth: 8, //阴影折角宽
   zHeight: 4, //阴影折角高
},
buildPath: function (ctx, shape) {
   const api = shape.api;
   const xAxisPoint = api.coord([shape.xValue, 0]);
   const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
   const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
   const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
   const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
   const p4 = [shape.x + shape.width / 2, shape.y];

   ctx.moveTo(p0[0], p0[1]);
   ctx.lineTo(p1[0], p1[1]);
   ctx.lineTo(p2[0], p2[1]);
   ctx.lineTo(p3[0], p3[1]);
   ctx.lineTo(p4[0], p4[1]);
   ctx.lineTo(p0[0], p0[1]);
   ctx.closePath();
},
  });

const rightRect = echarts.graphic.extendShape({
shape: {
   x: 0,
   y: 0,
   width: 18,
   zWidth: 15,
   zHeight: 8,
},
buildPath: function (ctx, shape) {
   const api = shape.api;
   const xAxisPoint = api.coord([shape.xValue, 0]);
   const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
   const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
   const p4 = [shape.x + shape.width / 2, shape.y];
   const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
   const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight / 2];
   const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
   ctx.moveTo(p4[0], p4[1]);
   ctx.lineTo(p3[0], p3[1]);
   ctx.lineTo(p5[0], p5[1]);
   ctx.lineTo(p6[0], p6[1]);
   ctx.lineTo(p4[0], p4[1]);

   ctx.moveTo(p4[0], p4[1]);
   ctx.lineTo(p6[0], p6[1]);
   ctx.lineTo(p7[0], p7[1]);
   ctx.lineTo(p1[0], p1[1]);
   ctx.lineTo(p4[0], p4[1]);
   ctx.closePath();
},
  });
注册图形元素
echarts.graphic.registerShape('leftRect', leftRect);
echarts.graphic.registerShape('rightRect', rightRect);
再来修改一下return_group
function getRenderItem(params, api) {
  const index = params.seriesIndex;
  let location = api.coord([api.value(0) + index, api.value(1)]);
  var extent = api.size([0, api.value(1)]);
  return {
type: 'group',
children: [
   {
      type: 'leftRect',
      shape: {
      api,
      xValue: api.value(0) + index,
      yValue: api.value(1),
      x: location[0],
      y: location[1]
      },
      style: api.style()
   },
   {
      type: 'rightRect',
      shape: {
      api,
      xValue: api.value(0) + index,
      yValue: api.value(1),
      x: location[0],
      y: location[1]
      },
      style: api.style()
   }
]
  };
}
再来看下效果

2023223142703645.png

可以看到立体形状的柱状图已经实现了，那还有个缺点就是颜色需要再按照设计图来改改
const colors = [
[
   { offset: 0, color: 'rgba(26, 132, 191, 1)' },
   { offset: 1, color: 'rgba(52, 163, 224, 0.08)' },
],
[
   { offset: 0, color: 'rgba(137, 163, 164, 1)' },
   { offset: 1, color: 'rgba(137, 163, 164, 0.08)' },
],
[
   { offset: 0, color: 'rgba(44, 166, 166, 1)' },
   { offset: 1, color: 'rgba(44, 166, 166, 0.08)' },
],
[
   { offset: 0, color: 'rgba(34, 66, 186, 1)' },
   { offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
],
  ];

//在getSeriesData添加itemStyle
itemStyle: {
   color: () => {
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
   },
},
效果图

2023223142703646.png

以上就是基于Echarts实现绘制立体柱状图的示例代码的详细内容，更多关于Echarts绘制立体柱状图的资料请关注知鸟论坛其它相关文章！

戏做顿 · 发表于 2023-6-28 20:57:53

我看不错噢谢谢楼主！知鸟论坛越来越好！

丁侦球 · 发表于 2023-6-29 17:27:09

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

落败的青春阳落s · 发表于 2023-6-29 18:55:02

我看不错噢谢谢楼主！知鸟论坛越来越好！

惜颜705 · 发表于 2023-6-29 19:19:19

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

尘埃416 · 发表于 2023-6-30 00:08:21

感谢楼主的无私分享！要想知鸟论坛好就靠你我他

小妖花满楼满fx · 发表于 2023-6-30 00:28:38

我看不错噢谢谢楼主！知鸟论坛越来越好！

米老鼠和蓝精鼠v · 发表于 2023-6-30 01:58:03

感谢楼主的无私分享！要想知鸟论坛好就靠你我他

贰十岁装成熟装s · 发表于 2023-6-30 17:09:37

这个帖子不回对不起自己！我想我是一天也不能离开知鸟论坛。

塞翁364 · 发表于 2023-7-4 13:44:57

楼主太厉害了！楼主，I*老*虎*U！我觉得知鸟论坛真是个好地方！

[JavaScript] 基于Echarts实现绘制立体柱状图的示例代码