【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;
相关推荐
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试1 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc2 小时前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter