【echarts】报错series.render is required.

🕗 发布于 2024-09-27 05:00 echarts javascript 前端

总结：就是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;

在这里插入图片描述

原文地址：https://blog.csdn.net/weixin_43861689/article/details/142555019

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：「实战应用」如何用DHTMLX Gantt集成工具栏部件更好完成项目管理？
下一篇：数据仓库-数据质量规范

macOS开发环境配置与应用
在本文中，我们详细介绍了如何在macOS上配置一个强大的开发环境，并通过实际案例展示了如何创建和运行一个简单的Node.js Web应用。通过安装和使用各类工具，您能够实现高效的开发流程。
阅读更多2024-09-27
mac 上配置Jmeter代理进行web脚本录制过程&容易踩坑的点
jmeter启动代理服务器录制脚本、jmeter证书问题
阅读更多2024-09-27
电脑usb接口封禁如何实现？5种禁用USB接口的方法分享！(第一种你GET了吗？）
通过BIOS设置、设备管理器、注册表编辑器、专业的USB端口管理软件以及物理移除USB接口等方法，企业可以根据自身需求和实际情况，选择适合的方法来禁用USB接口。因此，对USB接口进行封闭管理，可以有
阅读更多2024-09-27
Hadoop FileSystem Shell 常用操作命令
HDFS 常用命令
阅读更多2024-09-27
java 解析excel （网络资源）
以下是一个简单的Java程序，用于读取Excel文件中的数据（参数类型为文件路径网络资源如：http://192.168.xx.xx:8080/upload/gjcTemporarySt
阅读更多2024-09-27
Fabric V2.5 通用溯源系统——使用Hyperledger Caliper压力测试
Caliper是一款测试区块链性能的工具，支持Hyperledger Fabric、Ethereum等，支持丰富的测试配置参数，测试完成后将直接输出报告，相较于tape更加专业，但是配置稍微有些复杂。
阅读更多2024-09-27
tauri中加载本地文件图片或者下载网络文件图片后存储到本地，然后通过前端页面展示
有一个需求是需要将本地上传的文件或者网络下载的文件存储到本地，并展示在前端页面上的。要想实现上述需求，需要三个步骤，配置相应的文件和文件夹访问权限，然后将文件存储到软件的相应目录中，再从目录中加载这个
阅读更多2024-09-27
CVE-2024-44902 Thinkphp反序列化漏洞
Thinkphp v6.1.3至v8.0.4版本中存在反序列化漏洞，攻击者可利用此漏洞执行任意代码。
阅读更多2024-09-27
SpringBoot 项目打成 jar 后加载外部的配置文件
其实配置项的动态刷新是通过不断的轮询Consul的HTTP API，检测相关的配置目录是否发生了变化来实现的，轮询的间隔时间可以通过spring.cloud.consul.config.watch.d
阅读更多2024-09-27
【Linux】部署 flask
这样的命令在ssh终端退出后，python进程也会被杀掉需要创建一个自定义的系统服务，来保证python程序能够在后台运行。1.创建系统服务内容如下：[Unit][Service][Install]E
阅读更多2024-09-27

【echarts】报错series.render is required.

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

2.重点问题出在这里

3.解决办法

相关文章