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

贫民

前言

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

实现方法


先写一个常规的柱状图

在这个基础上进行改进

1. <div id="main"></div>
   
2. ​
   
3. #main{
   
4.   width: 500px;
   
5.   height: 350px;
   
6. }
   
7. ​
   
8. var chartDom = document.getElementById('main');
   
9. var myChart = echarts.init(chartDom);
   
10. var option;
    
11. ​
    
12. option = {
    
13.   xAxis: {
    
14.     axisTick: {
    
15.       show: false
    
16.     },
    
17.     nameTextStyle: {
    
18.       color: '#fff'
    
19.     },
    
20.     data: ['春节', '元宵节', '端午节', '中秋节']
    
21.   },
    
22.   legend: {
    
23.     data: ['春节', '元宵节', '端午节', '中秋节'],
    
24.     right: '25',
    
25.     top: '18',
    
26.     icon: 'rect',
    
27.     itemHeight: 10,
    
28.     itemWidth: 10,
    
29.     textStyle: {
    
30.       color: '#000'
    
31.     }
    
32.   },
    
33.   yAxis: {
    
34.     type: 'value',
    
35.     axisLabel: {
    
36.       color: '#000'
    
37.     },
    
38.     splitLine: {
    
39.       show: true,
    
40.       lineStyle: {
    
41.         type: 'dashed',
    
42.         color: ['#ccc']
    
43.       }
    
44.     }
    
45.   },
    
46.   series: [
    
47.     {
    
48.       data: [
    
49.         { name: '春节', value: 24 },
    
50.         { name: '端午节', value: 44 },
    
51.         { name: '中秋节', value: 32 },
    
52.         { name: '春节', value: 50 }
    
53.       ],
    
54.       barWidth: 30,
    
55.       type: 'bar'
    
56.     }
    
57.   ]
    
58. };
    
59. ​
    
60. ​
    
61. option && myChart.setOption(option);

复制代码

echarts的配置选项

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

那我们看所有的type 没有立体柱状图的类型，但是呢我们看最后一项type: custom，什么意思呢，自定义系列，那就是说我们可以选择custom 类型来实现立体柱状图
renderItem
type为custom可以自定义系列图形元素渲染。
根据查看配置项，发现有一个

1. renderItem函数

复制代码

，custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为

1. renderItem

复制代码

看下renderItem函数的介绍
renderItem 函数提供了两个参数：
params：包含了当前数据信息和坐标系的信息。

1. {
   
2.     context: // {Object} 一个可供开发者暂存东西的对象。生命周期只为：当前次的渲染。
   
3.     seriesId: // {string} 本系列 id。
   
4.     seriesName: // {string} 本系列 name。
   
5.     seriesIndex: // {number} 本系列 index。
   
6.     dataIndex: // {number} 数据项的 index。
   
7.     dataIndexInside: // {number} 数据项在当前坐标系中可见的数据的 index（即 dataZoom 当前窗口中的数据的 index）。
   
8.     dataInsideLength: // {number} 当前坐标系中可见的数据长度（即 dataZoom 当前窗口中的数据数量）。
   
9.     actionType: // {string} 触发此次重绘的 action 的 type。
   
10.     coordSys: // 不同的坐标系中，coordSys 里的信息不一样，含有如下这些可能：
    
11.     coordSys: {
    
12.         type: 'cartesian2d',
    
13.         x: // {number} grid rect 的 x
    
14.         y: // {number} grid rect 的 y
    
15.         width: // {number} grid rect 的 width
    
16.         height: // {number} grid rect 的 height
    
17.     },
    
18.     coordSys: {
    
19.         type: 'calendar',
    
20.         x: // {number} calendar rect 的 x
    
21.         y: // {number} calendar rect 的 y
    
22.         width: // {number} calendar rect 的 width
    
23.         height: // {number} calendar rect 的 height
    
24.         cellWidth: // {number} calendar cellWidth
    
25.         cellHeight: // {number} calendar cellHeight
    
26.         rangeInfo: {
    
27.             start: // calendar 日期开端
    
28.             end: // calendar 日期结尾
    
29.             weeks: // calendar 周数
    
30.             dayCount: // calendar 日数
    
31.         }
    
32.     },
    
33.     coordSys: {
    
34.         type: 'geo',
    
35.         x: // {number} geo rect 的 x
    
36.         y: // {number} geo rect 的 y
    
37.         width: // {number} geo rect 的 width
    
38.         height: // {number} geo rect 的 height
    
39.         zoom: // {number} 缩放的比率。如果没有缩放，则值为 1。例如 0.5 表示缩小了一半。
    
40.     },
    
41.     coordSys: {
    
42.         type: 'polar',
    
43.         cx: // {number} polar 的中心坐标
    
44.         cy: // {number} polar 的中心坐标
    
45.         r: // {number} polar 的外半径
    
46.         r0: // {number} polar 的内半径
    
47.     },
    
48.     coordSys: {
    
49.         type: 'singleAxis',
    
50.         x: // {number} singleAxis rect 的 x
    
51.         y: // {number} singleAxis rect 的 y
    
52.         width: // {number} singleAxis rect 的 width
    
53.         height: // {number} singleAxis rect 的 height
    
54.     }
    
55. }

