【echarts】报错series.render is required.

于 2024-09-26 14:37:18 发布
阅读量199 收藏 4
点赞数 4
文章标签： echarts javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43861689/article/details/142555019
版权

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

在这里插入图片描述

鱼干～
关注
echarts 饼图移动端_基于echarts 灵活封装react饼图组件
weixin_39642998的博客
12-22 258
基于echarts 灵活封装react饼图组件这段时间比较忙，没什么时间封装组件库，同事都不怎么会使用echarts，今天随手封装了一个echart的饼图， 百十来行的代码同事用了都说好！废话不多说封装组件之前，首先要考虑我们的组件，都要包含哪些功能；窗口随动，echart的窗口resize，是需要我们自己写的，这个肯定封装(注意要做防抖处理)；每次设置画布的元素的时候都需要传入宽高，这也需要，省...
vue开发中遇到的问题（文章过长，建议ctrl+F搜索关键字）
qq_43238125的博客
12-15 4702
一些在前端开发中比较零散的问题
Echarts 报错：series.render is required
I_Order的博客
10-19 2325
笔记： 使用Echarts 【custom】自定义 报：series.render is required 原因：没有使用【renderItem】 renderItem: function(params, api) { var categoryIndex = api.value(0); //这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。 var start = api.coord([api.value(1), ca
解决报错Error in mounted hook: “Error: series.type should be specified.“
GRSuperman的博客
10-08 670
解决报错
react+vite+antD+reduce+echarts项目完整记录
黄钢的博客
03-28 1383
之前写前端项目，都是用的vue，从最开始的vue2到后来的vue3，断断续续写了3年，打包工具也从webpack转到了vite，全局数据管理工具从vuex转到了pinia。总体而言，vue3对比vue2，有非常明显的提升，vite比webpack打包的速度更是快了无数倍，至于pinia和vuex，因人而异，我更喜欢pinia，组合式api的写法深得我心。总而言之一句话，我是全方面拥抱了vue3的新技术栈，当然，除了TS，TS对后端比较友好，我只能算半个后端，用不用无所谓。
【无标题】
remember_slll的博客
03-06 248
::infostate，驱动应用的数据源；view，以声明方式将state映射到视图；actions，响应在view上的用户输入导致的状态变化。以下是一个表示“单向数据流”理念的简单示意：但是，当我们的应用遇到多个组件共享状态多个视图依赖于同一状态。来自不同视图的行为需要变更同一状态。对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。
前端面试题（react）
小尘的博客
06-20 9906
性能优化分为2个方面setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了接收旧的 state 和 action，返回新的 state受控组件就是可以被 react 状态控制的组件 在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）
【前端】Vue+Element UI案例：通用后台管理系统-代码总结（已开源）
热门推荐
karshey的博客
11-16 1万+
这辈子不要再吃项目丢失的苦
【React】Day6-9 极客项目
weixin_63681863的博客
04-22 534
CRA是一个底层基于webpack快速创建React项目的脚手架工具。
layui数据表格 table.render 报错的解决方法
01-19
一、报错信息 Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. Wed Jan 23 15:20:18 CST 2019 There was an unexpected error (type=Internal...
解决koa2 ctx.render is not a function报错问题
01-01
最近在学习使用koa2，在尝试用koa2复写之前用express写的一个入口文件的时候发现命令行报错ctx.render is not a function   项目路径如下   app.js是之前用express写的入口文件 koa.js是用koa2复写的入口...
phantomjs 需要的 js 插件 echarts-convert.js
04-28
通过调用ECharts的`render`方法，根据option绘制图表。接着，利用PhantomJS的屏幕截图功能，将生成的图表保存为图像。由于是在服务器端运行，所以这一过程无需用户的交互，可以自动化批量处理。 生成的图像通常以...
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4355
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 306
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
基于Springboot+Vue的高校教室资源管理系统的设计与实现（含源码+数据库）
m0_59480939的博客
09-25 182
这个系统有三个角色：管理员、学生和教师。管理员可以在前台查看教室信息列表并进行预约，而在后台可以管理学生、教师、教室类型、教室信息、教室预约、系统公告和轮播图等模块，支持新增、查看、修改、删除和审核等操作。系统支持管理员后台登录，但不支持学生和教师后台登录，学生和教师则支持前台注册与登录，而管理员不支持前台登录和注册。数据库版本: mysql5.7或8.0。JDK版本: Java JDK1.8。开发系统:Windows10/11。数据库可视化工具: navicat。架构模式:MVC/前后端分离。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 348
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
方法论大师 JavaScript 版本
最新发布
PlayerYK的专栏
09-25 154
无论什么行业、什么问题，都会有一群人擅长通过简单的拼凑和归纳，炮制出一套“高深”的方法论。这些方法论通常看似逻辑严密、层层递进，实则全是空洞的概念堆砌，毫无实质作用。最搞笑的是，他们居然能为任何事物总结出一个“公式”，让人乍一看觉得有理，仔细思考后发现不过是披着华丽外衣的废话。是不是开始觉得这些“方法论大师”其实并没有提供真正有价值的建议？如果你也曾被这些空洞的概念忽悠过，那么来吧，我为你提供一个...
语言的复合语句
编程语言技巧经验分享
09-21 490
在函数中可以声明和定义变量，包含多条执行语句，概念上和复合语句类似。事实上，二者在复合语句的概念上几乎没有区别。类定义，用{}包起来，也是复合语句的一种。
koa ctx.render is not a function
09-08
"koa ctx.render is not a function"是一个常见的错误信息，它表示在koa应用中尝试使用ctx.render函数时出现了问题。一般来说，这个错误是由于缺少正确的模板引擎或配置引起的。 在koa框架中，ctx.render函数用于将模板和数据合并生成最终的HTML页面，并将其作为响应发送给客户端。但是，如果没有正确配置或安装模板引擎，就会导致这个错误。 要解决这个问题，首先需要确保已经安装了正确的模板引擎。在koa中，常用的模板引擎有ejs、pug、handlebars等。可以使用npm进行安装，例如使用ejs模板引擎：npm install ejs --save。 安装完成后，需要在koa应用程序中正确配置模板引擎。在使用ctx.render函数之前，需要先将模板引擎与koa应用程序关联起来。具体的步骤可能因使用的模板引擎而有所不同，但一般来说，需要将模板引擎实例化，并将其作为中间件添加到koa应用程序中。 以下是一个示例，展示了如何正确地使用ejs模板引擎和koa应用程序： ``` const Koa = require('koa'); const views = require('koa-views'); const app = new Koa(); // 配置ejs模板引擎 app.use(views(__dirname + '/views', { extension: 'ejs' // 指定模板文件的后缀名 })); // 使用ctx.render函数来渲染模板 app.use(async (ctx) => { await ctx.render('index', { title: 'Koa' }); // 渲染index.ejs模板，并传递title参数 }); app.listen(3000, () => { console.log('Server is running on port 3000'); }); ``` 上述代码中，通过使用koa-views中间件来配置ejs模板引擎，并指定模板文件的后缀名为.ejs。然后，在中间件中使用ctx.render函数来渲染名为index的模板，并传递title参数。 总之，要解决"koa ctx.render is not a function"错误，需要确保正确安装了模板引擎，并正确配置引擎与koa应用程序的关联。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值