堆叠柱状图显示具体数据和百分比

堆叠柱状图tooltip同时显示具体数据和百分比，这里要先将数据处理成[{value：123，num：456},{value：123，num：456}]这样的格式。(num可以是随便什么名字)

// 计算百分比const setDataValue = (dataOne: any, dataTwo: any) => {const res: any = [];Object.keys(dataOne).forEach((item) => {const total: number | any = Object.values(dataOne).reduce((pre: number, ele: any) => {return pre + ele;},0,);const totalT: number | any = dataTwo? Object.values(dataTwo).reduce((pre: number, ele: any) => {return pre + ele;}, 0): 0;const tempO = ((dataOne[item] / total) * 100).toFixed(2);const tempT = ((dataTwo[item] / totalT) * 100).toFixed(2);// 保证所有数据加起来不超过100const temp = [{value: Math.floor(tempO * 100) / 100,num: dataOne[item],},{value: Math.floor(dataT * 100) / 100,num: dataTwo[item],},];res.push(temp);});return res;}

这个函数只适用于对象类型的数据，数组类型的需要稍加更改（因为数组计算百分比更简单我就不写了）

formatter: function (params: any) {// 使用模版字符串加map，页面会出现逗号，在map的末尾加上.join('')就不会有逗号了const toolData = params.map(function (item: any) {// 这句是为了防止传入的数据为undefined或者不是字符串// 将数据处理成每隔3位加一个逗号的格式const num = item.data.num? item.data.num.toString().replace(/(?=(\B)(\d{3})+$)/g, ','): 0;// 这句是为了防止传入的数据为undefinedconst value = item.data.value ? item.data.value : 0;return `<div style="display: flex;"><div style="flex: 1;margin-bottom: 5px;text-align: left;"><div style="background-color: ${item.color};width: 8px;height: 8px;border-radius: 50%;display: inline-block;font-size: 14px;vertical-align: middle;"></div><div style="display: inline-block;font-size: 14px;vertical-align: middle;margin-left: 8px;">${item.seriesName}</div></div><div style="width: 50px;text-align: right;">${value}%</div><div style="flex: 1;margin-bottom: 5px;text-align: right;">${num}人</div></div>`;}).join('');return `<div style="width: 280px;padding: 0 10px;font-family: PingFangSC-Regular;font-size: 14px;color: #2E2E2E;"><div style="margin-bottom: 13px;">${params[0].name}</div>${toolData}</div>`;},

也可以使用模版引擎（但是要注意框架是否支持，且在这个模版字符串中只能使用行内样式，我试过其他方式都没有作用，希望能有大佬帮忙解惑）

堆叠柱状图显示具体数据和百分比相关推荐

【Python画图】matplotlib画折线图plt.plot、柱状图plt.bar、堆叠柱状图、饼图plt.pie以及自定义坐标轴的位置、显示汉字
一.折线图 1.常规折线图 import matplotlib.pyplot as plt import matplotlib.font_manager as fm#这样设置以后可以在图中显示中文 ...
echarts 堆叠柱状图
methods: {// 堆叠柱状图显示总数drawHistorygram() {const myChart = echarts.init(this.$refs.historygramEchart)/ ...
hicharts堆叠柱状图堆叠数据标签显示百分比
hicharts的堆叠柱状图,对于一些数据的统计有着很好的数据体验,但是堆叠的数据标签,好像只提供了一个总和的展示,如但有的时候,我们需要统计一些数据的对比情况,比如我想知道如上图中的小刘的销售额占 ...
关于使用echarts堆叠柱状图百分比显示的问题
关于使用echarts堆叠柱状图百分比显示的问题平常工作没有涉及到echarts,所以平常也没有去关注图表这一块,然后碰到一个需求,要求使用堆叠柱状图,但是数值是需要百分比显示的,不是在所获取到的数 ...
echarts 堆叠柱状图在顶部显示数据总数
项目需求: 在堆叠柱状图顶部显示该柱条所有数据的总和. 效果图: 代码实现: //原有堆叠柱状图数据 let series = [{name: '优秀',type: 'bar',stack: 'x', ...
pyecharts 实现显示数据为百分比的柱状图
pyecharts是做数据分析的好帮手,柱状图比较简单,网站例子不够多,一般柱状图就是直接传两组数据就搞掂了,如果想要显示数据为百分比,比如下图例子. 需要做两处调整. 1.Y轴内容 2.标签内容查 ...
ECharts堆叠柱状图动态数据label显示总和和this指向问题
1.当数据为动态渲染时,获取series的数据,然后在最后一项添加label对象 let option; // 图标参数配置 let xData = []; let legendData = []; ...
echart堆叠柱状图，顶部显示堆叠柱总数的技巧
有这么些堆叠柱状图,想要在每个堆叠柱的顶端显示总数,这时我们可以在series里面再push一个bar,这个bar的值为前面柱子数据的总数和,因此高度是等高的. 记得这个新push的bar的stack ...
可视化图表之奥妙——百分比堆叠柱状图
百分比堆叠柱状图是属于堆叠柱状图的一种,是指将每个柱子进行分割以显示相同类型下各个数据的占比大小情况.百分比堆叠柱形图上柱子的各个层代表的是该类别数据占该分组总体数据的百分比,但不适用于对比不同分组内 ...
【python科研绘图】封装接口直接利用DataFrame绘制百分比堆叠柱状图
封装接口直接利用DataFrame绘制百分比柱状图 1. 背景前言 2. 官方网址示例 2.1 matplotlib_percentage_stacked_bar_plot 2.2 percent-s ...

堆叠柱状图显示具体数据和百分比

堆叠柱状图显示具体数据和百分比相关推荐

最新文章

热门文章