echart series个数动态变化

来源：互联网发布：思科路由器端口nat 编辑：程序博客网时间：2024/06/05 19:58

<div id="mybarChartByTime" style="height: 300px"></div>

function functionName(data){      var serie = [];    for(var i = 0; i < data.length; i++){        var item = {            name:data[i].label,            type: 'bar',            itemStyle: {             normal: {                 color: data[i].backgroundColor             }         },            data: data[i].data        }        serie.push(item );    };      return serie;}

function timestartRateByTime() {    var datas = [];    var newdata_label = [];    $.ajax({        type: 'POST',        url: '/fudaMes/workShopOverview/getAllMachProduceStatusTimeDetail',        data: {            "t0": start,            "t1": end,            "type": "timeType"        },        success: function(data) {                        data.pop();            //将所有状态组成一个新数组            var labelStr = '';            for (var i = 0; i < data.length; i++) {                labelStr += data[i].label + ','            }            labelStr = labelStr.substring(0, labelStr.length - 1);            newdata_label = labelStr.split(',');            var echartBar = echarts.init(document.getElementById('mybarChartByTime'));            echartBar.setOption({                tooltip: {                    trigger: 'axis',                    axisPointer: { // 坐标轴指示器，坐标轴触发有效                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'                    }                },                legend: {                    selectedMode: true,                    legend: 'center',                    data: newdata_label                },                toolbox: {                    show: true,                    feature: {                        magicType: {                            show: true,                            title: {                                line: 'Line',                                bar: 'Bar',                                stack: 'Stack',                                tiled: 'Tiled'                            },                            type: ['line', 'bar', 'stack', 'tiled']                        },                        restore: {                            show: true,                            title: "Restore"                        },                        saveAsImage: {                            show: true,                            title: "Save Image"                        }                    }                },                calculable: false,                xAxis: [{                    name: '时间',                    type: 'category',                    nameTextStyle: {                        fontSize: 8,                    },                    data: datas,                    axisTick: {                        show: true                    },                    splitLine: {                        show: true                    },                }],                yAxis: [{                    name: '%',                    type: 'value'                }],                series: functionName(data)            });        }    });}

效果：

阅读全文

1 0