厂区平面图ECharts Gallery

20:11:45图表已生成
代码
//依据https://www.makeapie.com/editor.html?c=x2Z4NzPSRh作品修改

var uploadedDataURL = "/asset/get/s/data-1610008164149-NgVVDoNJZ.json";


//线条聚点
var geoGpsMap = {
    "焊装": [106.52630880475044, 29.53258082036975],
    "WBS": [106.52650594711304, 29.53261932681606],
    '涂装': [106.52674332261086, 29.532562150572318],
    "PBS": [106.5267165005207, 29.5324688015335],
    '总装': [106.52654886245728, 29.53243846307733],
    "PDI": [106.52634769678116, 29.53248397075818],
    "PACK": [106.52663066983223, 29.532371951814632]
};


//标签坐标
var l1 = {
    "焊装": [106.52630880475044, 29.532622827401358]
};
var l2 = {
    "WBS": [106.52650527656078, 29.532652290656184]
};

var l3 = {
    '涂装': [106.52674198150635, 29.53260532447364]
};
var l4 = {
    "PBS": [106.52678623795508, 29.53246530094286]
};
var l5 = {
    '总装': [106.5265528857708, 29.53248163703145]
};
var l6 = {
    "PDI": [106.52628198266028, 29.53248047016807]
};
var l7 = {
    "PACK": [106.52671717107296, 29.532375452408505]
};

//闪点坐标
var geoCoordMap = {
    "焊装": [106.52630880475044, 29.53258082036975],
    "WBS": [106.52650594711304, 29.53261932681606],
    '涂装': [106.52674332261086, 29.532562150572318],
    "PBS": [106.5267165005207, 29.5324688015335],
    '总装': [106.52654886245728, 29.53243846307733],
    "PDI": [106.52634769678116, 29.53248397075818],
    "PACK": [106.52663066983223, 29.532381286731326]
};

//流向WBS的点
var geoCoordMap001 = {
    "焊装": [106.52630880475044, 29.53258082036975]
};
//流向涂装的点
var geoCoordMap002 = {
    "WBS": [106.52650594711304, 29.53261932681606]
};
//流向PBS的点
var geoCoordMap003 = {
    '涂装': [106.52674332261086, 29.532562150572318]
};
//流向总装的点
var geoCoordMap004 = {
    "PBS": [106.5267165005207, 29.5324688015335],
    "PACK": [106.52663066983223, 29.532371951814632]
};
//流向PDI的点
var geoCoordMap005 = {
    '总装': [106.52654886245728, 29.53243846307733]
};


//温度
var d1 = {
    "焊装": 35,
    "WBS": 25,
    '涂装': 17,
    "PBS": 19,
    '总装': 13,
    "PDI": 22,
    "PACK": 11
};

//湿度
var d2 = {
    "焊装": 40,
    "WBS": 45,
    '涂装': 37,
    "PBS": 39,
    '总装': 23,
    "PDI": 80,
    'PACK': 39
};
//产量
var d3 = {
    "焊装": 60,
    "WBS": 30,
    '涂装': 20,
    "PBS": 30,
    "总装": 10,
    'PDI': 30,
    "PACK": 20
};
//烟雾
var d4 = {
    "焊装": 90,
    "WBS": 45,
    '涂装': 37,
    "PBS": 39,
    '总装': 53,
    "PDI": 60,
    "PACK": 56
};
//光线
var d5 = {
    "焊装": 40,
    "WBS": 45,
    '涂装': 60,
    "PBS": 39,
    '总装': 23,
    "PDI": 80,
    "PACK": 56
};

