美文网首页
vue更新g2ploat数据

vue更新g2ploat数据

作者: 上海_前端_求内推 | 来源:发表于2021-12-06 17:26 被阅读0次

1,定义data
stat1: true,
columnPlot: "",
2,定义一个图形方法

   createChart1(data) {
      debugger;
      this.columnPlot = new Column("container1", {
        data,
        xField: "type",
        yField: "sales",
        label: {
          position: "middle",
          style: {
            fill: "#fff",
            opacity: 0.9,
          },
        },
        xAxis: {
          label: {
            autoHide: true,
            autoRotate: false,
          },
        },
        meta: {
          type: {
            alias: "科室",
          },
          sales: {
            alias: "销售额",
          },
        },
      });
      this.columnPlot.render();
    },

3,请求数据时只初始化一次图形
更改数据用that.columnPlot.chart.changeData(that.chartUsedeptdddslist);

getUsedeptddds() {
      var that = this;
      this.loading2 = true;
      this.$axios
        .get("" + that.$baseService.usedeptddds, {
          params: {
            hospitalCode: this.formselect.HospitalCode,
            startDate: this.formselect.ApplyStartDateTime,
            endDate: this.formselect.ApplyEndDateTime,
          },
        })
        .then(function (res) {
          that.loading2 = false;
          that.chartUsedeptdddslist = [] = res.data.map((item) => {
            return {
              type: item.deptName,
              sales: item.data,
            };
          });
          console.log("抗菌药物使用强度按科室统计", that.chartUsedeptdddslist);
          if (that.chartUsedeptdddslist && that.chartUsedeptdddslist.length) {
            const distChart1_Div = that.$refs.distChart1;
            if (distChart1_Div) {
              if (that.stat1 == true) {
                that.stat1 = false;
                debugger;
                that.createChart1(that.chartUsedeptdddslist);
              } else {
                that.columnPlot.chart.changeData(that.chartUsedeptdddslist);
              }
            }
          } else {
            that.chartUsedeptdddslist = [];
            that.columnPlot.chart.changeData(that.chartUsedeptdddslist);
            //that.createChart1()
          }
        })
        .catch(function (error) {
          that.loading2 = false;
        });
    },

相关文章

网友评论

      本文标题:vue更新g2ploat数据

      本文链接:https://www.haomeiwen.com/subject/rscnxrtx.html