接口写好了吗 2022-04-11 14:25 采纳率: 80.2%
浏览 619
已结题

echarts如何更改option的配置并不用从新请求后台拿数据

需求:我请求后台拿数据渲染了图表后,我想要通过点击一个按钮,然后让图表上的节点数值显示和隐藏。就是series内的那个show。
我试过把show后面填变量,然后点击按钮修改变量,但是这样图表并不会刷新,如果要刷新成有数值的,就要从新调用一下接口从哪数据渲染就可以。但是这一直掉接口也不好,有什么办法可以让他不用掉接口从新拿数据就能前台操作更新配置吗。


    topGraph(val) {
      var myChart = this.$echarts.init(this.$refs["topechart"]);
      var option = {
        color: ["#222222", "#ff0000"],
        title: {
          text: val.unStandedTitle,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%",
        },
        legend: {
          data: ["实际", "指标"],
          right: 100,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: 10,
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          //X轴刻度信息
          data: val.xaxisList,
          axisLabel: {
            interale: 0, //坐标轴刻度标签的显示间隔,设置成 0 强制显示所有标签
            rotate: 0, //设置日期显示样式(倾斜度)
          },
        },
        yAxis: [
          {
            type: "value",
            min: val.minPercentage,
            max: val.maxPercentage,
            interval: val.intervalInt,
            axisLabel: {
              formatter: "{value}" + "%",
            },
          },
        ],
        series: [
          {
            name: "实际",
            type: "line",
            symbol: "circle",
            symbolSize: 9,
            data: val.unStandedArray,
            label: {
              show: this.isShownbr,
            },
            lineStyle: {
              width: 5, //设置线条粗细
            },
          },
          {
            name: "指标",
            type: "line",
            symbol: "circle",
            symbolSize: 0,
            data: val.indexArray,
            label: {
              show: this.isShownbr,
            },
            lineStyle: {
              width: 5, //设置线条粗细
            },
          },
        ],
      };
      //初始化表格
      myChart.clear();
      myChart.setOption(option);
      //监听,根据视口变化动态从新渲染表格
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  • 写回答

3条回答 默认 最新

  • 溪风沐雪 2022-04-11 14:49
    关注

    这个好像是需要重新执行myChart.setOption(option),其中的option可以简化为你需要改变的那几个参数:

    
    myChart.setOption({
        series: [
              {
                label: {
                  show: this.isShownbr,
                }
              },
              {
                label: {
                  show: this.isShownbr,
                }
              },
            ]
      });
    

    ```

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 4月19日
  • 已采纳回答 4月11日
  • 创建了问题 4月11日

悬赏问题

  • ¥50 unitywebrequest分段下载导致报错,如何解决?
  • ¥15 错误使用 gretna_GUI_PreprocessInterface>RunBtn_Callback
  • ¥15 WPF如何用Chart绘画出Y轴的左边数据
  • ¥15 pycharm无法查看内置代码
  • ¥15 跑hls xfopencv的例程standalone_hls_axi_example出的错误,csim没问题,c synthesis出的错误
  • ¥15 sqlserver update语句逐行生效
  • ¥20 Windows10系统命令行调用
  • ¥15 php环境如何实现国密SM2相关功能
  • ¥15 关于#单片机#的问题:K210 例程里面提示我iomem.h: No such file or directory
  • ¥15 LSPI算法的大问题