立体堆叠柱图的实现

立体堆叠柱图实现的实现

实现效果示例：

1、技术原理

1.1、技术分析

• 平面上的立体柱图可以看作是由4个平行四边形拼接而成的图形，分别是：
  • 1、顶部菱形
  • 2和3、左右矩形，他们两个色值相同但亮度不同，从而产生立体阴影效果
  • 4、底部菱形，用于产生柱体中间的填角

• 分析了立体柱图的组成后，接下来就是如何使用echart提供的配置能力分别渲染出对应的图形，其中：

  • 组成2和3的两个矩形可以看作使用了两种背景色（线性渐变）的普通柱图，因此只需要使用echarts提供的Color对象定义普通柱图的颜色填充即可实现，即series.itemStyle.color。

  • 1和4的菱形可以通过echarts提供的象形柱图（pictorialBar）的diamond菱形实现，底部的菱形是为了产生折角效果。

• 另外，如果是堆叠柱图，为了使上下柱连接处也呈现立体折角效果，还需要在连接处也添加一个菱形，该菱形的颜色与上柱颜色相同。

1.2、pictorialBar象形柱图

象形柱图是echarts提供的一种2d图表，它以标准的矩形柱图为容器，允许我们通过配置symbol的方式在容器中实现个性化的图形效果，类比起来相当于图标按钮或图片按钮的实现思路。象形柱图的主要配置项如下：

• symbol：图形类型，echarts提供了多种symbol类型标记，包括内置的cicle圆，rect矩形，diamond菱形，arrow箭头等，还支持自定义的图片url和svg图形。

• symbolSize：图形尺寸，值为 [w, h] 分别表示宽和高，可以是具体值，也可以是百分百值。当为百分百值是基于基准柱尺寸（的宽和高）计算，基准柱就是原始的矩形柱图。

• symbolPosition：基于基准柱的图形对齐定位，可取值start（默认），end，center，与flex的justfy-content效果类似，基准柱相当于flex容器。

• symbolOffset：图形相对与基准定位的偏移量，值为 [left, top] ，可以是具体值，也可以是（相对自身尺寸的）百分比。

• symbolRotate：图形绕自身旋转角度

• symbolRepeat：图形是否可以重复，如果为true可以产生类似rate评分的效果

• symbolRepeatDirection：重复方向

• symbolClip：是否剪切图形，如果为true，则根据基准值symbolBoundingData进行比例裁剪显示。echarts的示例人体含水比例即采用了本属性。

1.3、Color对象

Color是echarts提供的通用调色板对象，echarts实例可以配置全局color数组作为图表的默认颜色集，用于诸如饼图等多色场景。同时Color也用在各种可以独立设置的颜色的场合，如series的itemStyle中。

color支持RGBA的纯色和渐变/纹理填充两种格式。

线性渐变配置说明

• type：linear

• x，y，x2，y2：取值范围 0 - 1，表示颜色在图形容器中的百分比，用于表示渐变方向，也就是css linear-gradient的第一个参数，其中x表示左，x2表示右，y表示上，y2表示下。例如：

  • x:0,y:0,x2:0,y2:1：表示从上到下

  • x:0,y:1,x2:0,y2:0：表示从下到上

  • x:0,y:0,x2:1,y2:0：从左到右

  • x:1,y:0,x2:0,y2:0：从右到左

• colorStops：颜色段点，也就是css linear-gradient后面的参数组

2、实现过程

以下代码演示包含两段柱的立体堆叠柱图的实现。

• 1、计算堆叠柱图总高度，目的是为了获得顶部菱形的位置

• 2、声明普通堆叠柱图的颜色，要一半深色一半浅色，从而模拟柱子的两条边

• 3、处理当上半柱或者下半柱高度为0的特殊情况下顶部和底部菱形的展示形态，当要堆叠的柱子超过两个时，情况会更加复杂一些，本示例不涉及。

• 4、声明图形的series集合，整个立体堆叠柱图由两个普通堆叠柱图和3个象形柱图（菱形）构成，要注意各图的z-index值（z）

