@[toc]

一、前言

实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行。

二、 代码实现步骤

1、引入插件

 <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>

2、为 ECharts 准备 一个DOM 容器。

<div class="echarts" id="echarts_oilDailyAverage"></div>
                                  

3、通过 echarts.init 方法初始化一个echarts 实例

  var oilDailyAverageChart=echarts.init(document.getElementById('echarts_oilDailyAverage'));

4、异步加载数据

在异步获取到数据之后，生成图形(这个我后端将集合以JSON格式传到前端)

oilDailyAverageChart.hideLoading();
 var optionDailyAverage={ //加载数据图表
                    title:{
                        text:'日平均数据'
                    },
                    tooltip:{
                        show:true,
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'cross'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend:{
                        data:['日产油水平','日产液水平','平均日产水','平均日产气']
                    },
                    toolbox: {                  //工具栏
                        show: true,               //显示工具栏组件
                        feature: {                //各工具配置项
                            mark: {
                                show: true
                            },
                            dataView: {
                                show: true,           //显示该工具
                                readOnly: false       //是否显示不可编辑(只读)
                            },
                            magicType: {            //动态类型切换
                                show: true,           //是否显示该工具
                                type: ['line', 'bar'] //启用的动态类型
                            },
                            restore: {              //配置项还原
                                show: true            //是否显示该工具
                            },
                            saveAsImage: {          //保存为图片
                                show: true            //是否显示该工具
                            }
                        }
                    },
                    xAxis:{
                        type:'category',
                        data:time
                    },
                    yAxis:[{
                        position:'left',
                        type:'value',
                        axisLabel:{
                            formatter:'{value}吨'
                        }
                    },{
                        position:'right',
                        type:'value',
                        axisLabel:{
                            formatter:'{value}立方米'
                        }
                    }],
                    series:[{
                        name:'日产油水平',
                        type:'bar',
                        yAxisIndex:0,
                        data:oilDaily,
                        itemStyle: {    //拐点显示值
                            normal: {
                                label: {
                                    show: true,  //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {  //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },{
                        name:'日产液水平',
                        type:'bar',
                        yAxisIndex:0,
                        data:fluidDaily,
                        itemStyle: {    //拐点显示值
                            normal: {
                                label: {
                                    show: true,  //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {  //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },{
                        name:'平均日产水',
                        type:'bar',
                        yAxisIndex:0,
                        data:waterDaily,
                        itemStyle: {    //拐点显示值
                            normal: {
                                label: {
                                    show: true,  //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {  //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    },{
                        name:'平均日产气',
                        type:'bar',
                        yAxisIndex:1,
                        data:gasDaily,
                        itemStyle: {    //拐点显示值
                            normal: {
                                label: {
                                    show: true,  //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {  //数值样式
                                        color: 'black',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }]
                };

  //先清除掉原来的数据
                oilDailyAverageChart.clear();

  //渲染 设置为true时不跟之前设置的option进行合并
                oilDailyAverageChart.setOption(optionDailyAverage,true);
                //自适应宽度
                window.onresize=function(){
                    oilDailyAverageChart.resize();
                };

//判断传来的是否是空值(若是空值，显示正在加载)
    function decideNull(time,oilDaily,fluidDaily,waterDaily,gasDaily,oilMonth,waterMonth,gasMonth,oilPress,casingPress,backPress,
    waterContentMonth,oilGasRatio,createDays,oilSalinity,oilDynamic) {
        if (time.length==0){
            oilDailyAverageChart.showLoading();
            numMonthChart.showLoading();
            pressDataChart.showLoading();
            percentageChart.showLoading();
            dynamicSalinityChart.showLoading();
        }else{
            if (oilDaily.length==0||fluidDaily.length==0||waterDaily.length==0||gasDaily.length==0){
                oilDailyAverageChart.showLoading();
            }else if (oilMonth.length==0||waterMonth.length==0||gasMonth.length==0){
                numMonthChart.showLoading();
            }else if (oilPress.length==0||casingPress.length==0||backPress.length==0){
                pressDataChart.showLoading();
            }else if (waterContentMonth.length==0||oilGasRatio.length==0||createDays.length==0){
                percentageChart.showLoading();
            }else if (oilSalinity.length==0||oilDynamic.length==0){
                dynamicSalinityChart.showLoading();
            }
        }
    }

三、渲染之后的效果

四、bug及解决方案

1、生成图形不适配外层div：

				//自适应宽度
                window.onresize=function(){
                    oilDailyAverageChart.resize();
                };

2、在数据更新时没有清除上一次的旧数据

第一种：可以采取在setOption后面加一个参数来解决问题：

oilDailyAverageChart.setOption(optionDailyAverage,true);

第二种：在每次更新之前，先调用clear方法

清空当前实例，会移除实例中所有的组件和图表。

 oilDailyAverageChart.clear();

3、如果后端传递过来的集合为空，页面不变化

解决:这里我在js里面判空处理，若后端传递过来的对象为空，就调用
oilDailyAverageChart.showLoading();方法，让页面一直显示加载动画。

这不是最好的方法，其他大佬的方法也挺多的：
1、有的是数据为空时用一张特殊的图片替换掉渲染的图形，数据正常时就隐藏掉那张特殊图片。
2、 oilDailyAverageChart.showLoading();