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

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日

悬赏问题

  • ¥20 wireshark抓不到vlan
  • ¥20 关于#stm32#的问题:需要指导自动酸碱滴定仪的原理图程序代码及仿真
  • ¥20 设计一款异域新娘的视频相亲软件需要哪些技术支持
  • ¥15 stata安慰剂检验作图但是真实值不出现在图上
  • ¥15 c程序不知道为什么得不到结果
  • ¥40 复杂的限制性的商函数处理
  • ¥15 程序不包含适用于入口点的静态Main方法
  • ¥15 素材场景中光线烘焙后灯光失效
  • ¥15 请教一下各位,为什么我这个没有实现模拟点击
  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来