【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;//渲染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;

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/54772.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

‌[AI问答] Auto-sklearn‌ 与 scikit-learn 区别

‌[AI问答] Auto-sklearn‌ 与 scikit-learn 区别

‌Auto-sklearn与scikit-learn的主要区别在于Auto-sklearn是一个自动化机器学习库&#xff0c;而scikit-learn是一个用于数据挖掘和数据分析的Python工具包。‌ Auto-sklearn是一个自动化的机器学习工具&#xff0c;它能够自动搜索最佳的学习算法并优化其超参数&#xff0c;通…
阅读更多...
SQLAlchemy 查询，多条件的查询需求，根据传入条件的实际情况，决定将哪些条件作为filter条件进行查询

SQLAlchemy 查询，多条件的查询需求，根据传入条件的实际情况，决定将哪些条件作为filter条件进行查询

多个条件的查询&#xff0c;使用 SQLAlchemy 的查询构建器来动态地构建查询&#xff0c;根据传入的条件参数&#xff08;condition1, condition2, condition3 等&#xff09;来决定是否将这些条件添加到查询中 class Order(Base): __tablename__ orders id Column(Integer,…
阅读更多...
Python--循环

Python--循环

在Python中&#xff0c;while循环和for循环的语法如下&#xff1a; 1. while循环 while循环会在给定条件为真时重复执行代码块。其基本语法如下&#xff1a; while 条件:# 执行的代码块示例&#xff1a; count 0 while count < 5:print(count)count 12. for循环 for循…
阅读更多...
工作安排 - 华为OD统一考试(E卷)

工作安排 - 华为OD统一考试(E卷)

2024华为OD机试（C卷+D卷）最新题库【超值优惠】Java/Python/C++合集 题目描述 小明每周上班都会拿到自己的工作清单，工作清单内包含n项工作，每项工作都有对应的耗时时长(单位h)和报酬，工作的总报酬为所有已完成工作的报酬之和。那么请你帮小明安排一下工作，保证小明在指定…
阅读更多...
科研绘图系列：R语言树结构聚类热图（cluster heatmap）

科研绘图系列：R语言树结构聚类热图（cluster heatmap）

文章目录 介绍加载R包导入数据数据预处理画图修改图形导出数据系统信息介绍 热图结合树结构展示聚类结果通常用于展示数据集中的模式和关系，这种图形被称为聚类热图或层次聚类热图。在这种图中，热图部分显示了数据矩阵的颜色编码值，而树结构（通常称为树状图或聚类树）则显…
阅读更多...
AIGAME背后的强大背景与AI币价值的崛起

AIGAME背后的强大背景与AI币价值的崛起

AIGAME平台背后汇集了强大的资本和技术支持&#xff0c;凭借蒙特加密产业基金的战略投资和汇旺集团的多元化Web3基础设施建设&#xff0c;AIGAME在全球范围内迅速崛起。平台所使用的Sleepless AI技术&#xff0c;结合区块链与AI的深度融合&#xff0c;赋能AI币&#xff0c;使其…
阅读更多...
虚拟社交的新时代：探索Facebook的元宇宙愿景

虚拟社交的新时代：探索Facebook的元宇宙愿景

随着技术的不断进步&#xff0c;社交媒体的形态也在悄然变化。Facebook&#xff08;现名Meta&#xff09;正站在这一变革的前沿&#xff0c;积极探索元宇宙的愿景。元宇宙不仅是虚拟现实&#xff08;VR&#xff09;和增强现实&#xff08;AR&#xff09;的结合&#xff0c;更是…
阅读更多...
遍历9个格子winmine!StepBlock和遍历8个格子winmine!StepBox的对决

遍历9个格子winmine!StepBlock和遍历8个格子winmine!StepBox的对决

遍历9个格子winmine!StepBlock和遍历8个格子winmine!StepBox的对决 第一部分&#xff1a;windbg调试记录。 0: kd> g Breakpoint 10 hit winmine!DoButton1Up: 001b:0100390e a130510001 mov eax,dword ptr [winmine!xCur (01005130)] 0: kd> kc # 00 winmine…
阅读更多...
LLaMA-Factory 使用 alpaca 格式的数据集

LLaMA-Factory 使用 alpaca 格式的数据集

LLaMA-Factory 使用 alpaca 格式的数据集 flyfish alpaca 格式最初与Stanford大学的一个研究项目相关联&#xff0c;该项目旨在通过少量高质量的数据来微调大型语言模型。它受到了Alpaca模型&#xff08;一种基于LLaMA的指令跟随模型&#xff09;的影响&#xff0c;该模型是在…
阅读更多...
Python 入门教程（3）基础知识 | 3.7、pass 关键字

Python 入门教程（3）基础知识 | 3.7、pass 关键字

