ECharts 更新柱状图数据

ECharts 更新柱状图数据

最近使用Echarts的时候，想要先加载出图表的大概框架样式，再加载数据，之后再定时刷新数据，这样就不用每次重新加载样式，减轻浏览器负担。
之前像pie类型都可以先initOption，再setData进去。

可是现在的bar类型却不可以，弄了很久找到一个方案，要先给他一个默认的初始值，之后再setData就可以了。

这是失败的图表，没有给赋初值的时候。

这是成功的图表，初始化时赋了初值。

接下来贴出主要JS代码

// 初始化charts
function initChart() {
    chart = echarts.init(document.getElementById("chart"), "dark");
    chart.setOption(initOption());
    refreshData();
}

// 初始化空数据的图表
function initOption() {
    var xAxisData = [];
    var data = [];
    for (var i = 1; i <= 12; i++) {
        xAxisData.push(i);
        data.push(0);
    }

    var option = {
        backgroundColor : '#15111F',
        tooltip : {},
        xAxis : {
            name : '月份',
            show : true,
            axisLabel : {
                textStyle : {
                    color : '#4a657a'
                }
            },

            // 初始化时需要
            data : xAxisData,

            axisTick : {
                show : false
            }
        },
        visualMap : {
            show : false,
            min : 0,
            max : 500,
            dimension : 0,
            inRange : {
                color : [ '#4a657a', '#308e92', '#b1cfa5', '#f5d69f',
                        '#f5898b', '#ef5055' ]
            }
        },
        yAxis : {
            name : '数值',
            show : true,
            axisLabel : {
                textStyle : {
                    color : '#4a657a'
                }
            },
            splitLine : {
                show : true,
                lineStyle : {
                    color : '#4a657a'
                }
            },
            axisTick : {
                show : false
            }
        },
        series : [ {
            type : 'bar',

            // 初始化时需要
            data : data,

            animationEasing : 'bounceOut',
            animationEasingUpdate : 'bounceOut',
            animationDelay : 50,
            animationDelayUpdate : 50
        } ]
    };

    return option;
}

// 定时刷新数据
function refreshData() {
    setInterval(function() {
        // do something
    }, 60000);
}

// 发送请求加载数据
function loadData() {
    var xAxisData[] = ...;
    var data[] = ...;
    chart.setOption(getOption(xAxisData, data));
}

// 设置data到option中
function getOption(xAxisData, data) {
    var option = {
        xAxis : {
            data : xAxisData
        },
        series : [ {
            data : data
        } ]
    };
    return option;
}