动态将数据和序列添加到图表

Question

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

我学习了如何使用echarts创建静态图表，现在我需要动态地向图表添加数据和序列。

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

假设我有一些无线电频道，他们在一段时间内有一些节目。 我不知道要检查多少个频道，因此我必须从数据库中获取频道列表，然后计算每个频道的节目数。 我尝试了这个：

        $.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方法，数据将设置为仅第一信道，并用addData echarts只显示了飞行气泡!!! :)

第一种情况图片：

第二： 气泡！！！

您能帮我找出问题所在吗？

提前致谢

Answer 1

第一种情况（只是第一个通道将具有数据）的原因是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);

如果您想要动画/动态图，那么此演示会有所帮助。

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