getGoldCharts() {
this.goldChartLoading = true;
saleWeightChart({
start: this.queryParams.createdDateRange?.[0] ? this.queryParams.createdDateRange[0] + " 00:00:00" : '',
end: this.queryParams.createdDateRange?.[1] ? this.queryParams.createdDateRange[1] + " 23:59:59" : ''
}).then(({ code, data }) => {
if (code == 0) {
this.goldChart = this.echarts.init(document.getElementById('goldCharts'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
title: {
text: '黄金发货量(克)',
},
grid:{
left: '2%',
right: '4%',
bottom: '2%',
containLabel: true
},
yAxis: {
splitLine:{
show:true,
lineStyle:{
type:'dashed'
}
}
},
xAxis: {
type: 'category',
axisTick: {
show: false,
},
axisLabel: {
show: true,
rotate: 30, //倾斜显示
interval: 0 // 显示所有标签
},
data: data.map((item, did) => item.preDate)
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter',
backgroundColor: "#C0C4CC",
fillerColor: "#409EFF",
borderColor: "#C0C4CC", // 设置边框颜色
height: 20,
bottom: 3, // dataZoom-slider组件离容器下侧的距离
},
],
color: ['#09BD3C', '#C0C4CC', '#FD5353', '#EBEEF5'],
series: [
{
name: '待发货',
type: 'bar',
stack: 'total',
barWidth: '30%',
data: data.map((item, did) => item.waitDeliveryGoldWeight),
},
{
name: '已发货',
type: 'bar',
stack: 'total',
barWidth: '30%',
data: data.map((item, did) => item.deliveryGoldWeight)
},
{
name: '预警值',
type: 'bar',
stack: 'total',
barWidth: '30%',
data: data.map((item, did) => item.exceedGodlWeight)
},
],
};
const series = option.series;
series.push({
name: '总计',
type: 'bar',
stack: 'y', //注意与前面的stack属性不同!!!!
barWidth: '30%',
label:{
normal:{
show:true,
position:'top',
}
},
color: 'rgba(0,0,0,0)', //透明
// 计算每列的总和
data: data.map(item => item.waitDeliveryGoldWeight + item.deliveryGoldWeight + item.exceedGodlWeight),
z: -1, // 隐藏在最底层
barGap: '-100%', //与堆叠柱条重合
})
this.goldChart.setOption(option);
}
}).finally(() => {
this.goldChartLoading = false;
});
},
堆叠柱状图数据显示在内部的话,会把返回值为0的也展示出来,所以需要单独处理下
series: [
{
name: '待发货',
type: 'bar',
stack: 'total',
barWidth: '30%',
label:{
normal:{
show:true,
position:'inside',// 显示在柱子里
// 这里处理下
formatter: function(params) {
return params.value > 0 ? params.value : '';
}
}
},
data: data.map((item, did) => item.waitDeliveryGoldWeight),
},
],
注意
因为这里x轴只有一列堆叠柱状图,所以采用的是series.push这种方法,百度上查询出来说x轴只多列堆叠柱状图的话不能用此方法(待验证)
我这里的 预警值 是不包含在原有总计里面的,所以在总计这里把每个返回值都给加起来了。