echarts两个合并柱体（普通柱状图象形柱图）共享一个柱体阴影

柱状图与象形柱图的合并
两个合并后的柱图展示在同一图表
两个合并柱图公用的阴影
图例点击
推荐直接看代码并将代码粘到echarts随便一个模型里操作，比直接讲方便多了

前言

二、步骤

1.普通柱图与象形柱图合并

2.两个合并后的柱图展示在同一图表

3.两个合并柱图公用的阴影

4.图例点击

源码

总结

赞美万机之神

前言

感谢UI设计，花了我1天时间，牺牲自己的娱乐解决了这个问题，求求UI下次照着echarts有的例子做，跪求，谢谢[○･｀Д´･ ○]。

一、成品展示与背景

因为大佬着急要大屏，所以UI花了一天时间画，我们花了2天做，我做的大屏比较简单（还好不是地图），乍一看上去就是个柱状图，但实际上坑是真多，也怪我遇到问题太菜了，要好好学习，同时感谢各位csdn的echarts大佬的帮助。成品如下（数据有隐私，所以在echarts自己的例子上修改，丑就丑了）：

echarts两个合并柱体共享阴影操作

二、步骤

1.普通柱图与象形柱图合并

这个echarts上有类似的，一般来说把barGap设为‘-100%’就可以让两个普通柱体合并，比如echarts官网的：柱体合并。

象形柱图和普通柱体单个情况下可以这样，但是多个状态下不行，会错位。所以我们需要symbolOffset和symbolPosition（需要自己根据自己的柱体宽度、柱体间距等计算），来使得象柱形图偏移并固定在普通柱图顶部，让两个普通柱图作为主体。为防止普通柱图把象形柱图挡住，象形柱图的z大于普通柱图

2.两个合并后的柱图展示在同一图表

只要这两个合并后的柱体仍然公用一个x轴就没问题，Y轴无所谓，除非图是躺着的，如果Y轴是多个数值轴，可以使用alignTicks: true来使得多个Y轴自动对齐刻度。

3.两个合并柱图公用的阴影

这个需要自己用另外的X轴Y轴写，不推荐echarts自带的，因为echarts自带的只会给自己单独同系列的柱体套，如果不同系列柱体在一起还好，不在一起的话阴影也分开了。

不在一起：

在一起：

这里推荐看大佬的文章，自己写一个阴影，但是这个阴影Y轴最大值居然有可能不是10的倍数，这样看起来就不太好看，所以我又后期加工了一下，代码一起给，分开讲我也不知道讲什么。

固定宽度柱状图添加固定宽度的背景和选中阴影～echarts奇奇怪怪系列https://blog.csdn.net/qq_34027761/article/details/125208831

4.图例点击

点击事件推荐这个大佬的，我之所以搞这个是因为点击图例后象形柱图和普通柱图会偏移，不在一起了，这样看起来不好看。

echarts学习之legend点击事件https://blog.csdn.net/weixin_42566993/article/details/108683076

源码

