FBS_VIEW/js/content/mycharts.js

/**
 * echarts简单封装
 * 冯海夫
 * 20201008
 */

var ChartsService = {
    // 大间隔
    getGridSpanBig:function(){
        return {
            grid:{
                left:"20%",
                right:"10%",
                bottom:"25%",
                top:"10%"
            }
        };
    },
    // 小间隔
    getGridSpanSmall:function(){
        return {
            grid:{
                left:"10%",
                right:"10%",
                bottom:"15%",
                top:"10%"
            }
        };
    },
    // 通用的柱状图
    // divId:待显示的div id, data：json对象
    initCommonBar: function (divId, data, grid) {
        var myChart = echarts.init(document.getElementById(divId));
        const xDataList = [];
        const yDataList = [];
        for (var val in data) {
            xDataList.push(val);
            yDataList.push(data[val]);
        }

        var option = {
            color: ['#37a2da'],
            grid:{
                left:"20%",
                right:"10%",
                bottom:"25%",
                top:"10%"
            },
            xAxis: {
                type: 'category',
                data: xDataList,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    },
                    interval:0,  
                    rotate:30  
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#37a2da'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                data: yDataList,
                type: 'bar',
                showBackground: false,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }
                },
            }]
        };

        if (grid != null && grid != undefined){
            option.grid = grid;
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    // 带阴影柱状图柱状图
    // divId:待显示的div id, data：json对象
    initBarWithShade: function (divId, data, grid) {
        var myChart = echarts.init(document.getElementById(divId));
        const xDataList = [];
        const yDataList = [];
        for (var val in data) {
            xDataList.push(val);
            yDataList.push(data[val]);
        }

        var option = {
            color: ['#37a2da'],
            grid:{
                left:"20%",
                right:"10%",
                bottom:"25%",
                top:"10%"
            },
            xAxis: {
                type: 'category',
                data: xDataList,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    },
                    interval:0,  
                    rotate:30
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#37a2da'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                data: yDataList,
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                },
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }
                },
            }]
        };
        if (grid != null && grid != undefined){
            option.grid = grid;
        }

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    // 上下两端都有数字的柱状图，算比例
    // divId:待显示的div id, data：json数组,label,sum1:下柱数,sum2:总熟
    initBarWithTwoNumberRate: function (divId, data, grid) {
        var myChart = echarts.init(document.getElementById(divId));
        const xDataList = [];
        const yDataList = [];
        const yDataList2 = []
        $.each(data, function (index, item) {
            xDataList.push(item.label);
            const sum1 = (item.sum1 / item.sum2 * 100).toFixed(0);
            yDataList.push(sum1);
            yDataList2.push(100 - sum1);
        });

        var option = {
            color: ['#37a2da', '#ffd85c'],
            grid:{
                left:"20%",
                right:"10%",
                bottom:"25%",
                top:"10%"
            },
            xAxis: {
                type: 'category',
                data: xDataList,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    },
                    interval:0,  
                    rotate:30  
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#37a2da'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                    name: '打卡',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: yDataList
                },
                {
                    name: '未打卡',
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true,
                        position: 'insideRight'
                    },
                    data: yDataList2
                }
            ]
        };

        if (grid != null && grid != undefined){
            option.grid = grid;
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    // 折线图，带阴影
    // divId:待显示的div id, data：json对象
    initLineWithShade: function (divId, data, grid) {
        var myChart = echarts.init(document.getElementById(divId));
        const xDataList = [];
        const yDataList = [];
        for (var val in data) {
            xDataList.push(val);
            yDataList.push(data[val]);
        }

        var option = {
            color: ['#37a2da'],
            grid:{
                left:"20%",
                right:"10%",
                bottom:"25%",
                top:"10%"
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xDataList,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    },
                    interval:0,  
                    rotate:30  
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#37a2da'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                data: yDataList,
                type: 'line',
                areaStyle: {},
                itemStyle: {
                    normal: {
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: '#ffffff'
                            }
                        }
                    }
                }
            }]
        };

        if (grid != null && grid != undefined){
            option.grid = grid;
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    // 通用的饼图
    // divId:待显示的div id, data：json对象
    initCommonPie: function (divId, data) {
        var myChart = echarts.init(document.getElementById(divId));
        const chartData = [];
        var total = 0;
        for (var val in data) {
            total += data[val] * 1;
        }
        for (var val in data) {
            //const desc = val + " " + data[val] + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
            const desc = val + " " + (data[val] * 1 / total * 100).toFixed(1) + "%";
            chartData.push({
                value: data[val],
                name: desc
            });
        }

        var option = {
            color: ['#37a2da', '#ffd85c', '#67e0e3', '#ff9f7f'],
            title: {
                text: '',
                subtext: '',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [{
                name: '',
                type: 'pie',
                radius: '100%',
                center: ['50%', '50%'],
                data: chartData,
                label: {
                    normal: {
                        show: true,
                        position: 'inner'
                    }
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });

    },
    // 仪表盘
    // divId:待显示的div id, data：json对象:name,value
    initCommonPanel: function (divId, data) {
        var myChart = echarts.init(document.getElementById(divId));
        const dataList = [];
        dataList.push(data);

        var option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%'
            },
            series: [{
                radius:"100%",
                name: '',
                type: 'gauge',
                detail: {
                    formatter: '{value}%'
                },
                data: dataList,
                title: {
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 12 //更改坐标轴文字大小
                    }
                }
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },
    // 柱状图和折线图对吧
    // divId:待显示的div id, data：json数组：label-x坐标名称,label1-y1名称，label2-y2名称,sum1-y1数量,sum2-y2数量
    initBarAndLine: function (divId, data, grid) {
        var myChart = echarts.init(document.getElementById(divId));
        if (data.length == 0)
            return;
        const yLabel1 = data[0].label1;
        const yLabel2 = data[0].label2;
        const xDataList = [];
        const yDataList1 = [];
        const yDataList2 = [];
        $.each(data, function (index, item) {
            xDataList.push(item.label);
            yDataList1.push(item.sum1);
            yDataList2.push(item.sum2);
        });

        var option = {
            color: ['#ff9f7f', '#ffd85c'],
            grid:{
                left:"20%",
                right:"10%",
                bottom:"25%",
                top:"10%"
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {

                data: [{
                        name: yLabel1,
                        textStyle: {
                            color: '#ffffff'
                        }
                    },
                    {
                        name: yLabel2,
                        textStyle: {
                            color: '#ffffff'
                        }
                    }
                ]
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xDataList,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    },
                    interval:0,  
                    rotate:30  
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#ffffff', //更改坐标轴文字颜色
                        fontSize: 14 //更改坐标轴文字大小
                    }
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#37a2da', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: ['#37a2da'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: [{
                    name: yLabel1,
                    type: 'line',
                    stack: '总量',
                    label: {
                        show: true
                    },
                    data: yDataList1
                },
                {
                    name: yLabel2,
                    type: 'bar',
                    stack: '总量',
                    label: {
                        show: true
                    },
                    data: yDataList2
                }
            ]
        };

        if (grid != null && grid != undefined){
            option.grid = grid;
        }
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    },

}