javascript - 动态添加数据和系列到 Echarts

Question

我正在尝试学习和使用 echarts .

我学会了如何使用 echarts 创建静态图表现在我需要向我的图表动态添加数据和系列。

API 中有addSeries 和addData 等方法，但是当我尝试使用这些方法时，出现了一些奇怪的情况!

假设我有一些广播 channel ，他们在一段时间内有一些节目。我不知道要检查多少个 channel ，所以我必须从我的数据库中获取 channel 列表，然后计算每个 channel 的节目。我试过这个:

        $.ajax({
            type: 'POST',
            url: "my url",
            data: event,
            error: function (jqXHR, textStatus, errorThrown) {
                alert('ERROR');
            },
            beforeSend: function (xhr) {
                $(document).find('.loaderWrapper').find('.loader').html('<img src="<?= base_url() ?>global/templates/default/desktop/assets/images/globe64.gif" width="76"><br /><span class="farsi">wait</span>');
            },
            success: function (data, textStatus, jqXHR) {

                //console.log(JSON.parse(data), $.parseJSON(data));

                var chartData = eval( $.parseJSON(data) );

                if(data === 'eventError')
                {
                    $(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">choose event</span>');
                    return false;
                }//if eventError

                if(data === 'dbError')
                {
                    $(document).find('.loaderWrapper').find('.loader').html('<span class="alert alert-danger farsi">error</span>');
                    return false;
                }//if eventError

                var channelsArray = [];

                for( var i=0; i < objSize(chartData.allChannels); i++ )
                {
                    channelsArray.push(chartData.allChannels[i].channel);
                }
                console.log(channelsArray);



    require(
            [
                'echarts',
                'echarts/chart/bar', // require the specific chart type
                'echarts/chart/line', // require the specific chart type
            ],
            function (ec) {
                // Initialize after dom ready
                var myChart = ec.init(document.getElementById('programPerChannel'));

            option = {
                    title : {
                        text: 'test title',
                        x : 'right'
                    },
                    tooltip : {
                        trigger: 'axis'
                    },

                    legend: {
                        data: channelsArray
                    },

                    toolbox: {
                        show : true,
                        x : 'left',
                        feature : {
                            mark : {
                                show: true,
                                title: {
                                    mark : 'marker',
                                    markUndo : 'undo',
                                    markClear : 'clear'
                                },
                            lineStyle : {
                                width : 3,
                                color : '#1e90ff',
                                type : 'dashed'
                            }

                            },
                            dataView : {show: false, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : false,
                            data : channelsArray 

                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ]
                };

                // Load data into the ECharts instance 
                myChart.setOption(option);



                for ( var j = 0; j < channelsArray.length; j++)
                {
                    myChart.setSeries([
                                {
                                    name:channelsArray[j],
                                    type:'line',
                                    stack: 'area',
                                    symbol: 'none',
                                    itemStyle: {
                                        normal: {
                                            areaStyle: {

                                                color : (function (){
                                                    var zrColor = require('zrender/tool/color');
                                                    return zrColor.getLinearGradient(
                                                        0, 200, 0, 400,
                                                        [[0, 'rgba(128,' + 10 * j / 2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']]
                                                    )
                                                })()
                                            }
                                        }
                                    },

                                    data:[
                                        [j * 10, j * 11, j *3, j * 7],
                                    ]

                                }

                    ]);//set series

                   //adding data inside addSeries will set data to first channel only, code was tested with or without this part
                    myChart.addData([
                        [1, 10 , j, j*2],
                        [1, 10 , j, j*2],
                        [1, 10 , j, j*2],
                        [1, 10 , j, j*2]
                    ]);//add Data
                }//for


            }//functuin(ec)
    );





                $(document).find('.loaderWrapper').find('.loader').html('');

            }//success

        });//Ajax

使用addSeries方法，数据将只设置到第一个 channel ，使用addData echarts将只显示飞泡!!! :)

第一种情况图片:

第二个:气泡!!!

你能帮我找出我的问题是哪一部分吗？

提前致谢

Answer 1

第一种情况(只有第一个 channel 会有数据)的原因是setSeries方法不是将系列合并到系列列表，而是被替换。所以你必须创建/准备一个 seriesList 然后像这样使用 setSeries 方法

     var seriesList = [];
        for ( var j = 0; j < channelsArray.length; j++)
            {
                seriesList.push(
                              {
                                name:channelsArray[j],
                                type:'line',
                                stack: 'area',
                                symbol: 'none',
                                itemStyle: {
                                    normal: {
                                        areaStyle: {

                                            color : (function (){
                                                var zrColor = require('zrender/tool/color');
                                                return zrColor.getLinearGradient(
                                                    0, 200, 0, 400,
                                                    [[0, 'rgba(128,' + 10 * j / 2 + ',0,0.8)'],[0.8, 'rgba(128,19,255,0.1)']]
                                                )
                                            })()
                                        }
                                    }
                                },

                                data:[
                                    [j * 10, j * 11, j *3, j * 7],
                                ]

                            }
                           );//end-push
                } //end-for-loop
         myChart.setSeries(seriesList);

如果你想要一个动画/移动的动态图，那么这个 demo会有帮助。

第二个:气泡 !! 是默认值 noDataLoadingOption echarts动画。如果没有数据加载到 echarts 实例中，或者通过破坏传递或分配给 echarts 实例的任何选项/配置，就会发生这种情况。