// 初始化象形柱图偏移
var symbolOffset1 = ['-65%', '-0%'];
var symbolOffset2 = ['65%', '-0%'];
// 监听图例点击事件
myChart.on('legendselectchanged',(e)=>{
  for(let i in e.selected){
    // 获取被点击图例与当前状态
    if(i==e.name){
      // 显示则偏移
      if(e.selected[i]){
        symbolOffset1 = ['-65%', '-0%'];
        symbolOffset2 = ['65%', '-0%'];
      }else{
        // 不显示则不偏移
        symbolOffset1 = ['0%', '-0%'];
        symbolOffset2 = ['0%', '-0%'];
      }
    }
  }
// 赋值
  option.series[1].symbolOffset = symbolOffset1;
  option.series[3].symbolOffset = symbolOffset2;
// 重新加载echarts
  myChart.setOption(option);
});
option = {
  // backgroundColor: '#000',
// 预设颜色优先级低于series里定义的颜色，所以象形柱图不会被污染
        color: [
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 0, color: 'rgba(25,120,229,0)' // 0% 处的颜色
            }, {
                offset: 1, color: '#1978E5' // 100% 处的颜色
            }],
          },
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [{
                offset: 0, color: 'rgba(20,197,231,0)' // 0% 处的颜色
            }, {
                offset: 1, color: '#14C5E7' // 100% 处的颜色
            }],
          },
        ],
        grid:{
          top: 75,
        },
        legend:{
          show: true,
          icon: 'circle',
          orient: 'horizontal',
          top: 0,
          right: '7%',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 68,
          textStyle:{
            width: 120,
            height: 32,
            fontSize: 24,
            fontFamily: 'PingFangSC-Regular, PingFang SC',
            fontWeight: 400,
            // color: 'rgba(216,240,255,0.8)',
            lineHeight: 32
          },
          itemStyle:{
            // borderCap: 'square'
            // color: ['#1978E5','#19DAE5']
          }
          // align: 'right',
        },
        xAxis: [
          {
            type: 'category',
            axisTick:{
              show: false
            },
            data: [1,2,3,4,5,6],
            // 轴线文字
            axisLabel:{
              // 展示文字
              show: true,
              // 文字颜色
              // color: 'rgba(216,240,255,0.8)',
              // 字体
              fontFamily: 'PingFangSC-Regular, PingFang SC',
              // 字体大小
              fontSize: 24,
              //高度
              height: 33,
              fontWeight: 400,
              lineHeight: 33,
            },
          },
          {
            type: 'category',
            show: false,
            data: this.xAxisData_
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '万',
            nameTextStyle:{
              // 文字颜色
              // color: 'rgba(216,240,255,0.6)',
              // 字体
              fontFamily: 'PingFangSC-Regular, PingFang SC',
              // 字体大小
              fontSize: 24,
              //高度
              height: 33,
              fontWeight: 400,
              lineHeight: 33,
              align: 'right',
              padding: [0,15,0,0]
            },
            nameGap: 20,
            splitLine:{
              show: true,
              lineStyle:{
                type: 'dashed',  
                color: '#B0D7FF', 
              }
            },
            axisLine:{
              show:false,
            },
            // 轴线文字
            axisLabel:{
              // 展示文字
              show: true,
              // 文字颜色
              // color: 'rgba(216,240,255,0.6)',
              // 字体
              fontFamily: 'PingFangSC-Regular, PingFang SC',
              // 字体大小
              fontSize: 24,
              //高度
              height: 33,
              fontWeight: 400,
              lineHeight: 33,
            },
          },{
            type: 'value',
            alignTicks: true,
            axisLine:{
              show:false,
            },
            splitLine:{
              show: true,
              lineStyle:{
                type: 'dashed',   
                color: '#B0D7FF',
              }
            },
            // 轴线文字
            axisLabel:{
              // 展示文字
              show: true,
              // 文字颜色
              // color: 'rgba(216,240,255,0.6)',
              // 字体
              fontFamily: 'PingFangSC-Regular, PingFang SC',
              // 字体大小
              fontSize: 24,
              //高度
              height: 33,
              fontWeight: 400,
              lineHeight: 33,
            },
          },{
            type: 'value',
            show: false
          }
        ],
        series: [
          {
            data: [31, 18, 12, 10, 9, 34],
            name: 'yyy',
            type: 'bar',
            barWidth: 20,
            yAxisIndex: 0,
            z: 2
          },
          {
            data: [31, 18, 12, 10, 9, 34],
            // 象形柱图
            type: 'pictorialBar',
             name: 'yyy',
             color: '#fff',
            // 图形的定位位置
            symbolPosition: 'end',
            // 图形形状
            symbol: 'rect',
            // 图形大小宽高
            symbolSize:[20, 4],
            // 图形x，y轴偏移
            symbolOffset:symbolOffset1,
            yAxisIndex: 0,
            z: 3
          },
          // 上面一组，下面一组
          {
            name: 'xxx',
            data: [341, 263, 266, 285, 279, 282],
            type: 'bar',
            barWidth: 20,
            yAxisIndex: 1,
            z: 2
          },
          {
            data: [341, 263, 266, 285, 279, 282],
            name: 'xxx',
            color: '#fff',
            // 象形柱图
            type: 'pictorialBar',
            // 图形的定位位置
            symbolPosition: 'end',
            // 图形形状
            symbol: 'rect',
            // 图形大小宽高
            symbolSize:[20, 4],
            // 图形x，y轴偏移
            symbolOffset: symbolOffset2,
            yAxisIndex: 1,
            z: 3
          },
          {
            data: [10, 10, 10, 10, 10, 10],
            type: 'bar',
            barWidth: 64,
            yAxisIndex: 2,
            xAxisIndex: 1,
            itemStyle: {
              color: 'rgba(0,0,0,0.26)'
            },
          }
        ]
};

总结

就这200+的代码花了我一天时间，工作效率极低，细节各位自己优化吧。

echarts两个合并柱体（普通柱状图 象形柱图）共享一个柱体阴影

前言

二、步骤

1.普通柱图与象形柱图合并

2.两个合并后的柱图展示在同一图表

3.两个合并柱图公用的阴影

4.图例点击

源码

总结

赞美万机之神

echarts两个合并柱体（普通柱状图象形柱图）共享一个柱体阴影