脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Echarts柱状图同时显示百分比原始值

Echarts柱状图实现同时显示百分比+原始值+汇总值效果实例

 更新时间：2024年08月20日 10:47:13   作者：aimmon  
echarts是一款功能强大、灵活易用的数据可视化库,它提供了丰富的图表类型和样式,包括柱状图,这篇文章主要给大家介绍了关于Echarts柱状图实现同时显示百分比+原始值+汇总值效果的相关资料,需要的朋友可以参考下

原始效果：

柱状图：https://echarts.apache.org/examples/zh/editor.html?c=bar-stack-normalization

二开效果1：

核心逻辑

同时显示百分比和原始值

 label: {
      show: true,
      position: 'inside',
      formatter: (params) => {
        const rawValue = rawData[params.seriesIndex][params.dataIndex];
        const percentage = Math.round(params.value * 1000) / 10;
        return `${rawValue} \n(${percentage}%)`;
      }
    },

 显示汇总值

// Add a new series for displaying total values
series.push({
    name: 'Total',
    type: 'bar',
    stack: 'total',
    itemStyle: {
        color: 'rgba(0,0,0,0)' // 透明颜色
    },
    label: {
        show: true,
        position: 'top',
        formatter: params => `Total: ${totalData[params.dataIndex]}`
    },
    data: totalData.map(value => 0.01) // 微小的值以便能显示标签但不影响图形
});

代码解释

新增显示总值的系列：

  • 您添加了一个名为 'Total' 的新系列到 series 数组中。
  • 这个系列使用 type: 'bar'，并且堆叠在名为 'total' 的堆栈中，这与其他系列使用的堆栈名称一致。这确保了柱状图的对齐，即使该系列是不可见的。

透明的柱状图：

  • itemStyle 被设置为 color: 'rgba(0,0,0,0)'，使得该系列的柱状图完全透明。这是一个巧妙的方法，可以确保这些柱状图不增加任何可见的元素到图表中，但仍然可以在它们上面放置标签。

标签配置：

  • label 对象中的 show: true 确保显示标签。
  • position 设置为 'top'，因此标签显示在每个柱状图堆栈的顶部。
  • formatter 函数自定义了标签的文本。它使用 params.dataIndex 获取 totalData 中对应的值，并显示为 Total: {value}。这提供了关于每个类别（星期几）中所有堆叠元素的总值的清晰信息。

带有微小值的数据：

  • 该系列的 data 数组被设置为 totalData.map(value => 0.01)。这将每个数据点设置为一个非常小的值（0.01）。这些微小的值的目的是为标签创建一个占位符，而不影响图表的实际可视化。由于柱状图本身是透明的，这个值确保了标签可以正确地定位和显示，而不会为柱状图增加任何视觉重量。

分析：

  • 使用透明的柱状图来显示标签：通过使用透明的柱状图，您可以在柱状图堆栈的顶部放置标签，而不会改变图表的视觉外观。这是一种常见的技术，当您希望添加额外的信息而不影响数据的可视化时。
  • 数据中的微小值：使用微小值（0.01）确保标签与柱状图相关联，但不会显著地影响堆叠柱状图的高度。这在ECharts中尤其有用，因为标签是与特定的数据点相关联的。
  • 堆叠配置：使用相同的堆叠标识符（'total'）使透明柱状图与其余堆叠柱状图完美对齐，确保标签位置的一致性。

这种方法对于突出显示总值，同时保持数据可视化的完整性非常有效。这是一个为图表提供额外信息而不使其变得混乱或扭曲的巧妙解决方案。

完整版代码

// There should not be negative values in rawData
const rawData = [
  [100, 302, 301, 334, 390, 330, 320],
  [320, 132, 101, 134, 90, 230, 210],
  [220, 182, 191, 234, 290, 330, 310],
  [150, 212, 201, 154, 190, 330, 410],
  [820, 832, 901, 934, 1290, 1330, 1320]
];
const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};
const series = [
  'Direct',
  'Mail Ad',
  'Affiliate Ad',
  'Video Ad',
  'Search Engine'
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
      position: 'inside',
      formatter: (params) => {
        const rawValue = rawData[params.seriesIndex][params.dataIndex];
        const percentage = Math.round(params.value * 1000) / 10;
        return `${rawValue} \n(${percentage}%)`;
      }
    },
    data: rawData[sid].map((d, did) =>
      totalData[did] <= 0 ? 0 : d / totalData[did]
    )
  };
});
// Add a new series for displaying total values
series.push({
    name: 'Total',
    type: 'bar',
    stack: 'total',
    itemStyle: {
        color: 'rgba(0,0,0,0)' // 透明颜色
    },
    label: {
        show: true,
        position: 'top',
        formatter: params => `Total: ${totalData[params.dataIndex]}`
    },
    data: totalData.map(value => 0.01) // 微小的值以便能显示标签但不影响图形
});
option = {
  legend: {
    selectedMode: false
  },
  grid,
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series
};

