echart series个数动态变化

怼烎@ 2021-10-08 06:40 364阅读 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 条评论，364人围观）

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

相关阅读

相关 ECharts 使用series.smooth显示平滑曲线

1 使用详解 series.smooth 说明：是否平滑曲线显示。如果是boolean类型，则表示是否开启平滑处理。如果是number类型（取值范围 0 到 1），

红太狼/ 2023年10月06日 13:19/ 0 赞/ 16 阅读

相关 ECharts 使用series.showSymbol隐藏所有数据点

1 使用详解 series.showSymbol 说明：显示数据点。默认值：true。参数类型：boolean。可选值：（1）true，显示所有数据点。

落日映苍穹つ/ 2023年10月06日 13:17/ 0 赞/ 1 阅读

相关 ECharts 使用series.showAllSymbol显示所有数据点

1 使用详解 series.showAllSymbol 说明：显示数据点，只在主轴为类目轴（axis.type为'category'）时有效。默认值：'auto'。

小灰灰/ 2023年10月06日 12:57/ 0 赞/ 18 阅读

相关 vue中给echarts的series,xAxis中的data动态赋值

循环this.dataAndScore获取到数据后，直接通过option赋值给echart const Xdata = []; //定义数组Xdata

港控/mmm°/ 2023年10月04日 23:51/ 0 赞/ 42 阅读

相关窗口变化，echarts自动变化的设置

方法一： var myChart = echarts.init(document.getElementById(domid)); window.addEventLi

绝地灬酷狼/ 2023年06月29日 13:58/ 0 赞/ 32 阅读

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

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

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

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

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

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

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

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

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

相关 echart series个数动态变化

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

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

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

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

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