复制代码

其中，关于

1. dataIndex

复制代码

和

1. dataIndexInside

复制代码

的区别：

• 1. dataIndex

  复制代码
  指的
  1. dataItem

  复制代码
  在原始数据中的 index。
  
• 1. dataIndexInside

  复制代码
  指的是
  1. dataItem

  复制代码
  在当前数据窗口中的 index。
  

[renderItem.arguments.api] 中使用的参数都是

1. dataIndexInside

复制代码

而非

1. dataIndex

复制代码

，因为从

1. dataIndex

复制代码

转换成

1. dataIndexInside

复制代码

需要时间开销。
api：是一些开发者可调用的方法集合。
所有属性

1. {[value], [coord] , [size] , [style] , [styleEmphasis] , [visual] , [barLayout] , [currentSeriesIndices] , [font], [getWidth] , [getHeight], [getZr], [getDevicePixelRatio]}

复制代码

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

• [api.value(...)]，意思是取出
  1. dataItem

  复制代码
  中的数值。例如
  1. api.value(0)

  复制代码
  表示取出当前
  1. dataItem

  复制代码
  中第一个维度的数值。
  
• [api.coord(...)]，意思是进行坐标转换计算。例如
  1. var point = api.coord([api.value(0), api.value(1)])

  复制代码
  表示
  1. dataItem

  复制代码
  中的数值转换成坐标系上的点。
  
• [api.size(...)] ，表示得到坐标系上一段数值范围对应的长度。
  

看下代码实现

1. series:  getSeriesData()
   
2. ​
   
3. function getSeriesData() {
   
4.   const data = [];
   
5.   seriesData.forEach((item, index) => {
   
6.     data.push(
   
7.       {
   
8.         type: 'custom',
   
9.         name: item.label,
   
10.         renderItem: function (params, api) {
    
11.           return getRenderItem(params, api);
    
12.         },
    
13.         data: item.value,
    
14.       }
    
15.     )
    
16.   })
    
17.   return data
    
18. }
    
19. ​
    
20. function getRenderItem(params, api) {
    
21.   // params.seriesIndex表示本系列 index
    
22.   const index = params.seriesIndex;
    
23.   // api.coord() 坐标转换计算
    
24.   // api.value() 取出当前项中的数值
    
25.   let location = api.coord([api.value(0) + index, api.value(1)]);
    
26.   // api.size() 坐标系数值范围对应的长度
    
27.   var extent = api.size([0, api.value(1)]);
    
28.   return {
    
29.     type: 'rect',
    
30.     shape: {
    
31.       x: location[0] - 20 / 2,
    
32.       y: location[1],
    
33.       width: 20,
    
34.       height: extent[1]
    
35.     },
    
36.     style: api.style()
    
37.   };
    
38. }

复制代码

来看下我们的实现效果

柱状图效果出来了，那来看下怎么将柱状图改为立体图
return_group
我看到

1. renderItem

复制代码

可以返回一个

1. return_group

复制代码

类型，来看看这个类型的介绍

• group 是唯一的可以有子节点的容器。
  
• group 可以用来整体定位一组图形元素。
  

那就是说我们可以将设定一组图形元素然后组合到一起形成立体柱状图
那么问题又来了怎么设定一组图形元素呢？
graphic
这个呢是关于图形相关的方法，再来了解两个API
graphic.extendShape
创建一个新的图形元素
graphic.registerShape
注册一个开发者定义的图形元素
创建图形元素
那我们先来创建一个新的图形元素

1. const leftRect = echarts.graphic.extendShape({
   
2.     shape: {
   
3.       x: 0,
   
4.       y: 0,
   
5.       width: 19, //柱状图宽
   
6.       zWidth: 8, //阴影折角宽
   
7.       zHeight: 4, //阴影折角高
   
8.     },
   
9.     buildPath: function (ctx, shape) {
   
10.       const api = shape.api;
    
11.       const xAxisPoint = api.coord([shape.xValue, 0]);
    
12.       const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    
13.       const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
    
14.       const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
    
15.       const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    
16.       const p4 = [shape.x + shape.width / 2, shape.y];
    
17. ​
    
18.       ctx.moveTo(p0[0], p0[1]);
    
19.       ctx.lineTo(p1[0], p1[1]);
    
20.       ctx.lineTo(p2[0], p2[1]);
    
21.       ctx.lineTo(p3[0], p3[1]);
    
22.       ctx.lineTo(p4[0], p4[1]);
    
23.       ctx.lineTo(p0[0], p0[1]);
    
24.       ctx.closePath();
    
25.     },
    
26.   });
    