二开效果2：

完整版代码

// There should not be negative values in rawData
const rawData = [
  [100, 302, 301, 334, 390, 330, 320],
  [320, 132, 101, 134, 90, 230, 210],
  [220, 182, 191, 234, 290, 330, 310],
  [150, 212, 201, 154, 190, 330, 410],
  [820, 832, 901, 934, 1290, 1330, 1320]
];

const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}

const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};

const series = [
  'Direct',
  'Mail Ad',
  'Affiliate Ad',
  'Video Ad',
  'Search Engine'
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
      position: 'inside', // Position the labels on top of the bars
      formatter: (params) => {
        const originalValue = rawData[sid][params.dataIndex];
        const percentage = (originalValue / totalData[params.dataIndex] * 100).toFixed(2);
        return `${originalValue} \n(${percentage}%)`;
      },
    },
    data: rawData[sid].map((d, did) =>
      totalData[did] <= 0 ? 0 : d / totalData[did]
    )
  };
});

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    },
    formatter: (params) => {
      const total = totalData[params[0].dataIndex];
      const header = `<div style="font-weight:bold">${params[0].axisValue}</div>
                      <div>Total: ${total}</div>`;
      const body = params.map(param => {
        const originalValue = rawData[param.seriesIndex][param.dataIndex];
        const percentage = (originalValue / total * 100).toFixed(2);
        return `<div>${param.seriesName}: ${originalValue} (${percentage}%)</div>`;
      }).join('');
      return header + body;
    }
  },
  legend: {
    selectedMode: false
  },
  grid,
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series
};

实现思路与修改：

计算每天的总访问数：首先遍历 rawData 并计算每一天所有来源的总访问数。这些总数被存储在 totalData 数组中。

配置每个数据源系列：为每一个数据源创建一个 series 对象。每个系列代表一种访问来源，并包含一些配置选项，如类型、堆叠设置、标签显示方式等。

配置标签显示：为了让用户在图表上直观地看到原始值和占比，我们需要在每个柱形上添加标签。标签的内容包括原始值和百分比。

配置提示框（Tooltip）：为了提供更丰富的信息，我们配置了一个提示框，当用户悬停在柱形上时会显示当天的总访问数和各个来源的具体数值及占比。

二开效果3：

完整版代码

// There should not be negative values in rawData
const rawData = [
  [100, 302, 301, 334, 390, 330, 320],
  [320, 132, 101, 134, 90, 230, 210],
  [220, 182, 191, 234, 290, 330, 310],
  [150, 212, 201, 154, 190, 330, 410],
  [820, 832, 901, 934, 1290, 1330, 1320]
];

const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}

const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};

const series = [
  'Direct',
  'Mail Ad',
  'Affiliate Ad',
  'Video Ad',
  'Search Engine'
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
      position: 'inside', // Position the labels on top of the bars
      formatter: (params) => {
        const originalValue = rawData[sid][params.dataIndex];
        const percentage = (originalValue / totalData[params.dataIndex] * 100).toFixed(2);
        return `${originalValue} (${percentage}%)`;
      },
    },
    itemStyle: {
      emphasis: {
        // focus : 'series',
        label: {
          show: true,
          position: 'top',
          fontSize: 12,
          color: 'red',
          formatter: (params) => totalData[params.dataIndex]
        }
      }
    },
    data: rawData[sid].map((d, did) =>
      totalData[did] <= 0 ? 0 : d / totalData[did]
    )
  };
});

option = {
  legend: {
    selectedMode: false
  },
  grid,
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series
};

解释：

  • 添加了 itemStyle 选项，其中包含了 emphasis 子项。
  • 在 emphasis 中设置了 label，用于在鼠标悬停时显示总值。
  • emphasis.label.show 设为 true，表示在鼠标悬停时显示标签。
  • emphasis.label.position 设为 'bottom'，使标签显示在柱子底部。
  • emphasis.label.fontSize 设为 12，调整字体大小。
  • emphasis.label.formatter 使用 totalData[params.dataIndex] 显示当前柱子对应的总值

柱状图转换为条形图

核心代码修改，变更xAxis,yAxis 中的 x y 即可

 条形图同时展示百分比、原始值、汇总值功能

