如何让这段Echart代码呈现出来

如何让这段代码呈现出来


 
option = {
   backgroundColor: 'black',
   grid: {
      left: '5%',
      right: '5%',
      top: '20%',
      bottom: '15%',
      containLabel: true
   },
   tooltip: {
      trigger: "axis",
      axisPointer: {
         lineStyle: {
            color: "rgba(255,255,255,0.7)"
         }
      },
      backgroundColor: "rgba(255,255,255,0.1)",
      padding: [5, 10],
      textStyle: {
         color: "rgb(255,255,255)"
      }
   },
   legend: {
      x: "center",
      y: "15",
      icon: "stack",
      itemWidth: 6,
      itemHeight: 5,
      textStyle: {
         color: "#FFFFFF"
      },
      data: ["温度", "湿度"]
   },
   xAxis: {
      type: "category",
      data: ["8:00", "09:00", "10:00", "11:00", "12:00"],
      boundaryGap: true,
      splitLine: {
         show: false
      },
      axisTick: {
         show: false
      },
      axisLine: {
         lineStyle: {
            color: "rgba(255,255,255,0.5)"
         }
      },
      axisLabel: {
         margin: 10,
         textStyle: {
            fontSize: 14,
            color: "#DEEBFF"
         }
      }
   },
   yAxis: [
      {
         type: "value",
         position: "left",
         name: "温度",
         splitLine: {
            show: true,
            lineStyle: {
               color: ['rgba(255,255,255,0.2)']
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },
         nameTextStyle: {
            color: "#DEEBFF",
            fontSize: 12,
            lineHeight: 0
         },
         axisLabel: {
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      },
      {
         type: "value",
         name: "湿度",
         position: "right",
         axisTick: {
            show: false
         },
         splitLine: {
            show: true,
            lineStyle: {
               color: ['rgba(255,255,255,0.2)']
            }
         },
         axisLine: {
            show: true,
            lineStyle: {
               color: "rgba(255,255,255,0.3)"
            }
         },
         nameTextStyle: {
            color: "#DEEBFF",
            fontSize: 12,
            lineHeight: 0
         },
         axisLabel: {
            margin: 2,
            textStyle: {
               fontSize: 12,
               color: "#DEEBFF"
            }
         }
      }],
   series: [
      {
         name: "温度",
         type: "line",
         smooth: true,
         showSymbol: false,
         data: [20, 25, 22, 10, 36],
         itemStyle: {
            normal: {
               color: "#006CFF"
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         }
      }, {
         name: "湿度",
         type: "line",
         smooth: true,
         yAxisIndex: 1,
         showSymbol: false,
         symbol: "circle",
         symbolSize: 6,
         data: [22, 15, 36, 9, 6],
         itemStyle: {
            normal: {
               color: "#06F5FF"
            }
         },
         lineStyle: {
            normal: {
               width: 3
            }
         }
      }]
};

  • 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7519693
  • 我还给你找了一篇非常好的博客,你可以看看是否有帮助,链接:如何让echart环形,在中间位置显示数据
  • 除此之外, 这篇博客: 小程序使用 echart 图表中的 6. 重新获取数据使图表重新渲染 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 重新声明配置项,然后用setOption更新就好了,我这里是只更改x和y的值,所以就添加了两项
    在这里插入图片描述

    后面会加入一些echart常用的配置项说明,持续更新

  • 您还可以看一下 CSDN就业班老师的【数据分析-随到随学】数据可视化课程中的 01可视化Echart介绍小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    由于缺乏具体的代码和展示环境,无法确定具体的问题原因和解决方案。建议提供更加详细的信息和代码,以便更好地帮助解决问题。