选择菜单项控制echarts的serise.data切换,怎么在外部调用到echarts的series.data接口

新手上路,请多包涵

我在一个页面上使用多张图表。
现在要根据选择菜单的选项切换不通的数据。如何能让在外部的选择菜单可以有方法调用到echarts的series.data接口

clipboard.png
代码如下:


require.config({
    paths: {
        echarts: 'js/dist',
    }
});
require(
    [
        'echarts',
        'echarts/chart/line', //按需加载图表关于bar图的部分
        'echarts/chart/pie',
        'echarts/chart/bar',
        'echarts/chart/bar',
        'echarts/chart/pie',
    ],
    DrawCharts
);

//多个图表封装
function DrawCharts(ec) {
    index_row_1_a(ec);
    index_row_2_a(ec);
    index_row_2_b(ec);
    index_row_2_c(ec);
    index_row_3_a(ec);
};

//所有图表列表

//indexpage-begain
function index_row_1_a(ec) {
    
    var myChart = ec.init(document.getElementById('index_row_1_a'));
    //图表显示提示信息
    myChart.showLoading({
        text: "图表数据正在努力加载..."
    });
    myChart.hideLoading();
    var option = {
        title : {
            show:false,
            text : '时间坐标折线图',
            subtext : 'dataZoom支持'
        },
        tooltip : {
            trigger: 'item',
            formatter : function (params) {
                var date = new Date(params.value[0]);
                data = date.getFullYear() + '-'
                       + (date.getMonth() + 1) + '-'
                       + date.getDate() + ' '
                       + date.getHours() + ':'
                       + date.getMinutes();
                return data + '<br/>'
                       + params.value[1] + ', ' 
                       + params.value[2];
            }
        },
        toolbox: {
            show : true,
            orient:'veitical',
            y:'center',
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        dataZoom: {
            show: true,
            start : 90,
            backgroundColor:'#f7f7f7',
            // dataBackgroundColor:'#000000',
            handleColor:'#d8361b',
            fillerColor:'#f1d1cb'
        },
        legend : {
            data : ['行业相关品牌','COSTA']
        },
        grid: {
            x:50,
            y:30,
            x2:50,
            y2: 80
        },
        xAxis : [
            {
                type : 'time',
                splitNumber:10,
                axisLine : {
                    show:false,
                }
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLine : {
                    show:false,
                }
            }
        ],
        series : [
            {
                name: '行业相关品牌',
                type: 'line',
                showAllSymbol: true,
                itemStyle: {
                    normal: {
                        color : 'rgba(216,54,27,1)',
                        lineStyle: {
                            color : 'rgba(216,54,27,1)',
                            width:1
                        }
                    },
                    emphasis: {
                        lineStyle: {
                            color : 'rgba(238,110,61,1)',
                            width:2
                        }
                    }
                },
                // symbolSize: function (value){
                //     return Math.round(value[2]/10) + 2;
                // },
                data: (function () {
                    var d = [];
                    var len = 0;
                    var now = new Date();
                    var value;
                    while (len++ < 200) {
                        d.push([
                            new Date(2014, 9, 1, 0, len * 10000),
                            (Math.random()*30).toFixed(2) - 0,
                            (Math.random()*100).toFixed(2) - 0
                        ]);
                    }
                    return d;
                })()
            },
            {
                name: 'COSTA',
                type: 'line',
                showAllSymbol: true,
                itemStyle: {
                    normal: {
                        color : 'rgba(241,163,145,1)',
                        lineStyle: {
                            color : 'rgba(241,163,145,1)',
                            width:1
                        }
                    },
                    emphasis: {
                        lineStyle: {
                            color : 'rgba(238,110,61,1)',
                            width:2
                        }
                    }
                },
                // symbolSize: function (value){
                //     return Math.round(value[2]/10) + 2;
                // },
                data: (function () {
                    var d = [];
                    var len = 0;
                    var now = new Date();
                    var value;
                    while (len++ < 200) {
                        d.push([
                            new Date(2014, 9, 1, 0, len * 10000),
                            (Math.random()*30).toFixed(2) - 0,
                            (Math.random()*100).toFixed(2) - 0
                        ]);
                    }
                    return d;
                })()
            }
        ]
    };
    myChart.setOption(option);

    // var ecConfig = require('echarts/config');
    //ECharts图表的click事件监听
    // myChart.on("click", function () {
    //     alert("你点击我了!");
    // });
};

调用部分的代码

function index_row_1_a_change(){

    $('#index_row_1_a').index_row_1_a(ec).option.series[0].data = index_row_1_a_0_0_a;
    $('#index_row_1_a').index_row_1_a(ec).option.series[1].data = index_row_1_a_0_0_b;
};

应该怎么写才能调用到index_row_1_a(ec)里的series.data接口?

阅读 10.5k
1 个回答

我想问一下,data: (function () {

                var d = [];
                var len = 0;
                var now = new Date();
                var value;
                while (len++ < 200) {
                    d.push([
                        new Date(2014, 9, 1, 0, len * 10000),
                        (Math.random()*30).toFixed(2) - 0,
                        (Math.random()*100).toFixed(2) - 0
                    ]);
                }
                return d;
            })()
            不想用随机数的话,怎么写,调用接口
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题