使用echarts简单实现双柱状图重叠效果

最新推荐文章于 2024-08-27 12:00:00 发布

_freely

最新推荐文章于 2024-08-27 12:00:00 发布

阅读量6.4k

点赞数 1

分类专栏： echarts js

本文链接：https://blog.csdn.net/hbjiankely/article/details/109232572

版权

js 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Echarts 4.8.0以上版本创建具有圆角和背景色的双柱状图。关键配置包括在series中设置itemStyle和backgroundStyle，以及调整xAxis和yAxis的属性。同时，提供了详细的代码示例，包括tooltip的自定义格式化，以及数据映射。注意，背景圆角效果需要确保Echarts版本符合要求。

摘要由CSDN通过智能技术生成

如何使用echarts简单实现双柱状图重叠效果

在这里插入图片描述

代码实现

在series中配置如下代码
// 设置柱状的圆角
itemStyle: {
  barBorderRadius: 10
},
// 允许展示背景图
showBackground: true,
// 设置背景图颜色和圆角
backgroundStyle: {
  color: 'rgba(255, 255, 255, 0.2)',
  barBorderRadius: 10
}

柱状图横向展示配置

// X轴设置type为value,y轴设置为category即可
xAxis: {
    type: "value",
    max: 100
  },
  yAxis: {
    type: "category",
    data: this.data.parkNameList
  }

完整代码如下

let chart = echarts.init(document.getElementById("todayIncome"));
let option = {
  tooltip: {
    trigger: "axis",
    formatter: (v) => {
      return `名称：${v[0].name}<br/>饱和度：${v[0].data.value}%<br/>已使用占比：${v[0].data.useBerth}/${v[0].data.allBerth}`;
    }
  },
  grid: {
    left: "5%",
    top: "0",
    bottom: "20",
  },
  xAxis: {
    type: "value",
    splitLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    max: 100
  },
  yAxis: {
    type: "category",
    inverse: true,
    lineHeight: 20,
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    splitLine: {
      show: false,
    },
    data: this.data.parkNameList,
    axisLabel: {
      show: false,
    }
  },
  series: [
    {
      yAxisIndex: 0,
      name: "value",
      itemStyle: {
        barBorderRadius: 10
      },
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(255, 255, 255, 0.2)',
        barBorderRadius: 10
      },
      barWidth: 18,
      type: "bar",
      data: this.data.data.map((item, i) => {
        let itemStyle = {
          color: "#00B7C2",
        };
        return {
          value: item.percentage,
          useBerth: item.useBerth,
          allBerth: item.allBerth,
          itemStyle: itemStyle,
        };
      }),
      label: {
        normal: {
          color: "#fff",
          show: true,
          position: [0, "25px"],
          textStyle: {
            fontSize: 12,
          },
          formatter: function (a, b) {
            return a.name;
          }
        }
      }
    }
  ]
};
chart.setOption(option);