vue弹窗里面使用echarts不显示的问题及解决

目录

• 前言
• 原因分析
• 解决方式
• 一、nextTick
• 二、setInterval
• 总结

前言

弹出层中插入echarts图表，没有报错，但是图表加载不出来

此弹出层没有用element 的diaLOG 对话框，用的自己封装的组件，但是出现的问题是一样的

原因分析

弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。

弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 oPEn 事件，但这个时候 弹出层 的内容还没有渲染。

因为 Vue 组件通过 $emIT 触发的事件并不是异步执行的，而是同步执行。

解决方式

一、nextTick

      this.$nextTick(() =>
 {
      //  执行echarts方法        this.initEcharts()      }
    )

二、setInterval

 setInterval(() =>
 {
        //  执行echarts方法        this.initEcharts()      }
    , 500);
    

弹出层组件和画图方法：

    popup :tClick="retreatFromSave" :tBoot="organizationUp" tWidth='1080px'>
            div slot="main" class="teamwork-text-nr">
            div class="line">
    实景图/div>
                !-- 图表 -->
                div id="sCharts" style="height: 500px;
    ">
    /div>
              /div>
          div slot="footer" style="text-align: right;
    padding-right: 30px;
    ">
            jurisBTn tFloat="none" :tClick="retreatFromSave" tName="关闭" type="Primary">
    /jurisbtn>
          /div>
        /popup>
    

    //   图表    initEcharts() {
      const myChart = this.$echarts.init(document.getElementById('sCharts'))      const option = {
        tooltip: {
          trigger: 'axis',          axisPointer: {
            type: 'cross'          }
        }
,        xAxis: [          {
            type: 'category',            data: [              '1月',              '2月',              '3月',              '4月',              '5月',              '6月',              '7月',              '8月',              '9月',              '10月',              '11月',              '12月'            ],            axisPointer: {
              type: 'shadow'            }
          }
        ],        yAxis: [          {
            type: 'value',            name: '总体积',            min: 0,            max: 10,            interval: 1,            axisLabel: {
              formatter: '{
value}
 m³'            }
          }
,          {
            type: 'value',            name: '使用负荷',            min: 0,            max: 100,            interval: 10,            axisLabel: {
              formatter: '{
value}
 %'            }
          }
        ],        series: [          {
            name: '总体积',            type: 'bar',            data: [2.0, 4.9, 5.5, 2.2, 4.6, 6.7, 5.6, 6.2, 3.6, 2.0, 6.4, 3.3],            itemStyle: {
              normal: {
                color: '#d0e17d'              }
            }
          }
,          {
            name: '使用负荷',            type: 'line',            yAxisIndex: 1,            data: [100, 22, 33, 45, 63, 80, 20, 23, 23, 65, 12, 6.2],            itemStyle: {
              normal: {
                color: '#898989'              }
            }
          }
        ]      }
          myChart.setOption(option);
    }
    ,

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。

• 基于Echarts图表在div动态切换时不显示的解决方式
• vue实现echart饼图legend显示百分比的方法
• vue引用echarts饼图不显示图例的解决

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！