首先来看效果图：一般我们看到的直方图是这样的：与原来的直方图相比，大致有以下变化：1.柱子堆叠起来2.柱状信息的内容和内容鼠标悬停框增加百分比信息修改成这样，信息对比会更明显，视觉效果更优先。首先，定义我们的数据源。每个人的数据肯定是不一样的。这里可以参考我的数据格式，对代码进行一定的修改。重用{stack:{name:["high","higher","average","poor"]},columns:["name","higher","higher","average","Poor"],ifpercent:true,rows:[{name:"Attendance",High:276,High:162,Average:28,Poor:1},{Name:"HomeworkCompletion",High:6,High:21,Average:172,较差:268},{Name:"StudyEngagement",High:220,High:188,Average:59,Poor:0},{Name:"ExtracurricularActivityParticipation",High:218,High:186,Average:62,Difference:1}]}查看官方文档发现，只要在chartSettings属性中设置stack字段，就可以实现堆叠。所以我这里自定义了一个数据源stack字段传入，stack对象的定义格式为：stack:{xxx:["x","y","z"...]}中的几个属性array是你要选择的栈设置好栈的索引名称后，我们可以得到如下效果：接下来我们修改直方图上显示的文字。我先根据我的数据格式计算出每组的总分。this.chartData.rows.map((item,index)=>{total=0;this.chartData.columns.map((colitem,colindex)=>{if(colindex!=0){total+=item[colitem];}}）;它em.total=总计；});这里因为每个人的数据格式不一样，可以参考我的方法做一定的修改，然后修改chartsettings属性中的label属性varthat=this;this.chartSettings.label.normal.formatter=function(value,index){varcomponentIndex=value.componentIndex;vartotalcount=that.chartData.rows[componentIndex].total;返回(((value.data/totalcount).toFixed(4)*100).toString().slice(0,5)+"%");};我们在formatter方法中打印value属性并分析一下根据已知信息的比例字符串内容。这里我们将值保留到小数点后两位。接下来，我们将自定义鼠标悬停内容。我们修改选项对象选项。tooltip={trigger:"axis",axisPointer:{//轴指示器，轴触发有效type:"shadow"//默认为直线，选项为：'line'|'shadow'},//数据格式化器：function(params){letdataFunction=function(params){varcomponentIndex=params.componentIndex;vartotalcount=that.chartData.rows[组件索引]。全部的;返回(((params.value/totalcount).toFixed(4)*100).toString().slice(0,5)+"%");};String.prototype.splice=function(start,newStr){returnthis.slice(0,start)+newStr+this.slice(start);};变量str="";params.map((item,index)=>{str=that.chartData.ifpercent?str.splice(0,item.marker+item.seriesName+":"+item.value+"("+dataFunction(item)+")"+"
"):str.splice(0,item.marker+item.seriesName+":"+item.value);});str=str.splice(0,params[0].name+"
");返回海峡；}};看不懂代码也没关系，我们可以先分析一下params参数的内容params一共有四个对象，分别对应四个堆叠的柱状标记系列，代表前面的小点系列名称的名称ofcolumn,value,表示列的值。一开始我是按照顺序拼接字符串str+=item.marker+item.seriesName+":"+item.value+"("+dataFunction(item)+")"+"
"但是发现显示顺序和列的堆叠顺序是一样的，所以我重写了splice方法，让它可以把对应的字符串插入到你想插入的位置。String.prototype.splice=function(start,newStr){returnthis.slice(0,start)+newStr+this.slice(start);};这样我们所有的功能就都实现了
