【echarts】报错series.render is required.
总结：就是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;
//渲染tooltip
const 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;
