echart series个数动态变化

最新推荐文章于 2025-06-17 22:50:31 发布

i秋风伴落叶

最新推荐文章于 2025-06-17 22:50:31 发布

阅读量7.3k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： echart/ hightCharts/Chart

本文链接：https://blog.youkuaiyun.com/zxf1242652895/article/details/77771891

echart/ hightCharts/Chart 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何使用ECharts创建动态更新的时间序列柱状图，通过Ajax获取指定时间段内的机器生产状态数据，并实时展示不同状态占比的变化趋势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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)
            });
        }
    });
}

效果：