echart series个数动态变化

怼烎@ 2021-10-08 06:40 323阅读 0赞

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

效果： ![Center][] ![Center][]

[Center]: /images/20211008/9fa71ad8fa374752bf90ed4d3ab12070.png

发表评论取消回复

表情：

评论列表（有 0 条评论，323人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 使用series.title.offsetCenter设置仪表盘标题位置

1 使用详解 series.title.offsetCenter 说明：标题位置。相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是

Dear 丶/ 2023年10月05日 11:03/ 0 赞/ 15 阅读

相关 ECharts 使用series.axisLine. lineStyle.color设置仪表盘轴线颜色

1 使用详解 series.axisLine. lineStyle.color 说明：设置轴线颜色。仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一

缺乏、安全感/ 2023年10月05日 11:02/ 0 赞/ 12 阅读

相关 ECharts 使用series.itemStyle.barBorderRadius设置柱状图圆角

1 使用详解 series.itemStyle.barBorderRadius 说明：圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。默认值：0。参数

绝地灬酷狼/ 2023年10月05日 11:01/ 0 赞/ 3 阅读

相关 Echart中series自定义formatter文字样式

series: [ { data: [ { name: "工序1-1",

ゞ浴缸里的玫瑰/ 2023年01月17日 06:25/ 0 赞/ 118 阅读

相关 echarts 配置项 series 中的data 多维度

原文出处： [https://www.cnblogs.com/vali/p/7978165.html][https_www.cnblogs.com_vali_p_7978165

逃离我推掉我的手/ 2022年05月20日 09:04/ 0 赞/ 538 阅读

相关 echarts动态加载数据无法更新series 无法更新图表

最近遇到一个Echarts图表无法动态更新数据的问题最初我在option中设置series的值为一个数组，想着通过修改数组来动态更新图表，但是没变化，后来发觉

Dear 丶/ 2022年05月15日 10:22/ 0 赞/ 878 阅读

相关 echarts 图表随窗口变化而变化

很多情况下，使用echarts进行统计图制作时需要做自适应效果，能够随着窗口的大小而变化大小。但是统计图比例并没有随窗口大小改变而自动调整到最佳视觉效果，如 ![file-r

我不是女神ヾ/ 2022年03月31日 14:56/ 0 赞/ 644 阅读

相关 vue中echarts随窗体变化

![1117150-20190227143253933-1581119925.png][] <div id="myChart" :style="{widt

朴灿烈づ我的快乐病毒、/ 2021年12月20日 17:47/ 0 赞/ 217 阅读

相关 echart series个数动态变化

<div id="mybarChartByTime" style="height: 300px"></div> function functionName(d

怼烎@/ 2021年10月08日 06:40/ 0 赞/ 324 阅读

相关 echart.js给series,xAxis中的data动态赋值(三种方式)

最近用echart.js比较多，感觉我的js技能又加深了…… 给echart中的x轴或者series动态赋值，是echart的基本操作：场景： //引入echa

╰半夏微凉°/ 2021年07月26日 01:08/ 0 赞/ 682 阅读