Echarts实现多组柱状图重叠效果图例可用

最新推荐文章于 2024-07-31 14:40:54 发布

此人太懒

最新推荐文章于 2024-07-31 14:40:54 发布

阅读量5.7k

点赞数 6

分类专栏：图渲染 web 文章标签： echarts

本文链接：https://blog.csdn.net/dahaiaixiaohai/article/details/120097616

版权

本文介绍了如何使用 Echarts 实现多组柱状图的重叠效果，并确保图例的正常显示。通过将每一组柱状图设置在独立的 Grid 中，即使取消图例，也能保持柱子的正确位置。

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

Echarts实现多组柱状图重叠效果图例可用

描述
效果
源代码

描述

Echarts 实现柱子重叠效果, 并且保证图例正常使用.
由于同一Grid内, 有多组数据时, 取消图例会导致柱子居中, 所以, 采用一组柱子一组一Grid.

效果

在这里插入图片描述

源代码

option = {
   
    tooltip: {
   
        trigger: 'axis',
        formatter: (params, ticket, callback) => {
   
            let title = (params || [{
   '': '未知'}])[0].axisValueLabel
            let a = params.filter(_ => _.seriesName)
                    .map(_ => `${
     _.seriesName} :: ${
     _.value}`)
                    .join('</span><br/><span>');
            return `<h2>${
     title}</h2><br/><span>${
     a}</span>`;
        },
        axisPointer: {
   
            type: 'shadow', animation: true