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

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日

悬赏问题

  • ¥15 java 的protected权限 ,问题在注释里
  • ¥15 这个是哪里有问题啊?
  • ¥15 关于#vue.js#的问题:修改用户信息功能图片无法回显,数据库中只存了一张图片(相关搜索:字符串)
  • ¥15 texstudio的问题,
  • ¥15 spaceclaim模型变灰色
  • ¥15 求一份华为esight平台V300R009C00SPC200这个型号的api接口文档
  • ¥15 就很莫名其妙,本来正常的Excel,突然变成了这种一格一页
  • ¥15 字符串比较代码的漏洞
  • ¥15 欧拉系统opt目录空间使用100%
  • ¥15 ul做导航栏格式不对怎么改?