如何正确bootbox加载echarts图表

如何才能正确在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

---

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