Why Apache Echarts don't show on bootstrap Collapse?

Question

I dont know why my apache charts wouldn't draw a chart if it's inside a Bootstrap Accordion/collapse.

if i put the charts outside the accordion, it works fine and chart show the data.

Here's the link to my script (https://codepen.io/Vendt/pen/abjWzLb?editors=1010)

please give solution to this. thanks a lot.

Answer 1

You should add a width to your main div:

<div id="mainan" style="width:100vw;height:300px;"></div>

var chartDom = document.getElementById('mainan');
var myChart = echarts.init(chartDom);
var option;

option = {
  color: ['#003366', '#006699', '#4cabce', '#e5323e'],
  dataset: {
    source: [
      ['type', '2012', '2013', '2014', '2015', '2016'],
      ['Forest', 320, 332, 301, 334, 390],
      ['Steppe', 220, 182, 191, 234, 290],
      ['Desert', 150, 232, 201, 154, 190],
      ['Wetland', 98, 77, 101, 99, 40]
    ]
  },
  legend: {},
  xAxis: {
    type: 'category',
    axisTick: {
      show: false
    }
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      seriesLayoutBy: 'row',
      label: {
        normal: {
          show: true,
          position: 'inside'
        }
      }
    },
    {
      type: 'line',
      seriesLayoutBy: 'row'
    },
    {
      type: 'line',
      seriesLayoutBy: 'row'
    },
    {
      type: 'line',
      seriesLayoutBy: 'row'
    }
  ]
};

option && myChart.setOption(option);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<script src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Simple Collapsible</h2>
  <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
  <div id="demo" class="collapse">
    <div id="mainan" style="width:100vw;height:300px;"></div><!-- HERE -->
  </div>
</div>