完整示例代码如下：

  import * as echarts from 'echarts';

  const ups = [80, 200, 90, 140, 70, 80, 0];
  const downs = [120, 300, 150, 300, 270, 0, 100];
  const xData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月'];

  // 声明柱图基准宽度
  const baseWidth = 40;

  // 1、计算柱图总高度
  const sum = ups.map((item, index) => item + downs[index]);

  // 2、声明主体柱图的同色值不同亮度的线性渐变，由于要配合菱形，
  // 双色渐变的两色各占一半
  const color = [
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#54a2d3", // 青蓝
        },
        {
          offset: 0.5,
          color: "#54a2d3",
        },
        {
          offset: 0.5,
          color: "#7ed1e3", // 青绿
        },
        {
          offset: 1,
          color: "#7ed1e3",
        },
      ],
    },
    {
      type: "linear",
      x: 0,
      x2: 1,
      y: 0,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#a3a418", // 深棕
        },
        {
          offset: 0.5,
          color: "#a3a418",
        },
        {
          offset: 0.5,
          color: "#cdbf38", // 浅棕
        },
        {
          offset: 1,
          color: "#cdbf38",
        },
      ],
    },
  ];

  const bottomDiamond = [];
  const midDiamond = [...downs];
  const topDiamond = [];

  // 3、计算顶部菱形和底部菱形颜色及位置
  for (let i = 0; i < sum.length; i++) {
    // 总长度等于0，则什么上下菱形都不显示
    if (sum[i] <= 0) {
      bottomDiamond.push(0);
      topDiamond.push({
        value: 1,
        itemStyle: {
          borderColor: '#rgba(0,0,0,0)',
          borderWidth: 2,
          color: '#rgba(0,0,0,0)'
        }
      });
    } else {
      // ↓计算底部折角
      // 如果柱子只有上半段，则底部菱形颜色要与上段颜色相同
      if (sum[i] === ups[i]) {
        bottomDiamond.push({
          value: 1, // 底部菱形高度为1
          itemStyle: {
            normal: {
              color: color[1] // 专门设置颜色
            }
          }
        })
      } else {
        // 否则底部菱形颜色与下段颜色相同
        bottomDiamond.push(1);
      }

      // ↓计算顶部菱形
      // 如果柱子存在上半段，则顶部菱形颜色与上段相近
      if (ups[i] > 0) {
        topDiamond.push({
          value: sum[i], // 顶部菱形所属标准柱的高度为堆叠柱图总高度
          itemStyle: {
            normal: {
              borderColor: "#e9d86c", // 黄棕
              borderWidth: 2,
              color: "#e9d86c",
            }
          }
        });
      } else {
        // 如果柱子只有下半段，则顶部菱形颜色与下段相近
        topDiamond.push({
          value: sum[i],
          itemStyle: {
            normal: {
              borderColor: "#89e3ec", // 浅绿
              borderWidth: 2,
              color: "#89e3ec",
            }
          }
        });

        // 去掉中间菱形
        midDiamond[i] = '';
      }
    }
  }

    const dom = document.getElementById('chart');
    const chart = echarts.init(dom);

    const option = {
      xAxis: {
        type: 'category',
        data: xData
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        data: [
          {
            name: '已处理',
            itemStyle: {
              color: '#a3a418'
            }
          },  
          {
            name: '未处理',
            itemStyle: {
              color: '#54a2d3'
            }
          }
        ],
        right: 20,
        selectedMode: false // 关闭图例可点击功能，防止菱形被晾出来
      },
      series: [
        // 基础下段
        {
          z: 1,
          name: '已处理',
          type: 'bar',
          barWidth: baseWidth,
          stack: 'sum',
          itemStyle: {
            color: color[0]
          },
          data: downs
        },
        // 基础上段
        {
          z: 2,
          name: '未处理',
          type: 'bar',
          barWidth: baseWidth,
          stack: 'sum',
          itemStyle: {
            color: color[1]
          },
          data: ups
        },
        // 底部菱形，用于产生底座处的折线效果
        {
          z: 3,
          name: 'all',
          type: 'pictorialBar',
          data: bottomDiamond,
          symbol: 'diamond',
          symbolOffset: ['0%', '50%'], // 下移50%，产生底部填角
          symbolSize: [baseWidth, 10], // 上下菱形的尺寸保持一致
          itemStyle: {
            color: color[0] // 颜色与下段柱保持一致
          },
          tooltip: {
            show: false
          }
        },
        // 中间连接处菱形，用于产生上下段连接处的折线效果
        {
          z: 4,
          name: 'all',
          type: 'pictorialBar',
          data: midDiamond,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: ['0%', '-50%'],
          symbolSize: [baseWidth, 10],
          itemStyle: {
            normal: {
              color: color[1]
            }
          }
        },
        // 顶部菱形
        {
          z: 5,
          name: 'all',
          type: 'pictorialBar',
          data: topDiamond,
          symbol: 'diamond',
          symbolPosition: 'end',
          symbolOffset: ['0%', '-65%'],
          symbolSize: [baseWidth - 4, (10 * (baseWidth - 4)) / baseWidth],
          tooltip: {
            show: false,
          }
        }
      ]
    };

    chart.setOption(option);