【echarts】报错series.render is required.

总结:就是echarts无法保存renderItem函数到json里,因为renderItem是个封装方法,因此需要初始化加载时重新插入renderItem即可

1.描述:控制台报错series.render is required.

原数据json如下:

bash 复制代码
{
        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会丢失

**

bash 复制代码
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函数!

bash 复制代码
    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;
相关推荐
图表制作解说(目标1000个图表)15 分钟前
ECharts柱状图-带圆角的堆积柱状图,附视频讲解与代码下载
echarts·统计分析·数据可视化·柱状图·大屏可视化
前端拾光者19 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_1817901448037 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge