Layui弹窗之图表绘制

1、首先要将弹窗中绘制图表的容器宽高设置为100%

<style>
  #eleChartLayerBar {
    width: 100%;
    height: 100%;
    // height: calc(100% - 40px) // 调整高度
  }
</style>
<script type="text/html" id="eleChartLayer-tpl">
  <div id="eleChartLayerBar"></div>
</script>

2、然后将弹窗中的事件添加上去，进行重绘

var tpl  = $("#eleChartLayer-tpl").html();
let myChart = null
layer.open({
    type: 1,
    title: '详情',
    content: tpl,
    skin: 'demo-class',
    maxmin: !0,
    shade: [0.2, '#ccc'],
    area: ["800px", "500px"],
    btn: ["关闭"],
    success: function(e, t) {// 弹框弹出时调用
        let option = echartDraw(types,xData,seriseData)
        let echartDom = $('#eleChartLayerBar')[0]
        myChart = echarts.init(echartDom, 'blue')
        myChart.clear();
        myChart.setOption(option,true)
        window.onresize = function () {
            myChart.resize()
        }
    },
    yes: function(e, t) {
        layer.closeAll()
    },
    full: function(){ // 放大
        myChart.resize()
    },
    restore: function(){ // 还原
        myChart.resize()
    },
})
form.render(); 

3、图表绘制代码：

let echartDraw = () => {
   var option = {
       grid: {
           left: '3%',
           right: '4%',
           bottom: '3%',
           top: 50,
           containLabel: true
       },
       tooltip: {
           trigger: 'axis',
           axisPointer: {
               type: 'cross',
               crossStyle: {
                   color: '#999'
               }
           }
       },
       xAxis: [
           {
               type: 'category',
               data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
               axisPointer: {
                   type: 'shadow'
               },
               axisTick: {
                   // show: true
               },
               axisLabel: {
                   align: 'right'
               }
           }
       ],
       yAxis: [
           {
               type: 'value',
               name: 'y轴',
               axisLabel: {
                   formatter: '{value} %'
               }
           }
       ],
       series: [
           {
               name: 'y轴',
               type: 'bar',
               data: [10, 52, 200, 334, 390, 330, 220]
           }
       ]
   }
   return option
}

4、效果图：