要做成页面只传入数据,js生成图表,如下图

Echart 动态生成series数据

下面是js代码

var LineChart = function (ID, title, axisData,seriesData) {
    var myChart = echarts.init(document.getElementById(ID));
    var newData = [];
    var legendData = [];
    for (var i = 0; i < seriesData.length; i++) {
        var lineItem = new serLineItem();
        lineItem.name = seriesData[i].name;
        legendData.push(seriesData[i].name);
        lineItem.data = seriesData[i].data;
        newData.push(lineItem);
    }
    var option = {
        title: {
            text: title,
            subtext: '',
            x: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: legendData,
            bottom:0
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                   yAxisIndex: 'none'
                },
                magicType: { type: ['line', 'bar'] },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: axisData
        },
        yAxis: {
            type: 'value'
        },
        series: newData
    };
    myChart.setOption(option);
}

var serLineItem = function () {
    return {
        name: '',
        type: 'line',
        data: []
    }
}
View Code

相关文章: