web前端之vue和echarts的堆叠柱状图顶部显示总数、鼠标悬浮工具提示、设置图例的显示与隐藏、label、legend、tooltip

---

效果图

---

html

<template><div><div><div id="idStackedColumnChart" style="width: 100%; height: 680px"></div></div></div>
</template>

---

JavaScrip

export default {name: "stackedColumnChart",mounted() {this.$nextTick(() => {this.handleStackedColumnChart();});},methods: {/*** 纵向数组求和* @param {Array} list*/verticalArraySummation(list) {let sumArray = [];for (let i = 0; i < list[0].data.length; i++) {let sum = 0;for (let j = 0; j < list.length; j++) sum += list[j].data[i];sumArray.push(sum);}return sumArray;},/*** 初始化图表*/handleStackedColumnChart() {let series = [{name: "示例1",color: "#ff0000",data: [120, 132, 101, 134, 90, 230, 210],},{name: "示例2",color: "#00ff00",data: [220, 182, 191, 234, 290, 330, 310],},{name: "示例3",color: "#0000ff",data: [150, 232, 201, 154, 190, 330, 410],},],len = series.length,zonghe = this.verticalArraySummation(series);series = series.map((item) => {return {name: item.name,itemStyle: {color: item.color,},data: item.data,};});let lenItem = {...series[len - 1],label: {normal: {show: true,position: "top",// 先把所有项的总和算出来，按照顺序放到zonghe数组中// 然后在方法中用下标对应上总和方法// return出来就是label文字的现实// formatter(params) {//   return zonghe[params.dataIndex];// },formatter: (params) => zonghe[params.dataIndex],},},};series[len - 1] = lenItem;this.$beInMotionEcharts("idStackedColumnChart", "stackedColumnChart", {title: {text: "堆叠柱形图",},xAxis: [{data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],},],legend: {// 设置show为false，即隐藏所有图例show: true,data: ["示例1", "示例2", "示例3"],},series,// 鼠标悬浮工具提示tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter(params) {let res = `<div style="font-weight: 700;">${params[0].name}</div>`,sum = 0;for (let i = 0; i < params.length; i++) {let item = params[i],items = series[item.seriesIndex];if (items.name !== null) {sum += item.data;res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;}}res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;return res;},},});},},
};

---

style

.tooltip {display: inline-block;margin-right: 5px;border-radius: 50%;width: 10px;height: 10px;
}

---

解析

网上好多文章用的都是echarts中的barGap: '-100%'让两个系列的柱子重叠，从而实现顶部显示总数。
但是这种方法只适合X轴只有一个堆叠柱状图。
现在的需求是一个X轴项，有两个或两个以上堆叠柱状图，这种方法并不适用该需求。
这种方法的思路是单独再造一个柱状图，然后移动该柱状图的位置，从而实现重叠显示。
既然这种思路不适用该需求，转变思路，直接改变柱状图的lable显示即可。

---

方式一(不推荐的方式)

---

方式二
概述

label提供了formatter方法来对显示的文字进行处理，只需要在堆叠柱状图的最后一个数据项上添加以下代码即可。
这样基本完事，后面的第二个柱状图也是这样。只要放到zonghe这个数组中的数据跟你显示的数据能一一对应上，数据就不会错，鼠标悬浮上显示的tooltip数据也不会错。

---

顶部显示

label: {normal: {show: true,position: "top",// formatter(params) {//   return zonghe[params.dataIndex];// },formatter: (params) => zonghe[params.dataIndex],},
}

---

鼠标悬浮工具提示

tooltip: {trigger: "axis",axisPointer: {type: "shadow",},formatter(params) {let res = `<div style="font-weight: 700;">${params[0].name}</div>`,sum = 0;for (let i = 0; i < params.length; i++) {let item = params[i],items = series[item.seriesIndex];if (items.name !== null) {sum += item.data;res += `<div><span class="tooltip" style="background: ${item.color};"></span>${item.seriesName}: ${item.data}</div>`;}}res += `<div><span class="tooltip" style="background: transparent;"></span>总计: ${sum}</div>`;return res;},
}