// There should not be negative values in rawData
const rawData = [
  [100, 302, 301, 334, 390, 330, 320],
  [320, 132, 101, 134, 90, 230, 210],
  [220, 182, 191, 234, 290, 330, 310],
  [150, 212, 201, 154, 190, 330, 410],
  [820, 832, 901, 934, 1290, 1330, 1320]
];
const totalData = [];
for (let i = 0; i < rawData[0].length; ++i) {
  let sum = 0;
  for (let j = 0; j < rawData.length; ++j) {
    sum += rawData[j][i];
  }
  totalData.push(sum);
}
const grid = {
  left: 100,
  right: 100,
  top: 50,
  bottom: 50
};
const series = [
  'Direct',
  'Mail Ad',
  'Affiliate Ad',
  'Video Ad',
  'Search Engine'
].map((name, sid) => {
  return {
    name,
    type: 'bar',
    stack: 'total',
    barWidth: '60%',
    label: {
      show: true,
       position: 'inside',
      formatter: (params) => {
        const rawValue = rawData[params.seriesIndex][params.dataIndex];
        const percentage = Math.round(params.value * 1000) / 10;
        return `${rawValue} \n(${percentage}%)`;
      }

    },
    data: rawData[sid].map((d, did) =>
      totalData[did] <= 0 ? 0 : d / totalData[did]
    )
  };
});
series.push({
    name: 'Total',
    type: 'bar',
    stack: 'total',
    itemStyle: {
        color: 'red' // 透明颜色
    },
    label: {
        show: true,
        // position: 'middle',
        formatter: params => `Total: ${totalData[params.dataIndex]}`
    },
    data: totalData.map(value => 0.0) // 微小的值以便能显示标签但不影响图形
});
option = {
  legend: {
    selectedMode: false
  },
  grid,
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series
};

效果展示

总结 

到此这篇关于Echarts柱状图实现同时显示百分比+原始值+汇总值效果的文章就介绍到这了,更多相关Echarts柱状图同时显示百分比原始值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JS中的算法与数据结构之常见排序（Sort）算法详解

    JS中的算法与数据结构之常见排序（Sort）算法详解

    这篇文章主要介绍了JS中的算法与数据结构之常见排序（Sort）算法,结合实例形式详细分析了js常见排序算法中的冒泡排序、选择排序、插入排序、希尔排序、归并排序、快速排序等算法相关实现技巧与操作注意事项,需要的朋友可以参考下
    2019-08-08
  • js 事件处理函数间的Event物件是否全等

    js 事件处理函数间的Event物件是否全等

    在非IE，事件对象Propagation之间的处理函数，或同dom节点触发的多个函数之间的Event物件是全等的。与绑定形式[addEventListener/DOM0]无关。
    2011-04-04
  • 表格单元格交错着色实现思路及代码

    表格单元格交错着色实现思路及代码

    重点在于:以空间换时间，循环确定所着颜色;base确定起始颜色，i确定本次需要着色的单元格，感兴趣的朋友可以参考下哈
    2013-04-04
  • Javascript函数技巧学习

    Javascript函数技巧学习

    这篇文章主要介绍了Javascript函数技巧学习，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下
    2022-07-07
  • JS实现数组的增删改查操作示例

    JS实现数组的增删改查操作示例

    这篇文章主要介绍了JS实现数组的增删改查操作,结合实例形式分析了javascript针对数组的追加、获取、删除、添加、修改等常见操作技巧与相关注意事项,需要的朋友可以参考下
    2018-08-08
  • JS实现的五级联动菜单效果完整实例

    JS实现的五级联动菜单效果完整实例

    这篇文章主要介绍了JS实现的五级联动菜单效果,结合完整实例形式分析了js多级联动菜单的完整实现步骤,涉及JS数组遍历、扩展及元素节点操作相关技巧,需要的朋友可以参考下
    2017-02-02
  • 简单的js计算器实现

    简单的js计算器实现

    这篇文章主要为大家详细介绍了如何实现简单js计算器的方法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 详解webpack中的publicpath

    详解webpack中的publicpath

    这篇文章主要介绍了webpack中的publicpath,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • JavaScript实现数组对象去重的多种方法

    JavaScript实现数组对象去重的多种方法

    这篇文章主要介绍了JavaScript实现数组对象去重的多种方法，使用set对象或使用`reduce`方法，本文结合示例代码给大家介绍的非常详细，需要的朋友参考下吧
    2023-02-02
  • js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)

    js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)

    这篇文章主要为大家详细介绍了js实现ctrl+v粘贴上传图片，兼容chrome，firefox，ie11，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论