el-dialog里加入echarts曲线图,显示不出来

项目的需求我先说一下,点击曲线弹出一个弹框,在选择条件,点击搜索展示曲线。

点击出现弹框的代码如下

       <span
       class="quxian"
        style="float: right; cursor: pointer; font-size: 12px; opacity: 0.7"
        @click="showDialogLine(item.realTimeDatas)"
        >曲线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
      >
复制代码

搜索框的条件代码如下

       <el-dialog
      title="设备曲线"
      :modal="false"
      :modal-append-to-body="false"
      :visible.sync="dataVisible"width="80%"
      @close="close()"
    >
      <div class="contain-line">
        <el-row :gutter="20">
          <el-col :span="8">
            <span>开始时间:</span>
            <el-date-picker
              v-model="value1"type="datetime"placeholder="选择开始时间"value-format="yyyy-MM-dd HH:mm:ss"size="small"
            >
            </el-date-picker>
          </el-col>
          <el-col :span="8">
            <span>结束时间:</span>
            <el-date-picker
              v-model="value2"type="datetime"placeholder="选择结束时间"value-format="yyyy-MM-dd HH:mm:ss"size="small"
            >
            </el-date-picker
          ></el-col>
          <el-col :span="8">
            <el-button
              style="width: 70px"type="primary"
              @click="search(item.realTimeDatas, value1, value2)"size="small"
              >搜索</el-button
            >
          </el-col>
          <div class="check_group">
            <el-checkbox-group v-model="checkboxGroup">
              <el-checkbox
                v-for="(item, index) in choose"
                :key="index"
                :label="item.pointCode"name="check"class="check-button"v-show="item.pointCode.indexOf('Y', 'c') !== -1"
              ></el-checkbox>
            </el-checkbox-group>
          </div>
        </el-row>
        <div id="Sub-echartLine" style="width: 100%; height: 250px"></div>
      </div>
    </el-dialog>
    
复制代码

打开弹框后

// 打开弹框
showDialogLine(realTimeDatas) {
  this.dataVisible = true;
 ...
},`
复制代码

点击搜索后

asyncsearch(realTimeDatas,beginTime,endTime){
  let postData = this.checkboxGroup;
  // console.log(postData);await axios
    .post(
      this.HOST +
        "/curves/codes?token=" +
        store.state.token +
        "&beginTime=" +
        beginTime +
        "&endTime=" +
        endTime,
      postData
    )
    .then((res) => {
      console.log(res.data.data);
      if (res.data.code == 0) {
        if (res.data.data != null && res.data.data != undefined) {
          // 曲线图this.$nextTick(() => {
            var myChart = this.$echarts.init(
              document.getElementById("Sub-echartLine")
            );
            var xData = ["1", "2", "3", "4"];
            var yData = ["1", "2", "3", "4"];
            var option = {
              // color: [//   "#c23531",//   "#d48265",//   "#ca8622",//   "#2bbd10",//   "#d9219e",//   "#f9f902",// ],xAxis: [
                {
                  data: xData,
                  axisLine: {
                    show: true, // Y轴lineStyle: {
                      color: "#fff", // 颜色
                    },
                  },
                },
              ],
              dataZoom: [
                {
                  type: "inside",
                  // realtime: true,start: 0,
                  end: 500,
                },
              ],
              yAxis: {
                axisTick: {
                  //y轴刻度线// show: true,
                },
                axisLine: {
                  show: true, // Y轴lineStyle: {
                    color: "#fff", // 颜色
                  },
                },
                splitLine: {
                  // 表格里面Y轴线条show: true,
                  color: "#fff",
                },
              },
              grid: {
                left: "10%",
                right: "4%",
                bottom: "2%",
                containLabel: true,
              },
              series: [
                {
                  type: "line",
                  data: yData,
                  smooth: true,
                },
              ],
            };
            myChart.clear();
            myChart.setOption(option);
            //随着屏幕大小调节图表window.addEventListener("resize", () => {
              myChart.resize();
            });
            console.log(option);
          });
        }
      }
    })
    .catch((error) => {
      console.log(error);
    });
},
复制代码

可是最后曲线还是不出来,只是打开和关闭弹框闪现一下,我也不知道为什么?希望大家能够帮帮我

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值