设置了barMinHeight但是却不生效
查了很久发现是版本的问题
目前项目使用的版本是5.4.3，但是4.2.2之后的版本都有这个问题
image.png
官网样例上也有这个问题，可以从右上角更改版本号发现4.2.2之前的都没有这个问题
https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack&version=5.4.3&renderer=svg
image.png
遂决定用g2
<style scoped lang="less" type="text/scss">
.chart-box {
position: relative;
.empty-text {
width: 100%;
height: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
position: absolute;
top: 0;
left: 0;
text-align: center;
color: @gray-575859;
}
}
</style>
<template>
<div style="width:100%;height:100%" class="chart-box">
<div style="width:100%;height:100%" ref="chart"></div>
<div class="empty-text" v-if="isNil(chart) && (chartLoading === false || chartLoading === 'false')">
<div>
<div style="text-align: center;">
<svg width="89" height="65" viewBox="0 0 89 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_ddd_3337_6173)">
<path d="M12.5 8.5H76.5C78.7091 8.5 80.5 10.2909 80.5 12.5V48.5C80.5 50.7091 78.7091 52.5 76.5 52.5H12.5C10.2909 52.5 8.5 50.7091 8.5 48.5V12.5C8.5 10.2909 10.2909 8.5 12.5 8.5Z" fill="black"/>
</g>
<path d="M12.5 8.5H76.5C78.7091 8.5 80.5 10.2909 80.5 12.5V48.5C80.5 50.7091 78.7091 52.5 76.5 52.5H12.5C10.2909 52.5 8.5 50.7091 8.5 48.5V12.5C8.5 10.2909 10.2909 8.5 12.5 8.5Z" fill="white" stroke="#EBEDF0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 18.5H66.5C67.6046 18.5 68.5 19.3954 68.5 20.5C68.5 21.6046 67.6046 22.5 66.5 22.5H22.5C21.3954 22.5 20.5 21.6046 20.5 20.5C20.5 19.3954 21.3954 18.5 22.5 18.5Z" fill="#D5D6D9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 28.5H66.5C67.6046 28.5 68.5 29.3954 68.5 30.5C68.5 31.6046 67.6046 32.5 66.5 32.5H22.5C21.3954 32.5 20.5 31.6046 20.5 30.5C20.5 29.3954 21.3954 28.5 22.5 28.5Z" fill="#D5D6D9"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.5 38.5H44.2143C45.3189 38.5 46.2143 39.3954 46.2143 40.5C46.2143 41.6046 45.3189 42.5 44.2143 42.5H22.5C21.3954 42.5 20.5 41.6046 20.5 40.5C20.5 39.3954 21.3954 38.5 22.5 38.5Z" fill="#D5D6D9"/>
<defs>
<filter id="filter0_ddd_3337_6173" x="0.5" y="2.5" width="88" height="62" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="-1" dy="1"/>
<feGaussianBlur stdDeviation="3.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3337_6173"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dx="1" dy="4"/>
<feGaussianBlur stdDeviation="2.5"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
<feBlend mode="normal" in2="effect1_dropShadow_3337_6173" result="effect2_dropShadow_3337_6173"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="4"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0"/>
<feBlend mode="normal" in2="effect2_dropShadow_3337_6173" result="effect3_dropShadow_3337_6173"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect3_dropShadow_3337_6173" result="shape"/>
</filter>
</defs>
</svg>
</div>
<div>暂无数据~</div>
</div>
</div>
</div>
</template>
<script>
import _ from 'lodash';
import {
numberCheckProcess,
numFormat,
calculateMaxIntegerValue,
calculateMaxIntegerValue2,
numberUnitProcess, singleSort,
} from "@/utils/utils";
import moment from "moment";
export default {
props: {
chartData: {
type: Object,
default: function () {
return {
legend: ['已交付额度', '冻结额度', '当月净增预算', '预算执行率'],
dateTime: ['2024-01', '2024-02', '2024-03', '2024-04', '2024-05', '2024-06', '2024-07'],
data: [
[310000, 300000, 290000, 300000, 350000, 400000, 410000],//已交付额度
[1000, 200000, 190000, 200000, 250000, 300000, 310000],//冻结额度
[110000, 100000, 90000, 100000, 150000, 200000, 210000],//当月净增预算
// [630000, 600000, 480000, 600000, 750000, 900000, 930000],//当月净增预算
[60, 80, 90, 20, 30, 45, 75],//预算执行率
],
}
}
},
dateFormatStyle: {
type: String,
default: 'MM-DD',
},
chartLoading: {
type: Boolean,
default: false
}
},
data() {
return {
chart: null,
chartInfo: null,
}
},
watch: {
splitDragWidth: {
watch: true,
handler() {
this.chartResize();
}
},
capacityViewContentWidth: {
watch: true,
handler() {
this.chartResize();
}
},
chartData: {
immediate: true,
handler() {
this.chartInfo = this.chartData;
},
},
option: {
immediate: true,
handler(option) {
this.$nextTick(() => {
if (this.isNil(this.chartInfo)) {
// 数据为空，销毁 echart 示例
try {
this.chart.dispose();
} catch (e) {
this.chart = null;
} finally {
this.chart = null;
}
return;
}
if (!this.isNilOrEmpty(_.get(this.chartInfo, 'data'))) {
// 渲染图表
try {
this.chart.setOption(option);
} catch (e) {
this.initChart();
}
} else {
try {
this.chart.dispose();
} catch (e) {
this.chart = null;
} finally {
this.chart = null;
}
}
});
}
},
},
computed: {
splitDragWidth() {
return this.$store.getters['splitDrag/splitDragWidth'];
},
capacityViewContentWidth() {
return this.$store.getters['capacityViewContentWidth'];
},
/**
*
* 图表绘制采样：
* 'average' 取过滤点的平均值
* 'max' 取过滤点的最大值（本期使用）
* 'min' 取过滤点的最小值
* 'sum' 取过滤点的和
*
*/
option() {
let color = [
"#3F82E6",
"#28C692",
"#F5BD05",
];
let legend = [];
let xData = [];
let series = [];
let max1 = null;
let max2 = null;
if (!_.isNil(this.chartInfo)) {
xData = this.chartInfo.dateTime;
legend = this.chartInfo.legend;
// 结果集二维数组
let data = _.get(this.chartInfo, 'data', []);
//堆叠柱状图
for(let index = 0; index < (data.length - 1); index++){
let barEntry = {
name: legend[index],
type: 'bar',
stack: 'budget',
label: {
show: true,
formatter: (params) => numFormat(params.value)
},
barMinHeight: 15,//TODO? 最小高度不生效
// yAxisIndex: index,
// symbol: 'emptyCircle',
// symbolSize: 0,
// smooth: true,
// lineStyle: {
// width: 1.5,
// },
// sampling: 'max',
data: data[index],
// emphasis: {
// itemStyle: {
// borderWidth: 4
// }
// }
};
series.push(barEntry);
}
//折线图
let lineData = data[data.length-1]
let lineEntry = {
name: legend[data.length-1],
type: 'line',
yAxisIndex: 1,
// symbol: 'emptyCircle',
symbolSize: 0,
smooth: true,
lineStyle: {
width: 1.5,
},
sampling: 'max',
data: lineData,
emphasis: {
itemStyle: {
borderWidth: 4
}
}
};
series.push(lineEntry);
let stackTotalNum = this.sumArrays(data.slice(0, data.length - 1))
max1 = calculateMaxIntegerValue(_.max(_.map(stackTotalNum, (o) => {
return !this.isNil(numberCheckProcess(o, true)) ? +o : Number.MIN_VALUE;
})));
max2 = calculateMaxIntegerValue2(_.max(_.map(data[data.length - 1], (o) => {
return !this.isNil(numberCheckProcess(o, true)) ? +o : Number.MIN_VALUE;
})), 10000);
}
return {
color: color,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
},
},
legend: {
type: 'scroll',
orient: 'horizontal',
bottom: 0,
itemGap: 25,
itemWidth: 16,
itemHeight: 8,
textStyle: {
fontFamily: 'PingFang SC',
fontStyle: 'normal',
fontWeight: 400,
fontSize: 12,
lineHeight: 18,
textAlign: 'center',
color: '#252626',
},
data: legend,
},
grid: {
left: 0,
right: 10,
bottom: 20,
top: 30,
containLabel: true
},
xAxis: [{
type: 'category',
boundaryGap: true,
axisLine: {
lineStyle: {
color: '#252626',
},
},
axisLabel: {
interval: 'auto',
showMinLabel: true,
showMaxLabel: true,
textStyle: {
fontFamily: 'PingFang SC',
fontStyle: 'normal',
fontWeight: 400,
fontSize: 12,
lineHeight: 18,
textAlign: 'center',
color: '#252626',
},
formatter: (param) => {
if (param === _.nth(xData, 0)) {
let year = _.nth(_.split(param, '-'), 0);
let date = moment(new Date(param)).format(this.dateFormatStyle);
return date + '\n{year| (' + year + ')}';
} else {
return moment(new Date(param)).format(this.dateFormatStyle);
}
},
rich: {
year: {
color: '#898A8C',
}
},
},
data: xData,
}],
yAxis: [
{
type: 'value',
position: 'left',
name: '元',
offset: 0,
min: 0,
max: max1,
interval: Math.ceil(max1 / 5),
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#CED3E0',
type: 'dashed',
},
},
axisLabel: {
textStyle: {
fontFamily: 'PingFang SC',
fontStyle: 'normal',
fontWeight: 400,
fontSize: 12,
lineHeight: 18,
textAlign: 'center',
color: color[0],
},
formatter: (value) => {
let data = numberUnitProcess(value, 2, true);
return data.data + data.unit;
},
},
},
{
type: 'value',
name: '百分比',
position: 'right',
offset: 0,
min: 0,
max: max2,
interval: _.round(max2 / 5, 5),
axisLine: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#CED3E0',
type: 'dashed',
},
},
axisLabel: {
formatter: function(value){
return value + '%'
},
textStyle: {
fontFamily: 'PingFang SC',
fontStyle: 'normal',
fontWeight: 400,
fontSize: 12,
lineHeight: 18,
textAlign: 'center',
color: color[1],
},
},
formatter: (value) => {
let data = numberUnitProcess(value, 2, true);
return data.data + data.unit;
},
},
],
series: series,
};
},
},
methods: {
// 初始化图表
initChart() {
if (this.chart == null) {
// noinspection all
this.chart = echarts.init(this.$refs.chart);
this.chart.resize();
this.chart.setOption(this.option);
} else {
try {
this.chart.dispose();
} catch (e) {
this.chart = null;
} finally {
this.chart = null;
this.initChart();
}
}
},
// 图表 resize
chartResize() {
try {
this.chart.resize();
} catch (e) {
this.chart = null;
}
},
handleWindowFocus(event) {
if(event.isTrusted && !_.isNil(this.chart)) {
this.chartResize();
}
},
/*
*二维数组里每列加和
*输入:[
* [1, 2, 3],
* [4, 5, 6],
* [7, 8, 9]
* ]
* 输出:[12, 15, 18]
*/
sumArrays(arr) {
if (arr.length === 0) {
return [];
}
// 获取第一个子数组的长度，假定所有子数组长度相同
const len = arr[0].length;
// 初始化结果数组
const result = new Array(len).fill(0);
for (let i = 0; i < arr.length; i++) {
for (let j = 0; j < len; j++) {
result[j] += arr[i][j];
}
}
return result;
},
// 工具方法
keys(object) {
return _.keys(object);
},
get(object, key) {
return _.get(object, key);
},
getDefault(object, key) {
return _.get(object, key, '');
},
getDefaultDe(object, key, de) {
return _.get(object, key, de);
},
nth(array, n) {
return _.nth(array, n);
},
isNil(data) {
return _.isNil(data) || _.trim(data) === '';
},
indexOf(data, str) {
if (_.isNil(data) || _.trim(data) === '') {
return -1;
}
return data.indexOf(str);
},
length(object, key) {
let data = _.get(object, key, []);
if (_.isNil(data) || !_.isArray(data)) {
return 0;
} else {
return data.length;
}
},
moment(datetime, format) {
return moment.unix(datetime).format(format);
},
numFormat(num) {
return numFormat(num);
},
numberCheckProcess(data, isReturnNull = true) {
return numberCheckProcess(data, isReturnNull);
},
toString(data) {
return _.toString(data);
},
includes(arr, item) {
return _.includes(arr, item);
},
isNilOrEmpty(data) {
return _.isNil(data) || _.trim(data) === '' || !_.isArray(data) || data.length === 0;
},
},
mounted() {
window.addEventListener('resize', this.chartResize);
window.addEventListener('focus', this.handleWindowFocus);
},
beforeDestroy() {
if (this.chart != null) {
this.chart.dispose();
this.chart = null;
}
window.removeEventListener('resize', this.chartResize);
window.removeEventListener('focus', this.handleWindowFocus);
}
}
</script>
