动态添加Echarts

前两天做项目需要动态添加echarts，可把我难住了，问了好多人终于解决，今天分享一下

html

点击

 

css

.cont{
            width: 500px;
            height: 500px;
            border: 1px solid blue;
        }
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            margin: 10px 0;
        }

echarts.js

function echar(){
        var arr = Array.from(document.querySelectorAll(".c1"));
        var charArr = arr.map(item=>echarts.init(item))
        // 配置数据
        var option1 = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 渲染图表
        charArr.forEach(item=>item.setOption(option1))  
    }

点击插入的js

$(function(){
        $('.btn').click(function(){
            $('.cont').append('
')
            var c1 = $('.box').children('.c1');
            console.log(c1.length);
            if(c1.length == 0){
                $('.box').append('
')  
            }else if(c1.length>0){
                $('.box').append('
')  
                for(var i=0;i

完整的demo

    
    
    


  
点击
  

最终效果