echarts图属性以及ajax异步加载echarts不显示问题

版权声明：本文为博主原创文章，发现错误请谅解并提醒博主。 https://blog.csdn.net/qq_36430463/article/details/79557156

饼状图

<div id="yewuyuan"></div>

dataPic('yewuyuan');
function  dataPic(x){
           var my=$("#my").val();
           var you=$("#you").val();
           var pieEchart = echarts.init(document.getElementById(x));
           // 指定图表的配置项和数据
           var pieoption = {  
              title : {  
                  text: '回款比例图',   
                  x:'left',
                  textStyle:{
                      color:'#FFFFFF',
                      fontSize:25
                  }
              },  
              tooltip : {  
                  trigger: 'item',  
                  formatter: "{a} <br/>{b} : {c} 元"  
              },  
              legend: {  
                  orient : 'vertical',  
                  x : 'left',  
                  top:40,
                  itemWidth:70,
                  itemHeight:30,
                  formatter: '{name}',
                  textStyle:{
                      color: '#FFF000'
                  },
                  data:[{name:'已回款',icon:'rect'},{name:'未回款',icon:'rect'}]  }
              ,   
              calculable : true,  
              series : [  
                  {  
                      name:'回款比例图',  
                      type:'pie',  
                      radius : '70%',//饼图的半径大小  
                      center: ['60%', '60%'],//饼图的位置 
                      label:{            //饼图图形上的文本标签
                              normal:{
                                  show:true,
                                  position:'inner', //标签的位置
                                  textStyle : {
                                      fontWeight : 300 ,
                                      fontSize : 16    //文字的字体大小
                                  },
                                  formatter:'{d}%'
                              }
                          },
                      data:[  
                          {value:my,name:'已回款',itemStyle:{color:'#FE0000'}},  
                          {value:you,name:'未回款',itemStyle:{color:'#F29700'}}
                      ]
                  }  
              ],
              backgroundColor:"#000"
          };
              console.info(pieEchart);
              // 使用刚指定的配置项和数据显示图表。
              pieEchart.setOption(pieoption,true);
       }

折线图

<div id="yewuyuan"></div>

    var arx=${arx};
    var title=${title};
    var series=${series};
    function dataTable(m){
    var myChart = echarts.init(document.getElementById(m));
        // Generate data
        function option1(title,x,date){
           option = {
                title: {
                    text: '销售回款图',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data:title,
                    right:0,
                    itemGap: 5,
                    orient: 'vertical'
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: x,
                    axisLabel :{  
                        interval:0   
                    }
                },
                yAxis: {
                    type: 'value',
                    offset:'0',
                    axisLabel: {
                        //margin:-10, 刻度数值在Y轴位置
                        formatter:  function(value) 
                        { 
                            return value/1000+"k"; 
                        }

                    }
                },
                series: date
            };

        }
        option1(title,arx,series);
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option,window.onresize = myChart.resize);
    }
    dataTable('yewuyuan');

异步加载动态数据图像不显示问题
1方法：setOption属性添加true 如spieEchart.setOption(pieoption,true);
2方法：$(“.box2”).empty();//删除所有子元素

//异步加载页面
        function asynLoadDiv(url) {
            $(".box2").empty();//删除所有子元素
            $(".box2").load(url, function(response, status, xhr) {
                if (status == 'success') {

                } else {
                    layer.msg('请检查网络连接是否正常！',{time:2000});
                }
            });

        }