文章目录 一、pass 关键字1、定义与用法2、pass 关键字的用法2.1、函数定义中的占位符2.2、 类定义中的占位符2.3、条件语句中的占位符2.4、循环中的占位符 3、注意事项 一、pass 关键字 1、定义与用法 pass语句用作将来代码的占位符。当执行pass语句时&#xff0c;不会有任何…
阅读更多...
【RabbitMQ 项目】服务端：服务器模块

【RabbitMQ 项目】服务端：服务器模块

文章目录 一.编写思路二.代码实践三.服务端模块关系总结 一.编写思路 成员变量&#xff1a; muduo 库中的 TCP 服务器EventLoop 对象&#xff1a;用于主线程循环监控连接事件协议处理句柄分发器&#xff1a;用于初始化协议处理器&#xff0c;便于把不同请求派发给不同的业务处理…
阅读更多...
【FastAPI】使用FastAPI和Redis实现实时通知(SSE)

【FastAPI】使用FastAPI和Redis实现实时通知(SSE)

在当今快速发展的Web应用程序中&#xff0c;实时通知已成为用户体验的重要组成部分。无论是社交媒体更新、消息通知&#xff0c;还是系统状态提醒&#xff0c;实时数据推送可以极大地提升用户互动性。本文将详细介绍如何使用FastAPI和Redis实现Server-Sent Events (SSE) 来推送…
阅读更多...
模拟电路工程师面试题

模拟电路工程师面试题

一、基础知识题 描述三极管的基本工作原理及其三种工作状态。 分析：此题考察对三极管（NPN或PNP）基本工作原理的理解，包括截止区、放大区和饱和区的特点及其条件。解释什么是反馈，并说明正反馈和负反馈的区别。 分析：反馈是放大器设计中的重要概念，正反馈会增加放大器的增…
阅读更多...
【AI】简单了解AIGC与ChatGPT

【AI】简单了解AIGC与ChatGPT

● AIGC&#xff08;AI-Generated Content&#xff0c;人工智能生成内容&#xff09;指的是利用人工智能技术自动生成内容&#xff0c;包括文本、图像、音频、视频等。AIGC的应用非常广泛。AIGC的核心在于利用AI技术来创造新的内容&#xff0c;提高生产效率&#xff0c;降低成本…
阅读更多...
java mybaits oracle插入返回主键

java mybaits oracle插入返回主键

在MyBatis中&#xff0c;要实现在插入数据后返回主键&#xff0c;可以在Mapper的XML文件中使用useGeneratedKeys属性和keyProperty属性。以下是一个示例&#xff1a; 首先&#xff0c;确保你的Oracle表有一个可以自动生成主键的字段&#xff0c;比如使用Oracle的序列。 CREAT…
阅读更多...
JMeter（需要补充请在留言区发给我，谢谢）

JMeter（需要补充请在留言区发给我，谢谢）

一、学习工具 1、CinfigElement(HTTP Request Defaults、HTTP Header Manager、HTTP Authorization、CSV Data Set Config、User Defined Variables、JDBC Connection Configuration、HTTP Cookie Manager、Random Variable) 二、协议 1、HTTP协议&#xff08;消息体数据&am…
阅读更多...
S开头的词根词缀：se-+sub-+suc/suf/supsur+sur-+super+sym/syn+

S开头的词根词缀：se-+sub-+suc/suf/supsur+sur-+super+sym/syn+

提到s这个词缀&#xff0c; 表异同&#xff0c;既表近似syn/syn&#xff0c;又表示分离se。 表方位&#xff0c;既表示上&#xff0c;又表示下。 se 70.se-表示"分开&#xff0c;离开&#xff0c;区别开" secede正式退出&#xff08;组织&#xff09;&#xff08;…
阅读更多...
oracle 数据库中的异常和游标管理

oracle 数据库中的异常和游标管理

异常和游标管理 游标&#xff1a; 用来查询数据库&#xff0c;获取记录集合&#xff08;结果集&#xff09;的指针&#xff0c;可以让开发者一次访问一行结果集&#xff0c;在每条结果集上作操作。 分类&#xff1a; 静态游标&#xff1a; 分为显式游标和隐式游标。 REF游标&…
阅读更多...
Golang | Leetcode Golang题解之第433题最小基因变化

Golang | Leetcode Golang题解之第433题最小基因变化

题目&#xff1a; 题解&#xff1a; func diffOne(s, t string) (diff bool) {for i : range s {if s[i] ! t[i] {if diff {return false}diff true}}return }func minMutation(start, end string, bank []string) int {if start end {return 0}m : len(bank)adj : make([][…
阅读更多...
OpenHarmony标准系统mipi摄像头适配

OpenHarmony标准系统mipi摄像头适配

OpenHarmony标准系统mipi摄像头适配 本文档以rk3568为例&#xff0c;讲述如何在OpenHarmony 标准系统rk设备上适配mipi摄像头。 开发环境 OpenHarmony标准系统4.1rrk3568设备摄像头ov5648,ov8858 文档约定&#xff1a;4.1r_3568为OpenHarmony标准系统源码根目录 1.适配准备:得…
阅读更多...
最新文章

Copyright @ 2022~2023