var database = [{
        name: "焊装",
        value: 0
    },
    {
        name: "WBS",
        value: 0
    },
    {
        name: "涂装",
        value: 0
    },
    {
        name: "PBS",
        value: 0
    },
    {
        name: "总装",
        value: 0
    },
    {
        name: "PDI",
        value: 0
    },
    {
        name: "PACK",
        value: 0
    }
];
var da1 = [{
    name: "焊装",
    value: 0
}];
var da2 = [{
    name: "WBS",
    value: 0
}];
var da3 = [{
    name: "涂装",
    value: 0
}];
var da4 = [{
    name: "PBS",
    value: 0
}];
var da5 = [{
    name: "总装",
    value: 0
}];
var da6 = [{
    name: "PDI",
    value: 0
}];
var da7 = [{
    name: "PACK",
    value: 0
}];

var colors = [
    ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"],
    ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"],
    ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"],
];
var colorIndex = 0;



$(function() {
    var year = ["温度（℃）", "湿度（%）", "产量","烟雾（百ppm）", "光线（百lx）"];
    var year1 = ["空调调温", "加湿器/窗户协调", "生产系统", "紧急消防", "照明系统"];

    var mapData = [
        [],
        [],
        [],
        [],
        []
    ];

    /*柱子Y名称*/
    var categoryData = [];
    var fei = [];
    var rong = [];
    var barData = [];
    var lineData1=[
        [10,12,13,12,14,14,16,17,18,20,22,26,27,26,23,20,18,18,16,16,14,13,12,10],
        [68,67,66,63,61,55,53,48,46,44,42,42,36,34,36,37,38,42,46,44,58,62,66,68],
        [1,1,1,1,1,1,1,2,3,2,1,1,1,1,1,1,3,3,1,3,3,1,1,1],
        [56,59,60,62,56,50,40,42,38,38,39,38,40,42,38,37,34,35,38,44,46,50,54,56],
        [1,1,2,1,5,10,20,24,30,32,32,34,38,40,40,38,32,25,32,32,5,1,1,1]
    ];
    var lineData2=[
        [11,12,14,12,15,13,16,16,16,21,22,24,22,24,23,21,19,18,15,14,15,13,12,11],
        [62,64,66,65,62,58,54,49,45,44,41,40,32,36,36,39,38,40,46,48,52,60,63,61],
        [1,1,1,2,1,1,1,2,1,2,1,1,3,1,1,1,3,2,1,1,3,1,2,1],
        [58,59,62,62,54,50,44,42,34,33,35,38,40,44,38,35,32,35,33,40,46,53,56,54],
        [1,1,1,1,6,12,20,22,30,33,32,35,38,42,40,37,34,28,32,33,10,1,1,1]
    ];
   
    var tian = [
        [],
        [],
        [],
        [],
        []
    ];

    var line1 = [];
    var line2 = [];
    var line3 = [];
    var line4 = [];
    var line5 = [];
    for (var key in geoCoordMap001) {
        line1.push({
            "year": '温度',
            "name": key,
            "value": d1[key],
        });

    };
    console.log(line1)
    for (var key in geoCoordMap002) {
        line2.push({
            "year": '温度',
            "name": key,
            "value": d1[key],
        });

    };
    for (var key in geoCoordMap003) {
        line3.push({
            "year": '温度',
            "name": key,
            "value": d1[key],
        });

    };
    for (var key in geoCoordMap004) {
        line4.push({
            "year": '温度',
            "name": key,
            "value": d1[key],
        });

    };
    for (var key in geoCoordMap005) {
        line5.push({
            "year": '温度',
            "name": key,
            "value": d1[key],
        });
    };

    for (var key in geoCoordMap) {
        mapData[0].push({
            "year": '温度',
            "name": key,
            "value": d1[key],
        });
        mapData[1].push({
            "year": '湿度',
            "name": key,
            "value": d2[key],
        });
        mapData[2].push({
            "year": '产量',
            "name": key,
            "value": d3[key],
        });
        mapData[3].push({
            "year": '烟雾',
            "name": key,
            "value": d4[key],
        });
        mapData[4].push({
            "year": '光线',
            "name": key,
            "value": d5[key],
        });
    }
    console.log(mapData)
    var jian = [];
    var count = [];
    var datamax = [];
    var datamin = [];
    //visualMap的max正常值设定
    var zhu = [30, 80, 60, 80, 50, ]
    //visualMap的min正常值设定
    var li = [15, 15, 20, 20, 0,]
    //var count2=[];
    var count3 = [];
    for (var i = 0; i < mapData.length; i++) {
        mapData[i].sort(function sortNumber(a, b) {
            return a.value - b.value
        });
        barData.push([]);
        categoryData.push([]);
        fei.push([]);
        rong.push([]);
        tian.push([]);
        jian[i] = 0;
        count[i] = 0;
        count3[i] = 0;
        datamax[i] = 0;
        datamin[i] = 1000;
        for (var j = 0; j < mapData[i].length; j++) {

            if (mapData[i][j].name == '焊装') {
                tian[i][0] = mapData[i][j].value;

            } else if (mapData[i][j].name == 'WBS') {
                tian[i][1] = mapData[i][j].value;

            } else if (mapData[i][j].name == '涂装') {
                tian[i][2] = mapData[i][j].value;

            } else if (mapData[i][j].name == 'PBS') {
                tian[i][3] = mapData[i][j].value;

            } else if (mapData[i][j].name == '总装') {
                tian[i][4] = mapData[i][j].value;

            } else if (mapData[i][j].name == 'PDI') {
                tian[i][5] = mapData[i][j].value;

            } else if (mapData[i][j].name == 'PACK') {
                tian[i][6] = mapData[i][j].value;

            } 

            if (mapData[i][j].value >= -100) {
                jian[i] += mapData[i][j].value;
                count[i]++; //平均计数
            } else {
                fei[i].push(mapData[i][j].name)
            }

            if (mapData[i][j].value >= datamax[i]) {
                datamax[i] = mapData[i][j].value;

            }
            if (mapData[i][j].value <= datamin[i]) {
                datamin[i] = mapData[i][j].value;

            }
            //count2[i]=mapData[i].length-count[i];
            if (mapData[i][j].value < li[i] || mapData[i][j].value > zhu[i]) {
                count3[i]++;
                rong[i].push(mapData[i][j].name);

            }
            barData[i].push(mapData[i][j].value);
            categoryData[i].push(mapData[i][j].name);

        }
    }
    
    
 
   

    $.getJSON(uploadedDataURL, function(geoJson) {

        echarts.registerMap('home', geoJson);
        var convertData = function(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };
        //车间名称显示
        var convertData1 = function(database) {
            var res = [];
            for (var i = 0; i < database.length; i++) {
                var geoCoord1 = geoGpsMap[database[i].name];
                if (geoCoord1) {
                    res.push({
                        name: database[i].name,
                        value: geoCoord1.concat(database[i].value)
                    });
                }
            }
            return res;
        };

        var convertedData1 = [
            convertData1(database),
            convertData1(database.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        //焊装控制开关legend
        var c1 = function(da1) {
            var res = [];
            for (var i = 0; i < da1.length; i++) {
                var g1 = l1[da1[i].name];
                if (g1) {
                    res.push({
                        name: da1[i].name,
                        value: g1.concat(da1[i].value)
                    });
                }
            }
            return res;
        };

        var cc1 = [
            c1(da1),
            c1(da1.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        //WBS控制开关legend
        var c2 = function(da2) {
            var res = [];
            for (var i = 0; i < da2.length; i++) {
                var g2 = l2[da2[i].name];
                if (g2) {
                    res.push({
                        name: da2[i].name,
                        value: g2.concat(da2[i].value)
                    });
                }
            }
            return res;
        };

        var cc2 = [
            c2(da2),
            c2(da2.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];

        //涂装控制开关legend
        var c3 = function(da3) {
            var res = [];
            for (var i = 0; i < da3.length; i++) {
                var g3 = l3[da3[i].name];
                if (g3) {
                    res.push({
                        name: da3[i].name,
                        value: g3.concat(da3[i].value)
                    });
                }
            }
            return res;
        };

        var cc3 = [
            c3(da3),
            c3(da3.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        //PBS控制开关legend
        var c4 = function(da4) {
            var res = [];
            for (var i = 0; i < da4.length; i++) {
                var g4 = l4[da4[i].name];
                if (g4) {
                    res.push({
                        name: da4[i].name,
                        value: g4.concat(da4[i].value)
                    });
                }
            }
            return res;
        };

        var cc4 = [
            c4(da4),
            c4(da4.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        //总装控制开关legend
        var c5 = function(da5) {
            var res = [];
            for (var i = 0; i < da5.length; i++) {
                var g5 = l5[da5[i].name];
                if (g5) {
                    res.push({
                        name: da5[i].name,
                        value: g5.concat(da5[i].value)
                    });
                }
            }
            return res;
        };

        var cc5 = [
            c5(da5),
            c5(da5.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        //PDI控制开关legend
        var c6 = function(da6) {
            var res = [];
            for (var i = 0; i < da6.length; i++) {
                var g6 = l6[da6[i].name];
                if (g6) {
                    res.push({
                        name: da6[i].name,
                        value: g6.concat(da6[i].value)
                    });
                }
            }
            return res;
        };

        var cc6 = [
            c6(da6),
            c6(da6.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];
        //PACK控制开关legend
        var c7 = function(da7) {
            var res = [];
            for (var i = 0; i < da7.length; i++) {
                var g7 = l7[da7[i].name];
                if (g7) {
                    res.push({
                        name: da7[i].name,
                        value: g7.concat(da7[i].value)
                    });
                }
            }
            return res;
        };

        var cc7 = [
            c7(da7),
            c7(da7.sort(function(a, b) {
                return b.value - a.value;
            }).slice(0, 6))
        ];

        //         //聚点随机程序
        var convertToLineData = function(data, gps) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem.name];
                //debugger;
                var toCoord = gps; 
                // var toCoord = geoGps[Math.random()*3]; 
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        value: dataItem.value
                    }, {
                        coord: toCoord,
                    }]);
                }
            }
            return res;
        };

        var convertToLineData001 = function(data, gps) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap004[dataItem.name];
                //debugger;
                var toCoord = gps; 
                console.log(toCoord)
                console.log(dataItem)
                console.log(fromCoord)
                // var toCoord = geoGps[Math.random()*3]; 
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        value: dataItem.value
                    }, {
                        coord: toCoord,
                    }]);
                }
            }
            return res;
        };

        optionXyMap01 = {
            //底部滚动栏
            timeline: {
                data: year,
                axisType: 'category',
                autoPlay: true,
                playInterval: 5000,
                left: '10%',
                right: '10%',
                bottom: '3%',
                width: '80%',
                label: {
                    normal: {
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#fff'
                        }
                    }
                },
                symbolSize: 10,
                lineStyle: {
                    color: '#555'
                },
                checkpointStyle: {
                    borderColor: '#87CEEB',
                    borderWidth: 2
                },
                controlStyle: {
                    showNextBtn: true,
                    showPrevBtn: true,
                    normal: {
                        color: '#666',
                        borderColor: '#666'
                    },
                    emphasis: {
                        color: '#aaa',
                        borderColor: '#aaa'
                    }
                },

            },
            baseOption: {
                animation: true,
                animationDuration: 1000,
                animationEasing: 'cubicInOut',
                animationDurationUpdate: 1000,
                animationEasingUpdate: 'cubicInOut',
                //柱状图样式
                grid: [{
                    left: '65%',
                    top: '34.5%',
                    bottom: '44.5%',
                    width: '20%'
                }, {
                    gridindex: 1,
                    left: '65%',
                    right: '3%',
                    top: '65%',
                    bottom: '10%',
                    containLabel: true
                }],
                tooltip: {
                    trigger: 'axis', // hover触发器
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
                        shadowStyle: {
                            color: '#aaa' //hover颜色
                        },
                    },


                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: false
                        },
                        magicType: {
                            show: true,
                            type: ['bar', 'line']
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                legend: [{
                        data: ['历史平均数据1', '历史平均数据2'],
                        x: '75%',
                        y: '60%',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    {
                        data: [ '车间或区域状态','生产路线'],
                        top: '10%',
                        left: '35%',
                        textStyle: {
                            color: '#fff'
                        }
                    },


                    {
                        icon: 'roundRect',
                        orient: 'vertical',
                        top: '7%',
                        left: '5%',

                        data: [{
                                name: '焊装',
                            },
                            {
                                name: 'WBS',
                            },
                            {
                                name: '涂装',
                            },
                            {
                                name: 'PBS',
                            },
                            {
                                name: '总装',
                            },

                            {
                                name: 'PDI',
                            },
                            {
                                name: 'PACK',
                            }
                        ],
                        selected: {
                            '焊装': true,
                            'WBS': true,
                            '涂装': true,
                            'PBS': true,
                            '总装': true,
                            'PDI': true,
                            'PACK': true,
                            // 	'': false
                        },


                        textStyle: {
                            color: '#fff'
                        }
                    },

                ],

                //地图样式
                geo: {
                    show: true,
                    map: 'home',
                    roam: true,
                    zoom: 0.8,
                    center: [106.52675807476044, 29.53252597782999],
                    label: {
                        emphasis: {

                            show: false
                        }
                    },
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(147, 235, 248, 1)',
                            borderWidth: 1,
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.8,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                                }],
                                globalCoord: false // 缺省为 false
                            },
                            shadowColor: 'rgba(128, 217, 248, 1)',
                            // shadowColor: 'rgba(255, 255, 255, 1)',
                            shadowOffsetX: -2,
                            shadowOffsetY: 2,
                            shadowBlur: 10
                        },
                        emphasis: {
                            areaColor: '#389BB7',
                            borderWidth: 0
                        }
                    }
                },
            },

            options: []

        };


        for (var n = 0; n < year.length; n++) {

            optionXyMap01.options.push({
                //背景色
                backgroundColor: '#013954',

                //标题
                title: [{
                        text: '车间厂区平面图',
                        left: '16%',
                        top: '5%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 25
                        }
                    },
                    {
                        id: 'statistic',
                        text: year[n] + "数据统计情况",
                        left: '60%',
                        top: '5%',
                        textStyle: {
                            color: '#fff',
                            fontSize: 25
                        }
                    },
                    {

                        text: "平均值：" + (jian[n] / count[n]).toFixed(2),
                        left: '60%',
                        top: '14.5%',
                        textStyle: {
                            color: '#90ee90',
                            fontSize: 15
                        }
                    },
                    {

                        text: "最大值：" + datamax[n],
                        left: '72%',
                        top: '14.5%',
                        textStyle: {
                            color: '#FF4500',
                            fontSize: 15
                        }
                    },
                    {

                        text: "最小值：" + datamin[n],
                        left: '84%',
                        top: '14.5%',
                        textStyle: {
                            color: '#87CEFF',
                            fontSize: 15
                        }
                    },
                    {

                        text: "未使用的车间或区域：" + (mapData[n].length - count[n]), //+'\n'+fei[n],
                        left: '60%',
                        top: '17.5%',
                        textStyle: {
                            color: '#FF7F00',
                            fontSize: 15
                        },

                        extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效
                    },
                    {

                        text: "数据异常车间或区域：" + (count3[n]),
                        left: '76%',
                        top: '17.5%',
                        textStyle: {
                            color: '#9370DB',
                            fontSize: 15
                        },

                        extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效
                    },
                    {

                        text: "(数据正常范围：" + li[n] + "~" + zhu[n] + ")",
                        left: '60%',
                        top: '20.5%',
                        textStyle: {
                            color: '#FFA54F',
                            fontSize: 15
                        },

                        extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效
                    },
                    {

                        text: "未使用的车间或区域状态：" + (fei[n]), //+'\n'+fei[n],
                        left: '60%',
                        top: '23.5%',
                        textStyle: {
                            color: '#FF7F00',
                            fontSize: 15
                        },

                        extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效
                    }, {

                        text: "数据异常车间或区域状态：" + (rong[n]),
                        left: '60%',
                        top: '26.5%',
                        textStyle: {
                            color: '#9370DB',
                            fontSize: 15
                        },

                        extraCssText: 'width:120px; white-space:pre-wrap' //额外样式使\n生效
                    }


                ],
                visualMap: {
                    min: li[n],
                    max: zhu[n],
                    calculable: true,
                    text: ['High', 'Low'],
                    inRange: {
                        color: ['#50a3ba', '#eac736', '#d94e5d']

                    },
                    padding: 5,
                    right: "5%",
                    bottom: "40%",
                    textStyle: {
                        color: '#fff'
                    }
                },
                //             brush: {
                //     outOfBrush: {
                //         color: '#abc'
                //     },
                //     brushStyle: {
                //         borderWidth: 2,
                //         color: 'rgba(0,0,0,0.2)',
                //         borderColor: 'rgba(0,0,0,0.5)',
                //     },
                //     seriesIndex: [0, 1],
                //     throttleType: 'debounce',
                //     throttleDelay: 300,
                //     geoIndex: 0
                // },
                xAxis: [{
                        type: 'value',
                        scale: true,
                        position: 'top',
                        min: 0,
                        boundaryGap: false,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            margin: 2,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            margin: 2,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        data: ['0时', '1时', '2时', '3时', '4时', '5时', '6时', '7时', '8时', '9时', '10时', '11时', '12时', '13时', '14时', '15时', '16时', '17时', '18时', '19时', '20时', '21时', '22时', '23时']

                    }
                ],
                yAxis: [{
                    type: 'category',
                    //  name: 'TOP 20',
                    nameGap: 16,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: '#ddd'
                        }
                    },
                    axisLabel: {
                        interval: 0,
                        textStyle: {
                            color: '#ddd'
                        }
                    },
                    data: categoryData[n]
                }, {
                    gridIndex: 1,
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} ',
                        textStyle: {
                            color: '#ddd'
                        }
                    }
                }],

                series: [
                    //地图
                    {
                        type: 'map',
                        map: 'home',

                        geoIndex: 0,
                        aspectScale: 1, //长宽比
                        showLegendSymbol: true, // 存在legend时显示
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#031525',
                                borderColor: '#FFFFFF',
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        animation: false,
                        data: mapData
                    },
                    //地图中闪烁的点
                    {
                        name: '车间或区域状态',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData(mapData[n].sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)), //大小差异显示
                        symbolSize: function(val) {
                            return (val[2] * 40 + 1200) / 180;
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                shadowBlur: 10,
                                shadowColor: colors[colorIndex][n]
                            },
                        },
                        zlevel: 1
                    },
                    /*{
                        //基站点显示
                        name: '基站',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: convertData1(database.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'arrow',
                        symbolSize: 10,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            }
                        },

                        itemStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                shadowBlur: 10,
                                shadowColor: '#2f4554'
                            },
                            emphasis: {
                                color: '#fff',
                                shadowBlur: 10,
                                shadowColor: '#cfff'
                            }
                        },
                        zlevel: 1
                    },*/
                    {

                        name: '焊装',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c1(da1.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][0],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][0],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    {

                        name: 'WBS',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c2(da2.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][1],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][1],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    {

                        name: '涂装',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c3(da3.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][2],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][2],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    {

                        name: 'PBS',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c4(da4.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][3],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][3],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    {

                        name: '总装',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c5(da5.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][4],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][4],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    {

                        name: 'PDI',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c6(da6.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][5],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][5],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    {

                        name: 'PACK',
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        data: c7(da7.sort(function(a, b) {
                            return b.value - a.value;
                        }).slice(0, 20)),
                        symbol: 'roundRect', //气泡
                        symbolSize: 10,
                        // showEffectOn: 'render',
                        // rippleEffect: {
                        //     brushType: 'stroke'
                        // },
                        // hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}' + year1[n] + '：开'+"\n" +year[n] + '：' + tian[n][6],
                                position: 'bottom',
                                show: true,
                                color:'#FFFFFF'
                            },
                            emphasis: {
                                formatter: '{b}' + year[n] + '：' + tian[n][6],
                                position: 'bottom',
                                show: true
                            },
                        },

                        itemStyle: {
                            normal: {
                                color: '#3195FA',
                                shadowBlur: 10,
                                shadowColor: '#FFFFFF'
                            },
                            emphasis: {
                                color: '#c23531',
                                shadowBlur: 10,
                                shadowColor: '#c23531'
                            },

                        },
                        zlevel: 1
                    },
                    //线条聚点
                    {name:'生产路线',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 3, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                width: 0.1, //尾迹线条宽度
                                opacity: 0.5, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        //调用聚点随机
                        data: convertToLineData(line1, geoGpsMap["WBS"])
                    },
                    {name:'生产路线',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 3, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                width: 0.1, //尾迹线条宽度
                                opacity: 0.5, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        //调用聚点随机
                        data: convertToLineData(line2, geoGpsMap["涂装"])
                    },
                    {name:'生产路线',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 3, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                width: 0.1, //尾迹线条宽度
                                opacity: 0.5, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        //调用聚点随机
                        data: convertToLineData(line3, geoGpsMap["PBS"])
                    },
                    {name:'生产路线',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 3, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                width: 0.1, //尾迹线条宽度
                                opacity: 0.5, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        //调用聚点随机
                        data: convertToLineData(line4, geoGpsMap["总装"])
                    },
                    {name:'生产路线',
                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 4, //箭头指向速度，值越小速度越快
                            trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                            symbol: 'arrow', //箭头图标
                            symbolSize: 3, //图标大小
                        },
                        lineStyle: {
                            normal: {
                                color: colors[colorIndex][n],
                                width: 0.1, //尾迹线条宽度
                                opacity: 0.5, //尾迹线条透明度
                                curveness: .3 //尾迹线条曲直度
                            }
                        },
                        //调用聚点随机
                        data: convertToLineData(line5, geoGpsMap["PDI"])
                    },
                    //柱状图
                    {
                        zlevel: 1.5,
                        type: 'bar',
                        symbol: 'none',
                        itemStyle: {
                            normal: {
                                color: colors[colorIndex][n]
                            }
                        },
                        data: barData[n]
                    },
                    {

                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        name: '历史平均数据1',

                        type: 'line',
                        lineStyle: {
                            normal: {
                                color: '#4ea397'
                            }
                        },
                        data: lineData1[n],
                        markPoint: {
                            data: [{
                                    type: 'max',
                                    name: '最大值',
                                    symbolSize: 40
                                },
                                {
                                    type: 'min',
                                    name: '最小值',
                                    symbolSize: 20
                                }
                            ],
                            itemStyle: {
                                normal: {
                                    color: '#d0648a'
                                }
                            }
                        },
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }]
                        }
                    },
                    {
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        name: '历史平均数据2',

                        type: 'line',
                        lineStyle: {
                            normal: {
                                color: '#4ea397'
                            }
                        },
                        data: lineData2[n],
                        markPoint: {
                            data: [{
                                    type: 'max',
                                    name: '最大值',
                                    symbolSize: 40
                                },
                                {
                                    type: 'min',
                                    name: '最小值',
                                    symbolSize: 20
                                }
                            ],
                            itemStyle: {
                                normal: {
                                    color: '#d0648a'
                                }
                            }
                        },
                        markLine: {
                            data: [{
                                type: 'average',
                                name: '平均值'
                            }]
                        }
                    },


                ]
            })
        }
        myChart.setOption(optionXyMap01);
    });
});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
