脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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正则表达式学习之贪婪和非贪婪模式实例总结

    JS正则表达式学习之贪婪和非贪婪模式实例总结

    这篇文章主要介绍了JS正则表达式学习之贪婪和非贪婪模式用法,结合实例形式总结分析了JS正则表达式中贪婪模式与非贪婪模式的具体功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • Javascript中arguments对象的详解与使用方法

    Javascript中arguments对象的详解与使用方法

    ECMAScript中的函数并不介意传递的参数有多少，也不介意是什么类型。由于JavaScript允许函数有不定数目的参数，所以我们需要一种机制，可以在 函数体内 部读取所有参数。这就是arguments对象的由来。这篇文章将详细介绍Javascript中的arguments对象和使用方法。
    2016-10-10
  • JavaScript学习笔记之ES6数组方法

    JavaScript学习笔记之ES6数组方法

    ES6给数组添加了一些新特性，而这些新特性到目前为止完全可以运用到自己的业务层。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法
    2016-03-03
  • JavaScript多种图形实现代码实例

    JavaScript多种图形实现代码实例

    这篇文章主要介绍了JavaScript多种图形实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • JS实现很酷的EMAIL地址添加功能实例

    JS实现很酷的EMAIL地址添加功能实例

    这篇文章主要介绍了JS实现很酷的EMAIL地址添加功能,实例分析了javascript操作text文本的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-02-02
  • Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解

    Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解

    这篇文章主要给大家介绍了关于Three.js利用orbit controls插件，也就是轨道控制来控制模型交互动作的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-09-09
  • 详谈innerHTML innerText的使用和区别

    详谈innerHTML innerText的使用和区别

    下面小编就为大家带来一篇详谈innerHTML innerText的使用和区别。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • HTTP 302 redirect应用及介绍

    HTTP 302 redirect应用及介绍

    这篇文章主要为大家介绍了HTTP 302 redirect应用及作用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • cocos2dx骨骼动画Armature源码剖析(一)

    cocos2dx骨骼动画Armature源码剖析(一)

    cocos2dx中的骨骼动画在程序中使用非常方便，从编辑器(cocostudio或flash插件dragonBones)得到xml或json数据，调用代码就可以直接展示出动画效果，下面通过本篇文章给大家分享cocos2dx骨骼动画Armature源码剖析，需要的朋友一起来学习吧。
    2015-09-09
  • JS调用打印机功能简单示例

    JS调用打印机功能简单示例

    这篇文章主要介绍了JS调用打印机功能的方法,结合完整实例形式分析了javascript打印机功能的相关设置与使用技巧,需要的朋友可以参考下
    2016-11-11

最新评论