动态为系列下的数据添加值-echarts

Question

I have created a Bar graph using echarts. I want to bind multiple values to data object dynamically, currently I'm able to bind only single value. here is my java script. I'mm a newbie for this, hoping for a fully functional solution.

var myChart = echarts.init(document.getElementById('page_views_today'));

    var option = {

        // Setup grid
        grid: {
            zlevel: 0,
            x: 20,
            x2: 40,
            y: 20,
            y2: 20,
            borderWidth: 0,
            backgroundColor: 'rgba(0,0,0,0)',
            borderColor: 'rgba(0,0,0,0)',
        },

        // Add tooltip
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow', // line|shadow
                lineStyle: { color: 'rgba(0,0,0,.5)', width: 1 },
                shadowStyle: { color: 'rgba(0,0,0,.1)' }
            }
        },

        // Add legend
        legend: {
            data: []
        },
        toolbox: {
            orient: 'vertical',
            show: true,
            showTitle: true,
            color: ['#bdbdbd', '#bdbdbd', '#bdbdbd', '#bdbdbd'],
            feature: {
                mark: { show: false },
                dataZoom: {
                    show: true,
                    title: {
                        dataZoom: 'Data Zoom',
                        dataZoomReset: 'Reset Zoom'
                    }
                },
                dataView: { show: false, readOnly: true },
                magicType: {
                    show: true,
                    itemSize: 12,
                    itemGap: 12,
                    title: {
                        line: 'Line',
                        bar: 'Bar',
                    },
                    type: ['line', 'bar'],
                    option: {
                        /*line: {
                            itemStyle: {
                              normal: {
                                color:'rgba(3,1,1,1.0)', 
                              }
                            },
                            data: [1,2,3,4,5,6,7,8,9,10,11,12]
                        }*/
                    }
                },
                restore: { show: false },
                saveAsImage: { show: true, title: 'Save as Image' }
            }
        },

        // Enable drag recalculate
        calculable: true,

        // Horizontal axis
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: [
                '0h-2h', '2h-4h', '4h-6h', '6h-8h', '8h-10h', '10h-12h', '12h-14h', '14h-16h', '16h-18h', '18h-20h', '20h-22h', '22h-24h'
            ],
            axisLine: {
                show: true,
                onZero: true,
                lineStyle: {
                    color: 'rgba(63,81,181,1.0)',
                    type: 'solid',
                    width: '2',
                    shadowColor: 'rgba(0,0,0,0)',
                    shadowBlur: 5,
                    shadowOffsetX: 3,
                    shadowOffsetY: 3,
                },
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#fff',
                    type: 'solid',
                    width: 0,
                    shadowColor: 'rgba(0,0,0,0)',
                },
            },
        }],

        // Vertical axis
        yAxis: [{
            type: 'value',
            splitLine: {
                show: false,
                lineStyle: {
                    color: 'fff',
                    type: 'solid',
                    width: 0,
                    shadowColor: 'rgba(0,0,0,0)',
                },
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
                onZero: true,
                lineStyle: {
                    color: '#ff0000',
                    type: 'solid',
                    width: '0',
                    shadowColor: 'rgba(0,0,0,0)',
                    shadowBlur: 5,
                    shadowOffsetX: 3,
                    shadowOffsetY: 3,
                },
            },


        }],

        // Add series
        series: [
            {
                name: 'Page Views',
                type: 'bar',
                smooth: true,
                symbol: 'none',
                symbolSize: 2,
                showAllSymbol: true,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        color: 'rgba(63,81,181,1.0)',
                        borderWidth: 2, borderColor: 'rgba(63,81,181,1)',
                        areaStyle: { color: 'rgba(63,81,181,1)', type: 'default' }
                    }
                },

                data: []
            }
        ]
    };

Here is my java-script function from where I want to bind the values dynamically.

    // Load data into the ECharts instance 
    load_graph_with_positions(option);

    function load_graph_with_positions(option) {
            option.series[0].data[0] = 1234;
        myChart.setOption(option);
    }

Answer 1

One way to do this is by passing values in an array and then shifting the previous values, while pushing-in the data. Following is the example of shiting and pushing the data:

option.series[0].data.shift();
option.series[0].data.push(json.num);

Hence your function will become:

function load_graph_with_positions(option,values) {
    var valuesLength = values.length;
    for (var i = 0; i < valuesLength; i++) {
        option.series[0].data.shift();
        option.series[0].data.push(values[i]);
    }
    myChart.setOption(option);
}

You can also refer to following github example for dynamic addition: https://github.com/hisune/Echarts-PHP/blob/master/demo/dynamic.php