学习过程中将笔记跟大家分享，希望对大家也有所帮助，共同成长进步💪~\
如果大家喜欢，可以点赞或留言💕~~，谢谢大家⭐️⭐️⭐️~
文章首发于掘金https://juejin.cn/post/7105940204628017182
需求：将堆叠图每个类型的数据数值进行转换，计算出每一个横向柱状里每个类型占的百分比，然后显示
效果图：
代码如下：
mychart2() {
var xxx = {};
let markvalue = 90;
let paddingStyle;//根据数值动态设置padding样式
if (0 <= markvalue && markvalue < 10) {
paddingStyle = [10, 7];
} else if (10 <= markvalue && markvalue < 100) {
paddingStyle = [10, 5];
} else {
paddingStyle = [14, 5];
}
option = {
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 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#F15887;"></span>'
let dotColor2 = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#0D4E89;"></span>'
//弹窗里的内容+样式
return '<span style="font-size:14px;font-weight: 600;color: #20253B">'+params[0].axisValue +'</span>'+ '<br>' +
dotColor +'<span style="color: #20253B">'+ params[0].seriesName + '：' + '</span>' + '<span style="color: #20253B;">' + (params[0].data)+'%' + ' ' + '</span>' + '<span style="color: #20253B;">' +xxx[params[0].axisValue][0]+'</span>' + '<br>' +
dotColor2 +'<span style="color: #20253B">'+ params[1].seriesName + '：' + '</span>' + '<span style="color: #20253B;">' + (params[1].data)+'%' + ' ' + '</span>' + '<span style="color: #20253B;">' +xxx[params[1].axisValue][1]+'</span>' + '<br>'
}
},
legend: {
data: ['a', 'b'],
orient: "horizontal",//vertical
x: 'center',
// y: 'bottom',
// right: '-50%',
bottom: '2%',
icon: "roundRect1",
selectedMode: false,//取消图例上的点击事件
itemWidth: 16, // 设置宽度
itemHeight: 10, // 设置高度
itemGap: 10,// 设置间距
textStyle: {//文字根据legend显示
color: "#FFFFFF",
fontSize: 12,
},
},
grid: {
left: '8%',
top: '18%',
right: '8%',
bottom: '12%',
containLabel: true
},
yAxis: {
type: 'category',
triggerEvent: true,
data: [],
axisLine: {
show: false
},
axisLabel: {
color: "#FFFFFF",
fontSize: '14',
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
show: false,
alignWithLabel: true,
lineStyle: {
color: '#0C4F81',
type: 'solid'
}
},
},
xAxis: {
type: 'value',
// max: maxy,
nameTextStyle: {
color: '#4F88BD',
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: 'Microsoft YaHei',
},
axisLine: {
show: false,
lineStyle: {
color: "#0C4F81"
}
},
axisLabel: {
// show: false,
color: "#4F88BD",
fontSize: '12',
formatter: '{value}'
},
splitLine: {
show: false,
lineStyle: {
type: "dotted",
color: "#0C4F81"
}
},
axisTick: {
show: false
},
},
series: [
{
name: 'a',
type: 'bar',
barMaxWidth: 15,
// zlevel: 1,
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
label: {
show: true,
formatter: '{c}%',
// position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: "rgba(252, 175, 159, 1)"
},
{
offset: 1,
color: "rgba(241, 88, 135, 1)"
}
]),
}
},
data: [],
},
{
name: 'b',
type: 'bar',
barMaxWidth: 15,
// zlevel: 1,
stack: 'Ad',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
label: {
show: true,
formatter: '{c}%',
// position: 'top',
color: '#ffffff'
},
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: "rgba(13, 78, 137, 1)"
},
{
offset: 1,
color: "rgba(13, 78, 137, 1)"
}
]),
}
},
markLine: {
data: [
{ name: '考核临界线', xAxis: markvalue },
],
silent: true,
symbol: 'none',//去掉箭头
itemStyle: {
normal: {
lineStyle: {
color: '#FA7F3C',
type: 'solid'
},
label: {
formatter: '{c}%',
show: true,
backgroundColor: '#FFF7F2',
color: '#DB6525',
fontSize: '100%',
borderColor: '#FFF7F2',
formatter: function (v) {
var s = markvalue;
return s + '%';
},
padding: paddingStyle,
borderRadius: 50,
}
}
},
},
data: [],
},
]
};
let echartData = [{
name: "部门1",
value1: 120,
value2: 80,
},
{
name: "部门2",
value1: 10,
value2: 90,
},
{
name: "部门3",
value1: 60,
value2: 40,
},
{
name: "部门4",
value1: 90,
value2: 10,
},
{
name: "部门5",
value1: 24,
value2: 76,
}];
let yAxisData1 = echartData.map(v => v.value1);
let yAxisData2 = echartData.map(v => v.value2);
var xAxisData = echartData.map(v => v.name);
var zhudata = [];
zhudata.push(yAxisData1,yAxisData2);
// var xAxisData = ['部门1', '部门2', '部门3','部门4','部门5'];
// var zhudata = [
// [20, 110,10,230,123],
// [180, 10,120,70,34],
// ]
//将后端返回的y轴的数据，即部门名称
var part = xAxisData;
//后端返回的2个类型分别的数量组成的2个数组
var data = zhudata;
var percent = [[], []];
//提前定义一个数组，里面每一个数组是承接计算好的百分比组成一个类型的数组
var sum = [];
//定义一个数组，里面的数是每个柱状里数量相加的总数
for (var i = 0; i < 2; i++) {
//由于只有2个类型，所以最外层循环2次
for (var j = 0; j < part.length; j++) {
//先循环Y轴部门的长度
const n = sum[j] || 0;
sum[j] = data[i][j] + n;
//计算每个柱状的数量的总数
}
}
for (var i = 0; i < part.length; i++) {
for (var j = 0; j < 2; j++) {
var v = (data[j][i] / sum[i] * 100).toFixed(0);
//计算此类型占整个柱状的百分比，取一位小数
if (sum[i] === 0) v = '0.0';
percent[j][i] = v;
//再把百分比竖向调转位置放到数组里
}
}
part.forEach((item, i) => {
//将部门循环
let arr = [];
for (let j = 0; j < data.length; j++) {
arr.push(data[j][i]);
//把每个横向数组的数据竖向取值变成一个数组
}
xxx[item] = arr;
//把部门每一项item当做一个动态key，将计算好的数据当做value循环插入进xxx这个数组里；等于将部门和数据关联成key和value的形式
})
for (var i = 0; i < 2; i++) {
option.series[i].data = percent[i];
//把计算好的百分比的每一个数组循环挨个赋值到配置项option2里的每个类型的数据series[i]中的数据源
}
for (let i = 0; i < part.length; i++) {
option.yAxis.data[i] = part[i];
//把部门数据循环赋值到配置项option2里的y轴数据
}
var myChart = echarts.init(document.getElementById('profitTotal2'));
myChart.setOption(option);
},具体效果可以复制到本地尝试和调整自己想要的结果
最后谢谢大家阅读⭐️⭐️⭐️，如果喜欢，可以点赞或留言哟💕
