象形柱图合并实现各自形状的阴影+布局问题

qq_40950174

已于 2023-05-25 11:12:39 修改

阅读量365

点赞数

文章标签：前端 echarts javascript

于 2023-05-25 11:10:32 首次发布

本文链接：https://blog.csdn.net/qq_40950174/article/details/130860083

版权

合并两个象柱形图实现象柱形图自己形状的阴影展示
两个象柱形图在同一坐标系下导致的错位修复
遗憾

文章目录

成品展示与UI

UI：

成品：

一、合并两个象柱形图实现象柱形图自己形状的阴影

二、两个象柱形图在同一坐标系下导致的错位修复

成品展示与UI

为实现设计需求进行开发，已实现象柱形图自己形状的阴影展示，多个象柱形图同一坐标系下的展示与对应阴影展示不错位

UI：

成品：

一、合并两个象柱形图实现象柱形图自己形状的阴影

这里可以看echarts自己的类似方法精灵

从代码中可以看到并没有使用barGap这些类似偏移合并的参数，大胆猜测两个象柱形图不需要这些就可以合并在一起，echarts会对普通柱状图操作让他们不合在一起，但是象形柱图不会，所以我用两个象形柱图测试一下果然可以，示例及代码：

其中第一个象形柱图的symbolRepeat设置为true用来展示正确数据，第二个设为fixed用来充当背景阴影，代码：

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [23, 12, 48, 56],
      name: 'xxx',
      // 形状
      symbol: 'rect',
      type: 'pictorialBar',
      // 形状大小
      symbolSize: [24, 6],
      // 图形重复展示还是不重复
      symbolRepeat: true,
      // 层级高于阴影防止被阴影覆盖隐藏
      z: 4,
      itemStyle: {
        color: '#2469C7'
      }
    },
    {
      data: [23, 12, 48, 56],
      name: 'xxx',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      // 使图形元素重复，即每个数据值用一组重复的图形元素表示。重复的次数依据 symbolBoundingData 计算得到，即与 data 无关。这在此图形被用于做背景时有用
      symbolRepeat: 'fixed',
      z: 3,
      itemStyle: {
        color: '#1B2332'
      }
    }
  ]
};

二、两个象柱形图在同一坐标系下导致的错位修复

当两个带阴影的象柱形图在同一坐标系下时，同样会重叠在一起，类似这样

但是如果公用同一坐标系，当给最后一个加了barGap会导致四个全部分开如下：

所以为解决这个问题我们引入第二个横坐标轴（如果你的数据是躺着的就引入第二个纵坐标）但是不显示，并且各自坐标系加各自的barGap。数值象柱形图用第一个x轴，背景阴影用第二个x轴。具体就是：

xAxis：

xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
    {
      show: false,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
  ],

series：

  series: [
    // xxx的数值，用第一个默认x坐标轴，不用特定声明，默认
    {
      data: [23, 12, 48, 56],
      name: 'xxx',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: true,
      z: 4,
      itemStyle: {
        color: '#2469C7'
      }
    },
    // xxx的阴影，用第二个隐藏x轴，特定声明
    {
      data: [23, 12, 48, 56],
      name: 'xxx',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: 'fixed',
      // 声明用第二个x轴
      xAxisIndex: 1,
      z: 3,
      itemStyle: {
        color: '#1B2332'
      }
    },
    // yyy的数值，用第一个默认x坐标轴，不用特定声明，默认
    {
      data: [23, 12, 48, 56],
      name: 'yyy',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: true,
      // 记得偏移，不然xxx的数值会和yyy的重叠，象形柱图不会自己区分，barGap只加在同系列最后一个就生效
      barGap: '100%',
      z: 4,
      itemStyle: {
        color: '#FFB133'
      }
    },
    // yyy的阴影，用第二个隐藏x轴，特定声明
    {
      data: [23, 12, 48, 56],
      name: 'yyy',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: 'fixed',
      xAxisIndex: 1,
      // 记得偏移，不然xxx的阴影会和yyy的重叠，象形柱图不会自己区分，barGap只加在同系列最后一个就生效
      barGap: '100%',
      z: 3,
      itemStyle: {
        color: '#1B2332'
      }
    }
  ]

三、遗憾

其实真正的UI要求它是渐变的，但是echarts不支持重复图形的集体渐变，参考大佬的文章搞得伪渐变也会因为数据问题可能会被遮挡真正的顶部，而且真正放大看是很容易发现瑕疵的，大屏肯定不行，我会把伪渐变的代码和参考文章放出来

使用 echarts 实现象形图渐变色

echarts象形柱图整体颜色渐变

伪象柱形图渐变（不是文章里讲的，我抛弃了这版，数据显示问题太多可以找UI搞透明的图片）

option = {
  // color:[ 
  // ],
  backgroundColor: '#000',
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, ],
      type: 'bar',
      barGap: '116.6%',
      barWidth: 24,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(36,105,199,0)' },
          { offset: 1, color: '#2469C7' }
        ])
      },
      z:2,
    },
    {
      data: [120, 200, 150, 80 ],
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24,6],
      symbolRepeat: 'fixed',
      // 上下加一起是4，所以单个为2
      symbolMargin: 2,
      z:4,
      itemStyle: {
        color: '#1B2332'
      },
    },
    {
      data: [20, 30, 40, 50],
      type: 'bar',
      barWidth: 24,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: 'rgba(255,177,51,0)' },
          { offset: 1, color: '#FFB133' }
        ])
      },
      z:2,
    },
    {
      data: [20, 30, 40, 50],
      symbol: 'rect',
      barGap: '-52%',
      type: 'pictorialBar',
      symbolSize: [24,6],
      symbolRepeat: 'fixed',
      // 上下加一起是4，所以单个为2
      symbolMargin: 2,
      z:4,
      itemStyle: {
        color: '#1B2332'
      },
    },
  ]
};

源码

option = {
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu']
    },
    {
      show: false,
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu']
    }
  ],
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [23, 12, 48, 56],
      name: 'xxx',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: true,
      z: 4,
      itemStyle: {
        color: '#2469C7'
      }
    },
    {
      data: [23, 12, 48, 56],
      name: 'xxx',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: 'fixed',
      xAxisIndex: 1,
      z: 3,
      itemStyle: {
        color: '#1B2332'
      }
    },
    {
      data: [23, 12, 48, 56],
      name: 'yyy',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: true,
      barGap: '100%',
      z: 4,
      itemStyle: {
        color: '#FFB133'
      }
    },
    {
      data: [23, 12, 48, 56],
      name: 'yyy',
      symbol: 'rect',
      type: 'pictorialBar',
      symbolSize: [24, 6],
      symbolRepeat: 'fixed',
      xAxisIndex: 1,
      barGap: '100%',
      z: 3,
      itemStyle: {
        color: '#1B2332'
      }
    }
  ]
};