echarts堆叠柱状图中显示百分比，tooltip展示百分比和数量 |
您所在的位置：网站首页 › 柱形图上方怎么显示百分比 › echarts堆叠柱状图中显示百分比，tooltip展示百分比和数量 |
echarts堆叠柱状图中显示百分比，tooltip展示百分比和数量
|
一.需求 1.后端返回的是堆叠图的每个类型的数量组成的数组，需要计算出每一个横向柱状里每个类型占的百分比，然后显示 2.点击某个柱状时，弹窗tooltip里要展示这个柱状中每个类型的百分比和数量 二.效果图 三.代码如下 //要给echarts容器一个宽度或者高度,要不然echarts不会展示 drawChart(){ //渲染echarts的函数 var xxx={} var option2={//echarts的配置项 tooltip: { //弹窗tooltip内展示的内容和样式 trigger: 'axis', axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow' // 默认为直线，可选为：'line' 或'shadow' }, backgroundColor:"rgba(255, 255, 255, 0.93)",//弹窗背景色 extraCssText:'box-shadow:0 0 0',//设置弹窗的阴影 formatter: function (params) {//弹窗内容 //弹窗里圆点的对应的样式，用模板字符串的方式 let dotColor = '' let dotColor2 = '' let dotColor3 = '' let dotColor4 = '' let dotColor5 = '' //弹窗里的内容+样式 return ''+params[0].axisValue +''+ '' + dotColor + ''+ params[0].seriesName +''+'：'+(params[0].data)+'%' + " " +''+xxx[params[0].axisValue][0]+''+ '' + dotColor2 +''+ params[1].seriesName + ''+'：' +(params[1].data)+'%' + " " +''+xxx[params[1].axisValue][1]+'' + '' + dotColor3 +''+ params[2].seriesName + ''+'：' +(params[2].data)+'%' + " " +''+xxx[params[2].axisValue][2]+'' + '' + dotColor4 +''+params[3].seriesName + ''+'：' +(params[3].data)+'%' + " " +''+xxx[params[3].axisValue][3]+'' + '' + dotColor5 +''+params[4].seriesName + ''+'：' +(params[4].data)+'%' + " " +''+xxx[params[4].axisValue][4]+'' + '' } }, legend: { selectedMode:false, data: ['完成', '较好', '一般', '较差', '无进展'], bottom: '4%', left: 'center', itemHeight: 9, itemWidth:9, itemGap: 25, icon: "circle", textStyle: { fontSize: 12, color: '#8A90A3' }, }, color:["#5CA4FC","#7F5EF3","#FBCF36","#42D6CC","#D9DCE4"], grid: { left: '3%', right: '4%', bottom: '8%', containLabel: true }, xAxis: { type: 'value', show: false }, yAxis: { type: 'category', data: [], axisLabel: {//y轴文字的配置 textStyle: { color: "rgba(138, 144, 163, 1)", }, }, axisLine: {//y轴线的颜色以及宽度 show: true, lineStyle: { color: "#ECEDF0", width: 1, type: "solid" }, } }, series: [ { name: '完成', type: 'bar', stack: '总量', label: { show: true, position: 'insideLeft',//完成这个类型的数据在该段柱状里面靠左呈现 formatter: '{c}%', textStyle: { fontSize: 10, } }, data:[] }, { name: '较好', type: 'bar', stack: '总量', label: { show: true, position: 'insideLeft',//较好这个类型的数据在该段柱状里面靠左呈现 formatter: '{c}%', textStyle: { fontSize: 10, } }, data:[] }, { name: '一般', type: 'bar', stack: '总量', label: { show: true, position: 'insideLeft',//一般这个类型的数据在该段柱状里面靠左呈现 formatter: '{c}%', textStyle: { fontSize: 10, } }, data: [] }, { name: '较差', type: 'bar', stack: '总量', label: { show: true, position: 'insideLeft',//较差这个类型的数据在该段柱状里面靠左呈现 formatter: '{c}%', textStyle: { fontSize: 10, } }, data: [] }, { name: '无进展', type: 'bar', stack: '总量', label: { show: true, position: 'insideLeft',//无进展这个类型的数据在该段柱状里面靠左呈现 formatter: '{c}%', textStyle: { fontSize: 10, } }, data:[] } ] } //将后端返回的y轴的数据，即部门名称 var part = this.part //后端返回的5个类型分别的数量组成的5个数组 var data = this.zhudata var percent = [[],[],[],[],[]]; //提前定义一个数组，里面每一个数组是承接计算好的百分比组成一个类型的数组 var sum = []; //定义一个数组，里面的数是每个柱状里数量相加的总数 for (var i = 0; i |
注意：图片里由于有些数据是0，所有呈现时重叠了【本文地址】
今日新闻 |
推荐新闻 |