方式适用于，处理数据中有0 ，nu l l,undefined,会在视图上占位问题的解决
关键词：echarts柱状图 x轴数据为0占位情况 多X轴展示。echarts柱状图数据为0占位，视图不需要占位。echarts柱状图数据为0隐藏
当时用了各种的ai 描述问题，但是并不能解决我的问题。于是我就自己写了一点点，其中一些处理成我想要的数据，那些方法都是由这些ai提供的，目前来看作为一个工具还是可以，我只需要给他明确的思路和题目能完成大部分任务。
问题的图
解决后的图
解决方式和解决思路-----使用自定义绘图的方式计算x轴的偏移量解决这个问题
echarts.apache.org/zh/option.h…
下面我根据我自己的这个图来说明下我的解决思路和方式，有借鉴意义，实际使用需要根据你们自己的数据处理
遇到这个问题的肯定都是试过，把数据改为,0,nuill,undefined 但是视图上还是会占位的情况，
如果把数据过滤了呢，则会导致数据对应不上。
后来我寻思了寻思，可以用custom自己画，鼓捣了三天终于鼓捣出来了。
具体的实现过程
Series里面的da ta是个数组对象，分为三个大组根据这三个绑定上ke y，用于后面计算 横竖的数据缺的数据，
偏移量数据计算方式
let x = xStart - (pairedData?.length * 20) + (params.seriesIndex * 20)
起始位置减掉 这组数据总长度的宽度。加上当前数据的宽度，目的是整体左移动 让整体居中点。
let targetKeyIndex = Object.keys(inputData)?.findIndex(f => f == key)
let reduceNum = emptyDataCountsKeyReduce(emptyDataCountsArr, targetKeyIndex - 1, dataFind.key)
// 横向计算是否 都有数据
let isRowEmpty = Object.values(emptyDataCountsArr?.[targetKeyIndex]).every(value => value == 0)
let rowEmptyNum = emptyDataCountsArr?.[targetKeyIndex] ? Object.values(emptyDataCountsArr?.[targetKeyIndex]).filter(value => value === 0).length : 0
let num = (reduceNum + targetKeyIndex)
if (isRowEmpty) {
num = num + rowEmptyNum - (emptyDataCountsArr?.length - 1)
}
x -= 20 * num
根据数据来计算，当前数据的之前组的数据有没有空的如果有空的 统计出来，乘他的个数，就算数来这条需要向左偏移多少进行覆盖为空的这些视图，横向在进行计算下 当前数据是不是都是空如果是的需要在把空的加上
核心代码
//生成每一条 Series
const createEChartsSeries = (inputData, searchIndicatorsData, xAxisData) => {
console.log(inputData, "==inputData");
console.log(searchIndicatorsData, "==searchIndicatorsData");
console.log(xAxisData, "==xAxisData");
const output = [];
let emptyDataCountsArr = []
for (const key in inputData) {
const pairedData = pairByKey(inputData[key], xAxisData);
// 竖项计算
const emptyDataCounts = countColEmptyData(pairedData, xAxisData);
console.log(emptyDataCounts, "===emptyDataCounts===");
debugger
emptyDataCountsArr.push(emptyDataCounts)
console.log(pairedData, "===pairedData=1111=");
console.log(key, "====key==111111");
pairedData.forEach((element, index) => {
// 自定义画柱状图
const series = {
name: key,
type: 'custom',
renderItem: (params, api) => {
console.log(params, "===params====params===");
let dataFind = element[params.dataIndex]
console.log("==========xxxxxxx", params?.seriesIndex);
if (!dataFind) return {
type: 'rect',
shape: {
// 设置一个非常小的矩形，视觉上不可见
width: 0,
height: 0
}
};
// 判斷这组中空值有多少个
// let countEmptyNum = countEmptyValues(pairedData, index, params.dataIndex)
const dataIndex = params.dataIndex;
const value = dataFind.value; //
const platformId = dataFind.platformId; //
// 获取柱子的起始和结束坐标
const xStart = api.coord([dataIndex, 0])[0];
const xEnd = api.coord([dataIndex + 1, 0])[0];
const yStart = api.coord([dataIndex, 0])[1];
const yEnd = api.coord([dataIndex, value])[1];
// 计算柱子的宽度和高度
const rectHeight = yStart - yEnd;
// let x = xStart + Math.abs(xEnd - xStart) * 0.2 * params.seriesIndex + params?.dataIndex * 20
let x = xStart - (pairedData?.length * 20) + (params.seriesIndex * 20)
// if (isCheck === -1) {
// x = x - (params?.dataIndex * 20)
// }
// if (isCheck === 1) {
// x = x - 30
// }、
// emptyDataCounts
let targetKeyIndex = Object.keys(inputData)?.findIndex(f => f == key)
let reduceNum = emptyDataCountsKeyReduce(emptyDataCountsArr, targetKeyIndex - 1, dataFind.key)
// 横向计算是否 都有数据
let isRowEmpty = Object.values(emptyDataCountsArr?.[targetKeyIndex]).every(value => value == 0)
let rowEmptyNum = emptyDataCountsArr?.[targetKeyIndex] ? Object.values(emptyDataCountsArr?.[targetKeyIndex]).filter(value => value === 0).length : 0
console.log(reduceNum, "===reduceNum===");
console.log(targetKeyIndex, "===targetKeyIndex===");
console.log(Number(isRowEmpty), "===isRowEmpty===");
console.log(rowEmptyNum, "===rowEmptyNum===");
// 1
let num = (reduceNum + targetKeyIndex)
if (isRowEmpty) {
num = num + rowEmptyNum - (emptyDataCountsArr?.length - 1)
}
x -= 20 * num
// 2
// if (emptyDataCountsArr?.[targetKeyIndex - 1] && emptyDataCountsArr?.[targetKeyIndex - 1][dataFind.key]) {
// x = x - 20 * emptyDataCountsArr?.[targetKeyIndex - 1][dataFind.key]
// }
// 蓝色有四个，绿色有三个 countEmptyNum知道每一组中的空值个数，
console.log(x, "==========xxxxxxx", params.seriesIndex);
console.log(key, "====key==========");
console.log(dataFind.key, "====dataFind=key=========");
console.log(dataFind, "====dataFind==========");
console.log(xStart, "====xStart==========");
console.log(value, "====value==========");
console.log(emptyDataCountsArr?.[targetKeyIndex - 1], "===emptyDataCountsArr?.[targetKeyIndex - 1]==");
console.log(emptyDataCountsArr?.[targetKeyIndex], "===emptyDataCountsArr?.[targetKeyIndex]===");
console.log(emptyDataCountsArr, "==emptyDataCountsArr===");
return {
type: 'rect',
name: value,
shape: {
x: x,
y: yEnd,
width: 20,
height: rectHeight,
},
style: {
fill: searchIndicatorsColor[platformId],
// platformId == '0' ? '#5470C6' : '#91CC75', // 根据分类设置颜色
borderRadius: [4, 4, 0, 0],
},
};
},
data: element,
}
// 使用默认的柱状图
// const series = {
// name: key,
// type: 'bar',
// data: element.map(item => ({barWidth: item?.value ? '20%' :'1%',...item})),
// itemStyle: {minHeight: 0, maxHeight: 0,borderRadius: [4, 4, 0, 0],},
// // itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#615a5a' }, formatter:function(params){ if(params.value==0){ return ''; }else { return params.value; } } } } },
// emphasis: {show: false}
// };
output.push(series);
});
}
return output;
}
最终的echartsOptions
{
"label": {
"show": true
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
{
"name": "抖音-近30天新增作品数",
"icon": "circle",
"textStyle": {
"color": "#5470C6"
},
"itemStyle": {
"color": "#5470C6"
}
},
{
"name": "测试",
"icon": "circle",
"textStyle": {
"color": "#911175"
},
"itemStyle": {
"color": "#911175"
}
},
{
"name": "微博-近30天阅读量",
"icon": "circle",
"textStyle": {
"color": "#91CC75"
},
"itemStyle": {
"color": "#91CC75"
}
}
],
"top": 10,
"type": "scroll",
"width": "80%"
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true,
"top": "60"
},
"xAxis": {
"type": "category",
"data": [
"张学友",
"周深",
"周杰伦"
],
"axisLabel": {
"interval": 0,
"rotate": 30
}
},
"yAxis": {
"type": "value",
"axisLabel": {}
},
"series": [
{
"name": "抖音-近30天新增作品数",
"type": "custom",
"data": [
{
"topicName": "#张学友",
"topicId": 225,
"platformId": 0,
"dataMap": {
"1": 12,
"6": 22
},
"showName": "抖音-近30天新增作品数",
"key": "张学友",
"indicator": "1",
"value": 12
},
{
"topicName": "#周深",
"topicId": 225,
"platformId": 0,
"dataMap": {
"1": 12,
"6": 22
},
"showName": "抖音-近30天新增作品数",
"key": "周深",
"indicator": "1",
"value": 12
},
{
"topicName": "#周杰伦",
"topicId": 224,
"platformId": 0,
"dataMap": {
"1": 45,
"6": 33
},
"showName": "抖音-近30天新增作品数",
"key": "周杰伦",
"indicator": "1",
"value": 45
}
]
},
{
"name": "抖音-近30天新增作品数",
"type": "custom",
"data": [
{
"topicName": "#张学友222",
"topicId": 225,
"platformId": 0,
"dataMap": {
"1": 12,
"6": 69
},
"showName": "抖音-近30天新增作品数",
"key": "张学友",
"indicator": "1",
"value": 12
},
{
"topicName": "#周深222",
"topicId": 225,
"platformId": 0,
"dataMap": {
"1": 12,
"6": 69
},
"showName": "抖音-近30天新增作品数",
"key": "周深",
"indicator": "1",
"value": 12
},
""
]
},
{
"name": "抖音-近30天新增作品数",
"type": "custom",
"data": [
{
"topicName": "#张学友111",
"topicId": 227,
"platformId": 0,
"dataMap": {
"1": 32,
"6": 44
},
"showName": "抖音-近30天新增作品数",
"key": "张学友",
"indicator": "1",
"value": 32
},
{
"topicName": "#周深111",
"topicId": 227,
"platformId": 0,
"dataMap": {
"1": 32,
"6": 44
},
"showName": "抖音-近30天新增作品数",
"key": "周深",
"indicator": "1",
"value": 32
},
""
]
},
{
"name": "抖音-近30天新增作品数",
"type": "custom",
"data": [
{
"topicName": "张学友演唱会",
"topicId": 5649,
"platformId": 0,
"dataMap": {
"1": 88,
"6": 77
},
"showName": "抖音-近30天新增作品数",
"key": "张学友",
"indicator": "1",
"value": 88
},
"",
""
]
},
{
"name": "微博-近30天阅读量",
"type": "custom",
"data": [
{
"topicName": "张学友",
"topicId": 5648,
"platformId": 2,
"dataMap": {
"1": 55,
"6": 66
},
"showName": "微博-近30天阅读量",
"key": "张学友",
"indicator": "6",
"value": 66
},
{
"topicName": "周深",
"topicId": 5648,
"platformId": 2,
"dataMap": {
"1": 55,
"6": 66
},
"showName": "微博-近30天阅读量",
"key": "周深",
"indicator": "6",
"value": 66
},
{
"topicName": "周杰伦",
"topicId": 5818,
"platformId": 2,
"dataMap": {
"1": 30,
"6": 65
},
"showName": "微博-近30天阅读量",
"key": "周杰伦",
"indicator": "6",
"value": 65
}
]
},
{
"name": "微博-近30天阅读量",
"type": "custom",
"data": [
"",
{
"topicName": "周深演唱会",
"topicId": 5649,
"platformId": 2,
"dataMap": {
"1": 88,
"6": 77
},
"showName": "微博-近30天阅读量",
"key": "周深",
"indicator": "6",
"value": 77
},
{
"topicName": "周杰伦演唱会",
"topicId": 5819,
"platformId": 2,
"dataMap": {
"1": 0,
"6": 34
},
"showName": "微博-近30天阅读量",
"key": "周杰伦",
"indicator": "6",
"value": 34
}
]
},
{
"name": "微博-近30天阅读量",
"type": "custom",
"data": [
"",
"",
{
"topicName": "周杰伦演唱会11",
"topicId": 5819,
"platformId": 2,
"dataMap": {
"1": 0,
"6": 59
},
"showName": "微博-近30天阅读量",
"key": "周杰伦",
"indicator": "6",
"value": 59
}
]
},
{
"name": "测试",
"type": "custom",
"data": [
{
"topicName": "张学友测试",
"topicId": 12121,
"platformId": 3,
"dataMap": {
"1": 88,
"3": 77,
"6": 77
},
"showName": "测试",
"key": "张学友",
"indicator": "1",
"value": 88
},
{
"topicName": "周深测试",
"topicId": 12121,
"platformId": 3,
"dataMap": {
"1": 88,
"3": 57,
"6": 77
},
"showName": "测试",
"key": "周深",
"indicator": "1",
"value": 88
},
{
"topicName": "周杰伦测试",
"topicId": 12121,
"platformId": 3,
"dataMap": {
"1": 88,
"3": 27,
"6": 77
},
"showName": "测试",
"key": "周杰伦",
"indicator": "1",
"value": 88
}
]
},
{
"name": "测试",
"type": "custom",
"data": [
"",
{
"topicName": "周深测试111",
"topicId": 12121,
"platformId": 3,
"dataMap": {
"1": 88,
"3": 33,
"6": 77
},
"showName": "测试",
"key": "周深",
"indicator": "1",
"value": 88
},
""
]
}
]
}
