[前端]弹出框中显示图表（popover.js + echarts.js）

        使用了bootstrap中的popover.js来显示弹出提示框，发现提示框中是可以嵌入html代码的，所以想尝试着把echarts.js的效果嵌入到提示页面。

        但是强行拼接出现了比较严重的问题，因为echarts.js是在页面刷新的时候调用的，而弹出框的html是动态产生的，所以需要让图表部分的js代码延时执行，以下是我研究出的一个解决方案。

    

        

            

            

            

                

                    

                        


                          
                       
                    
                    
123

                
                

                    

                        

                       
                        
                    
                    
123
                
                

                    

                        

                       
                        
                    
                    
123
                
                

                    

                        

                       
                        
                    
                    
123
                
                

                    

                        

                       
                        
                    
                    
123
                
                

                    

                        

                       
                        
                    
                    
123
                
                

                    

                        

                       
                        
                    
                    
123
                
            

            
            

       
       

    

    

引用的一些文件：

my.css

.nonfull{
stroke:rgb(100,100,100);fill:rgb(255,255,255);cx:10;cy:10;r:5;stroke-width:1
}

.full{
stroke:rgb(100,100,100);fill:rgb(100,100,100);cx:10;cy:10;r:5;stroke-width:1
}

.rating{font-size: 14px;line-height: 1.2;}

.leave{margin-top:10px;font-size:1.2em}

.over{border-radio:5px;margin-top:10px;font-size:1.2em;background-color:rgb(66,165,245);color:white}

chart.js

function load() {
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });


// 使用
    require(
        [
            'echarts',
            'echarts/chart/pie'
        ],
        function (ec) {
            var myChart = ec.init(document.getElementById('test'));

            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} 
{b} : {c} ({d}%)"
                },

                series: [
                    {
                        type: 'pie',
                        radius: '36%',
                        center: ['50%', '50%'],
                        data: [
                            {value: Math.random()*100, name: '正面'},
                            {value: Math.random()*100, name: '负面'},
                            {value: Math.random()*100, name: '客观'},
                        ],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };

            myChart.setOption(option);
        }
    );
}