echarts 5.5.0版本下的层叠柱形图,每个值都从0开始,会有覆盖情况

infgrad

关注

阅读 23

2024-06-27

需求:

1、每个公司,需要两个柱子去展示(stack: '1'是第一个柱子,stack:'2',是第二个柱子);

2、必须每个数据都是从0开始,不在上一个值上累加;

3、鼠标滑上去的时候,最大值的柱子,会全部显示出来,滑走就恢复显示其他值;

4、echarts 版本必须是 5.3.3 以上的,低版本不支持这个效果

5、鼠标滑上去的时候,当前公司的所有值都会有提示,并且和其他公司同类型值有突出显示

鼠标没有滑上的效果图

鼠标滑上的效果

const data = [
    { company: 'A公司', value1: 270, value2: 115.97, value3: 25.85, value4: 170, value5: 115 },
    { company: 'B公司', value1: 150, value2: 86.1, value3: 12.2, value4: 170, value5: 155 },
    { company: 'C公司', value1: 230, value2: 67.8, value3: 61.89, value4: 230, value5: 155 },
    { company: 'D公司', value1: 170, value2: 68.5, value3: 17.98, value4: 155, value5: 155 },
    { company: 'Q公司', value1: 150, value2: 56.21, value3: 11.06, value4: 155, value5: 155 }
  ];
    
    option = {
      tooltip: {
        trigger: 'axis',
        formatter: function (params) {
          let str = params[0].name + '<br/>'
          params.forEach(item=>{
            let a =  item.marker + item.seriesName + ': ' + item.value + '<br/>'
            str+=a
          })
          return str;
          }
        },
        title: {
            text: '各公司产值数据展示',
            top: '5%'
        },
        grid: {
            top: '15%',
            bottom: '10%'
        },
        xAxis: {
            type: 'category',
            data: data.map(d => d.company)
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '1~5月计划产值',
                type: 'bar',
                barWidth: '20%',
                stack: '1',
                stackStrategy: 'position',
                barGap: '-100%',
                data: data.map(d => d.value1),
                emphasis: { // 添加强调状态配置
                  focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素
                  itemStyle: {
                      opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明
                  }
              }
            },
            {
                name: '全年累计完成产值',
                type: 'bar',
                barWidth: '20%',
                stack: '1',
                stackStrategy: 'position',
                barGap: '-100%',
                data: data.map(d => d.value2),
                emphasis: { // 添加强调状态配置
                  focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素
                  itemStyle: {
                      opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明
                  }
              }
            },
            {
                name: '年度计划产值',
                type: 'bar',
                barWidth: '20%',
                stackStrategy: 'position',
                stack: '1',
                barGap: '0%',
                data: data.map(d => d.value3),
                emphasis: { // 添加强调状态配置
                  focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素
                  itemStyle: {
                      opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明
                  }
              }
            },
            {
                name: '5月计划产值',
                type: 'bar',
                barWidth: '20%',
                stack: '2',
                stackStrategy: 'position',
                data: data.map(d => d.value4),
                emphasis: { // 添加强调状态配置
                  focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素
                  itemStyle: {
                      opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明
                  }
              }
            },
            {
                name: '5月实际完成产值',
                type: 'bar',
                barWidth: '20%',
                stack: '2',
                stackStrategy: 'position',
                data: data.map(d => d.value5),
                emphasis: { // 添加强调状态配置
                  focus: 'series', // 或者使用 'self' 仅高亮当前 series 的图形元素
                  itemStyle: {
                      opacity: 1 // 确保高亮时的不透明度为1,保持颜色鲜明
                  }
              }
            }
        ]
    };

精彩评论(0)

0 0 举报