Echarts in not showing in modal

Question

I have a button for clicking to open a modal and after opening the modal I want to show the Echarts in the modal but it doesn't show on the modal. Please advise me what should I do or am I doing something wrong.

type script

async detail_modal() {
       $("#detail").on('show.bs.modal', async() => {      
          this.options_type.series[0].data =[{name:'test',value:10}]
        let myChart = echarts.init(document.getElementById('stock')!);
        if (myChart) {
           myChart.setOption(this.options_type, true);
        }
    });     
 }

HTML

<div class="modal fade" id="detail">
   <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" 
          role="document">
        <div class="modal-content">
           <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>&times; 
                    </span>
                </button>
           </div>
           <div class="modal-body">
              <div class="container">
                <div id="stock" echarts [options]="options_type" class="demo-chart"> 
                </div>
             </div>
          </div>
     </div>
   </div>
</div>

CSS

.demo-chart{
    height: 200px;
 }

Answer 1

Wellcome WisarootK! I guess that you are "mixing" Angular programming way with JS/JQuery way...

You should use features as "local Reference" and @ChildView to reference your modal, and avoid classic $("#detail") or document.getElementById('stock'). For instance, to referer to your 'detail' div: HTML:

<div #detail class="modal fade" id="detail">

TS:

import {Component, OnInit, ViewChild, ...} from '@angular/core';


@ViewChild('detail') detail: TemplateRef<any>;


detail_modal() {
// this.menu would be the reference to your div

const modal = this.open(this.menu , { windowClass: 'modal-md' });
modal.result.then(
   (res) => {
        // Button ok
   },
   (error) => {
        // Button Cancel
   });

}