27. ​
    
28. ​
    
29. const rightRect = echarts.graphic.extendShape({
    
30.     shape: {
    
31.       x: 0,
    
32.       y: 0,
    
33.       width: 18,
    
34.       zWidth: 15,
    
35.       zHeight: 8,
    
36.     },
    
37.     buildPath: function (ctx, shape) {
    
38.       const api = shape.api;
    
39.       const xAxisPoint = api.coord([shape.xValue, 0]);
    
40.       const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
    
41.       const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
    
42.       const p4 = [shape.x + shape.width / 2, shape.y];
    
43.       const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
    
44.       const p6 = [shape.x + shape.width / 2 + shape.zWidth, shape.y - shape.zHeight / 2];
    
45.       const p7 = [shape.x - shape.width / 2 + shape.zWidth, shape.y - shape.zHeight];
    
46.       ctx.moveTo(p4[0], p4[1]);
    
47.       ctx.lineTo(p3[0], p3[1]);
    
48.       ctx.lineTo(p5[0], p5[1]);
    
49.       ctx.lineTo(p6[0], p6[1]);
    
50.       ctx.lineTo(p4[0], p4[1]);
    
51. ​
    
52.       ctx.moveTo(p4[0], p4[1]);
    
53.       ctx.lineTo(p6[0], p6[1]);
    
54.       ctx.lineTo(p7[0], p7[1]);
    
55.       ctx.lineTo(p1[0], p1[1]);
    
56.       ctx.lineTo(p4[0], p4[1]);
    
57.       ctx.closePath();
    
58.     },
    
59.   });

复制代码

注册图形元素

1. echarts.graphic.registerShape('leftRect', leftRect);
   
2. echarts.graphic.registerShape('rightRect', rightRect);

复制代码

再来修改一下

1. return_group

复制代码

1. function getRenderItem(params, api) {
   
2.   const index = params.seriesIndex;
   
3.   let location = api.coord([api.value(0) + index, api.value(1)]);
   
4.   var extent = api.size([0, api.value(1)]);
   
5.   return {
   
6.     type: 'group',
   
7.     children: [
   
8.       {
   
9.         type: 'leftRect',
   
10.         shape: {
    
11.           api,
    
12.           xValue: api.value(0) + index,
    
13.           yValue: api.value(1),
    
14.           x: location[0],
    
15.           y: location[1]
    
16.         },
    
17.         style: api.style()
    
18.       },
    
19.       {
    
20.         type: 'rightRect',
    
21.         shape: {
    
22.           api,
    
23.           xValue: api.value(0) + index,
    
24.           yValue: api.value(1),
    
25.           x: location[0],
    
26.           y: location[1]
    
27.         },
    
28.         style: api.style()
    
29.       }
    
30.     ]
    
31.   };
    
32. }

复制代码

再来看下效果

可以看到立体形状的柱状图已经实现了，那还有个缺点就是颜色需要再按照设计图来改改

1. const colors = [
   
2.     [
   
3.       { offset: 0, color: 'rgba(26, 132, 191, 1)' },
   
4.       { offset: 1, color: 'rgba(52, 163, 224, 0.08)' },
   
5.     ],
   
6.     [
   
7.       { offset: 0, color: 'rgba(137, 163, 164, 1)' },
   
8.       { offset: 1, color: 'rgba(137, 163, 164, 0.08)' },
   
9.     ],
   
10.     [
    
11.       { offset: 0, color: 'rgba(44, 166, 166, 1)' },
    
12.       { offset: 1, color: 'rgba(44, 166, 166, 0.08)' },
    
13.     ],
    
14.     [
    
15.       { offset: 0, color: 'rgba(34, 66, 186, 1)' },
    
16.       { offset: 1, color: 'rgba(34, 66, 186, 0.08)' },
    
17.     ],
    
18.   ];
    
19. ​
    
20. //在getSeriesData添加itemStyle
    
21. itemStyle: {
    
22.        color: () => {
    
23.               return new echarts.graphic.LinearGradient(0, 0, 0, 1, colors[index]);
    
24.        },
    
25. },

复制代码

效果图

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

来源:https://www.jb51.net/article/276261.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！