本文介绍: 在项目需求需要点击eltable中的某条数据显示出该条数据的变化趋势,使用的是echarts4,发现每次点击eldialog时候点击一次时候不会显示echarts内容,但是查看元素时候发现元素中有存放echarts盒子,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有100px,但是明明已经设置样式宽高100%。

文章目录

前言

项目需求需要点击eltable中的某条数据,显示出该条数据的变化趋势,使用的是echarts4,发现每次点击el-dialog时候点击一次时候不会显示echarts内容,但是查看元素时候发现元素中有存放echarts盒子,第二次点开虽然显示图表,但是图表挤在一起,页面检查发现宽高只有100px,但是明明已经设置样式宽高100%。

在这里插入图片描述

  <el-dialog :title="trendtitle"
               :visible.sync="trendopen"
               width="800px"
               append-to-body>
      <div id="main1"&gt;</div&gt;
    </el-dialog&gt;

问题分析
分析dialog没有完全显示出来,图表已经进行了初始化,导致第一次图标容器挂载然后因为装载图表容器dom还未挂载,导致设置宽高样式100%无效
题解决:

使用this.$nextTick(()=&gt;{获取容器})

 this.$nextTick(() =&gt; {

        let myChart = this.$echarts.init(document.getElementById('main1'))
        myChart.setOption({
          title: {
            text: upc
          },
          tooltip: {},
          //配置x
          xAxis: {
            // data: ['一班', '二班', '三班', '四班', '五班', '六班']
            data: xdataTime,


            boundaryGap: false,
            // axisLine: {
            //   show: true,
            //   lineStyle: {

            //     width: 1,
            //     type: "solid"
            //   }
            // },
            axisLabel: { //设置x轴的字

              interval: 0,//使x横坐标全部显示
              rotate: 45
            },

          },

          grid: {
            left: '20%',
            bottom: '30%'
          },
          //配置固定滚动条
          dataZoom: [{
            type: 'slider',
            show: true,
            startValue: 0,
            endValue: 10,
            height: '15',
            bottom: '3%',
            zoomLock: true
          }],

          //配置y轴,可不配置自定义了根据间隔
          yAxis: {},
          series: [{
            name: upc,
            type: 'line',
            // data: [45, 42, 46, 48, 52, 47]
            data: arr
          }]
        })



      })


ps:
使用ref获取并不能够获取echarts容器如图

 <el-dialog :title="trendtitle"
               :visible.sync="trendopen"
               width="800px"
               append-to-body&gt;
      <div id="main1"
           ref="main1"&gt;</div&gt;

    </el-dialog>

在这里插入图片描述
在这里插入图片描述

原文地址:https://blog.csdn.net/liqiannan8023/article/details/130109020

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41754.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注