echarts没数据时在容器中显示暂无数据，切换后无法显示图表

Question

echarts在没数据时，在容器中加载暂无数据，然后再切换有数据的图表时，已然在容器中显示暂无数据，不会刷新图表。

jQuery.getReqInterface("I005", { reportId: "RPT13028", token: token, branch_no: branch_no, stat_month: stat_month}, function(data)
        {
            var html = "";
            var month_list = [];
            var data_list = [];
            if(data.list.length>0){
                jQuery.each(data.list,function(n, value){
                    var month_list_stat =  value.STAT_MONTH;
                    month_list[n] = month_list_stat.substr(4,2);
                    data_list[n] = value.LOSS_SERV;
                });
                loadchart3(month_list,data_list);
            }
            else{
                jQuery("#chart3").html('<div id="chart3-nodata" style="text-align: center;font-weight: bold;line-height: 140px">暂无数据</div>')
            }
        });

echart的代码为

function loadchart3(month_list,data_list)
{
    var myChart3 = echarts.init(document.getElementById('chart3'));
    var option3 = {
        noDataLoadingOption:
        {
            text: '暂无数据',
            effect: 'bubble',
            effectOption:
            {
                effect:
                {
                    n: 0
                }
            }
        },
        grid:
        {
            top: '20%',
            left: '3%',
            right: '2%',
            bottom: '10%',
            containLabel: true
        },
        xAxis:
        {
            data: month_list,
            splitLine:
            {
                show: false
            }
        },
        yAxis:
        {
            splitLine:
            {
                show: false
            },
            type: 'value',
            min: 0,
            precision: 2
        },
        series: [
        {
            type: 'bar',
            areaStyle: { normal: { color: '#2a8efc' } },
            //data: marketing_rate_list,
            data: data_list,
            barWidth: 18,
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            itemStyle:
            {
                normal:
                {
                    color: '#2a8efc'
                }
            }
        }]
    };
    myChart3.setOption(option3);
请问下应该怎么处理。

Answer 1

谢邀，你尝试一下当判断为有数据时，将"div#chart3"中的内容先清空再执行echarts,另外，将echarts实例提取出来，不要每次都创建。

Answer 2

我也遇到这个问题，经过自己摸索发现了一个解决办法。

1. 在 echarts 正常渲染后，会在容器 div 上面添加一个自定义的属性 _echarts_instance_，比如 <div id="ec_container" _echarts_instance_="ec_1543635936716"></div>
2. 假设 echarts 里面的数据都是从 ajax 的方式来获取的，当某一次数据请求失败的时候，会在 div#ec_container 里面插入 一段 html ，比如 <span>暂无数据</span>，此时的 div#ec_container 变成了 <div id="ec_container" _echarts_instance_="ec_1543635936716"><span>暂无数据</span></div>
3. 当再次切换搜索条件，获取新的数据的时候，ajax请求成功，数据也是没问题的，但是此时 echarts 图 渲染不出来，页面上面依然显示的是 “暂无数据”，此时的 div#ec_container 依然是 <div id="ec_container" _echarts_instance_="ec_1543635936716"><span>暂无数据</span></div>。
4. 无意中，我发现当我手动把 div#ec_container 的自定义属性 echarts_instance 去掉之后，再获取数据的时候，echarts 图能够正常渲染。
5. 所以我的解决办法是：当获取数据失败，往 div#ec_container 容器中插入 <span>暂无数据</span> html 片段之后，手动删除掉 div#ec_container 容器的 echarts_instance，这样问题就解决了。
6. 具体代码呢，类似于是这样的

$('#rate_pie').html('<span>暂无数据</span>');
// 必须手动去掉 echarts 容器上面的 属性 _echarts_instance_ ，否则下次echarts图无法正常显示，具体原理未知
$('#rate_pie').removeAttr('_echarts_instance_');

Answer 3

试试resize

myChart3 .resize();
myChart3 .setOption(option3);    

Answer 4

每次改变值的时候先claer(),然后再setOption()。
如果没有值option设置只显示title，有值则正常显示

Answer 5

谢邀，没碰到过这样的问题，所以给两个建议
1，试试把echarts的实例保留下来使用，而不是每次都echarts.init
2，如果使用的是div做容器的话，注意没有图表时这个div是否有宽高

Answer 6

搞定了吗？我也遇到了

Answer 7

  $('#province_situation').find('.blankData').remove();
  if(series.length > 0) {
      option.xAxis[0].data=xAxis;
      option.legend.data=legend;
      option.series=series;
      myChart.setOption(option,true);
  }else {
       myChart.clear();
      $('#province_situation').append('<div class="blankData" style="width: 100%;position:absolute;top: 0;left: 0;line-height: 300px;text-align: center;">暂无数据</div>');
  }

要用append(),之前用html()方法一直出不来。
我是用的这个方法，可以试一下

Answer 8

同问，楼主有没有解决？