总结：就是echarts无法保存renderItem函数到json里，因为renderItem是个封装方法，因此需要初始化加载时重新插入renderItem即可
1.描述：控制台报错series.render is required.
原数据json如下：
{type: "bar",coordinateSystem: "rightAngle-x", // 坐标系chartStyle: {width: 8,type: "",markPoint: {data: [{label: {show: false,position: "top",color: "#00e6ff",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},},{label: {show: false,position: "top",color: "#00e6ff",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},},],},},option: {legend: {icon: "circle",show: true,itemWidth: 10,itemheight: 10,textStyle: {color: "#FFFFFF",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},left: "left",top: "top",},title: [{text: "",textStyle: {color: "#FFFFFF",fontStyle: "normal",fontWeight: "normal",fontSize: "18",},left: "left",},{text: "",textStyle: {color: "#FFFFFF",fontStyle: "normal",fontWeight: "normal",fontSize: "14",},left: "left",top: "20",},],tooltip: {trigger: "axis",axisPointer: {type: "line",lineStyle: {type: "dashed",},},backgroundColor: "transparent",borderWidth: 0,borderColor: "transparent",padding: 0,textStyle: {color: "#ffffff",},formatter: function (params) {var text = `<div style="width: 180px;height: 78px;backdrop-filter: blur(10px);background-color:#1A474266;border-radius: 6px 6px 6px 6px;border: 1px solid #2c7d72FF;"><div style="margin:8px 0 10px 10px; font-size: 12px; display: flex; justify-content: space-between"><p> 数据：</p></div><div style="margin:4px 0 9px 8px; padding:11px 10px 9px 9px;font-size: 12px;border-radius:4px;display: flex; justify-content: space-between;align-items: center;background: #1F7D7DE6;width: 164px;height: 28px;"><div style="display: flex; justify-content: space-between;"><div style="width: 10px;height: 10px;background: #3AFDF1;border-radius:50%;margin:5px 5px 0 0"></div><p>${params[0].name}</p></div> <p>${params[0].value}</p></div></div>`;return text;},},grid: {left: "3%",right: "3%",bottom: "3%",top: "48",containLabel: true,},xAxis: {type: "category",data: [],axisTick: {//刻度线show: false,},axisLine: {//轴线show: true,lineStyle: {color: "#ffffff",width: 1,},},axisLabel: {//轴标签show: true,color: "#FFFFFF",fontStyle: "normal",fontWeight: "normal",fontSize: "12",interval: "auto",rotate: 0,},splitLine: {//网格线show: false,lineStyle: {color: "#33333333",type: "dashed",},},},yAxis: {type: "value",axisTick: {//刻度线show: false,},axisLine: {//轴线show: false,lineStyle: {color: "#35404e",width: 2,},},axisLabel: {//轴标签show: true,color: "#FFFFFF",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},splitLine: {//网格线show: false,lineStyle: {color: "#33333333",type: "dashed",},},},series: [{type: "custom",renderItem: function (params, api) {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#124340FF",},},{type: "CubeRight",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#155049FF",},},{type: "CubeTop",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#135146FF",},},],};},data: [],markPoint: {data: [{type: "max",component: "最大值",symbolSize: 0,label: {show: false,position: "top",color: "#00e6ff",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},},{type: "min",component: "最小值",symbolSize: 0,label: {show: false,position: "top",color: "#00e6ff",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},},],},},{type: "custom",markPoint: {data: [{type: "max",component: "最大值",symbolSize: 0,label: {show: false,position: "top",color: "#00e6ff",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},},{type: "min",component: "最小值",symbolSize: 0,label: {show: false,position: "top",color: "#00e6ff",fontStyle: "normal",fontWeight: "normal",fontSize: "12",},},],},renderItem: (params, api) => {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#3CB0B7FF",},},{type: "CubeRight",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#4EFCDDFF",},},{type: "CubeTop",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#3AFDCEFF",},},],};},data: [],},],},}
**
2.重点问题出在这里
因为renderItem是函数当保存为json后，renderItem会丢失
**
renderItem: (params, api) => {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#3CB0B7FF",},},{type: "CubeRight",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#4EFCDDFF",},},{type: "CubeTop",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#3AFDCEFF",},},],};},
3.解决办法
在created()或mounted()生命周期时，需要对保存的json数据再次特殊处理，对option.series数组里再次插入renderItem函数！
const renderItem1 = (params, api) => {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#124340FF",},},{type: "CubeRight",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#155049FF",},},{type: "CubeTop",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#135146FF",},},],};};const renderItem2 = (params, api) => {const location = api.coord([api.value(0), api.value(1)]);return {type: "group",children: [{type: "CubeLeft",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#3CB0B7FF",},},{type: "CubeRight",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#4EFCDDFF",},},{type: "CubeTop",shape: {x: location[0],y: location[1],xAxisPoint: api.coord([api.value(0), 0]),},style: {fill: "#3AFDCEFF",},},],};};option.series[0].renderItem = renderItem1;option.series[1].renderItem = renderItem2;//渲染tooltipconst formatter = (params) => {var text = `<div style="width: 180px;height: 78px;backdrop-filter: blur(10px);background-color:#1A474266;border-radius: 6px 6px 6px 6px;border: 1px solid #2c7d72FF;"><div style="margin:8px 0 10px 10px; font-size: 12px; display: flex; justify-content: space-between"><p> 数据：</p></div><div style="margin:4px 0 9px 8px; padding:11px 10px 9px 9px;font-size: 12px;border-radius:4px;display: flex; justify-content: space-between;align-items: center;background: #1F7D7DE6;width: 164px;height: 28px;"><div style="display: flex; justify-content: space-between;"><div style="width: 10px;height: 10px;background: #3AFDF1;border-radius:50%;margin:5px 5px 0 0"></div><p>${params[0].name}</p></div> <p>${params[0].value}</p></div></div>`;return text;};option.tooltip.formatter = formatter;
