如何正确bootbox加载echarts图表

    xiaoxiao2021-03-26  10

    如何才能正确在bootbox中加载echarts图表呢

    本文主要说明bootbox加载html片段后加载javascript以及在调用echarts图标过程中遇到的问题。

    bootbox原生是不支持加载iframe的,因此需要加载html片段,在开发过程中会发现加载html片段之后是无法加载JavaScript的,在翻阅了bootbox的api文档之后发现可以监听bootbox shown.bs.modal事件具体实现方法如下:

    bootbox.dialog({ title:title, message:message, className:'.message_modal',//此处主要用于区别html片段定义处与弹出层的dom区别 }).on('shown.bs.modal',function(){ //TODO 加载javascript //此处注意为了区别dom元素,在获取dom元素时需要加上className });

    在bootbox加载echarts时遇到问题是获取dom的问题,由于在加载html片段到bootbox中之后,dom元素不能仅通过

    document.getElementById();

    获取

    查阅了大神们的blog发现

    $()[0]

    的方式与

    document.getElementById();

    获取的结果是一致的,最终通过

    var dom = $(".message_modal #charts")[0]; var myChart = echarts.init(dom);

    成功的在bootbox中加载了echarts


    自2012年以来,一直在开发工作,擅长PHP和前端开发,一直以来也没有写blog的习惯,总在给自己找借口说是太忙,但是在开发过程中遇到的问题也没有随手记的习惯,导致很多相同的问题重复去查阅,前段时间让自己养成了写笔记的习惯,年底了,项目也都接近尾声了,就想着把开发过程中遇到的问题都写到blog


    本文完全原创,转载请注明出处

    转载请注明原文地址: https://ju.6miu.com/read-600030.html

    最新回复(0)