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

最新推荐文章于 2021-11-09 16:33:13 发布

原创最新推荐文章于 2021-11-09 16:33:13 发布 · 3.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

前端基础知识专栏收录该内容

16 篇文章

订阅专栏

本文探讨了使用Echarts绘制饼状图和折线图时遇到的异步加载动态数据导致图像不显示的问题。提出了两种解决办法：1. 在setOption时传入true参数，如spieEchart.setOption(pieoption, true)；2. 使用jQuery的.empty()方法清除图表容器内的所有子元素。" 6529371,578867,汇编语言逻辑语句的算术实现解析,"['汇编', '语言', '编译原理', '计算机底层']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

饼状图

<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});
                }
            });

        }