caiping/public/static/data/css/js/cost_company.js

 

    function echarts_1(data) {
        const myChart = echarts.init(document.getElementById('main1'))
        const option = {
            xAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },

                boundaryGap: false, // 坐标轴两边不留白

                // 标签文字样式修改
                axisLabel: {
                    color: '#9DA5AF',
                    margin: 12,
                    rich: {
                        a: {
                            padding: [0, 0, 0, 10] // 左边距 40
                        },
                        b: {
                            padding: [0, 10, 0, 0] // 右边距 40
                        }
                    }
                },
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },

            yAxis: {
                type: 'value',
                //背景线
                splitLine: {
                    lineStyle: {
                        type: 'dashed',
                        color: ['#EDEEF1']
                    }
                },
                axisLabel: {
                    color: '#9DA5AF',
                    margin: 20
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: params => {
                    const title = `<div style="font-weight: bold; margin-bottom: 10px">${params[0].axisValue}</div>`
                    let content = ''
                    params.forEach(item => {
                        content += `
                    <div style="margin-bottom: 6px">
                    <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #187FDD;"></span>
                    <span>${item.seriesName}：${item.value}</span>
                    </div>
                `
                    })
                    return title + content
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            // legend: {
            //     orient: 'horizontal', //设置图例朝向
            //     bottom: 'bottom',
            //     color:'red',
            // },
            series: [
                {
                    name: '项目数量',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 8,
                    itemStyle: {
                        color: '#187FDD',
                        normal: {
                            color: '#fff',
                            borderColor: '#187FDD',
                        }
                    },
                    lineStyle: {
                        // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0, color: 'rgb(72,177,203)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgb(72,116,203)' // 100% 处的颜色
                            }],
                            globalCoord: false // 缺省为 false
                        },
                        width: 4,
                    },
                    itemStyle: {
                        color: '#FFFFFF',
                        borderColor: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(72,177,203)', //0%处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(72,177,203)', //100%处的颜色
                                },
                            ],
                            global: false,
                            borderWidth: 4,
                        },
                    },
                    areaStyle: {
                        normal: {
                            //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{

                                offset: 0,
                                color: 'rgba(72,177,203,0.39)'
                            }, {
                                offset: .34,
                                color: 'rgba(56,155,255,0.25)'
                            }, {
                                offset: 1,
                                color: 'rgba(38,197,254,0.00)'
                            }])

                        }
                    },//区域颜色渐变
                    // color: '#4bc8db',
                    data: [data['all_sent_review_cost']['1']['project_number'],
                        data['all_sent_review_cost']['2']['project_number'],
                        data['all_sent_review_cost']['3']['project_number'],
                        data['all_sent_review_cost']['4']['project_number'],
                        data['all_sent_review_cost']['5']['project_number'],
                        data['all_sent_review_cost']['6']['project_number'],
                        data['all_sent_review_cost']['7']['project_number'],
                        data['all_sent_review_cost']['8']['project_number'],
                        data['all_sent_review_cost']['9']['project_number'],
                        data['all_sent_review_cost']['10']['project_number'],
                        data['all_sent_review_cost']['11']['project_number'],
                        data['all_sent_review_cost']['12']['project_number'],]
                }
            ]

        }
        myChart.setOption(option);
        //响应式布局
        // const resize = _.throttle(() => {
        //     myChart.resize()
        // }, 1000)
        //     window.addEventListener('resize', resize)
    }

    function echarts_2(data) {
        const myChart = echarts.init(document.getElementById('main2'))

        const option = {
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom',
            },
            tooltip: {},
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            dataset: {
                source: [
                    ['product', '送审金额', '审定金额'],
                    ['1月', data['all_sent_review_cost']['1']['all_sent_amount'], data['all_sent_review_cost']['1']['all_authorize_amount']],
                    ['2月', data['all_sent_review_cost']['2']['all_sent_amount'], data['all_sent_review_cost']['2']['all_authorize_amount']],
                    ['3月', data['all_sent_review_cost']['3']['all_sent_amount'], data['all_sent_review_cost']['3']['all_authorize_amount']],
                    ['4月', data['all_sent_review_cost']['4']['all_sent_amount'], data['all_sent_review_cost']['4']['all_authorize_amount']],
                    ['5月', data['all_sent_review_cost']['5']['all_sent_amount'], data['all_sent_review_cost']['5']['all_authorize_amount']],
                    ['6月', data['all_sent_review_cost']['6']['all_sent_amount'], data['all_sent_review_cost']['6']['all_authorize_amount']],
                    ['7月', data['all_sent_review_cost']['7']['all_sent_amount'], data['all_sent_review_cost']['7']['all_authorize_amount']],
                    ['8月', data['all_sent_review_cost']['8']['all_sent_amount'], data['all_sent_review_cost']['8']['all_authorize_amount']],
                    ['9月', data['all_sent_review_cost']['9']['all_sent_amount'], data['all_sent_review_cost']['9']['all_authorize_amount']],
                    ['10月', data['all_sent_review_cost']['10']['all_sent_amount'], data['all_sent_review_cost']['10']['all_authorize_amount']],
                    ['11月', data['all_sent_review_cost']['11']['all_sent_amount'], data['all_sent_review_cost']['11']['all_authorize_amount']],
                    ['12月', data['all_sent_review_cost']['12']['all_sent_amount'], data['all_sent_review_cost']['12']['all_authorize_amount']],
                ]
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
            },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [
                {
                    type: 'bar',
                    itemStyle: {
                        barBorderRadius: [7, 7, 0, 0],
                    },
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#18c1f6' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#5199f4' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }, {
                    type: 'bar',
                    itemStyle: {
                        barBorderRadius: [7, 7, 0, 0],
                    },
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'rgb(251,189,108)' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgb(251,163,99)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    },
                }
            ]
        }

        myChart.setOption(option);
    }

    function echarts_3(data) {
        const myChart = echarts.init(document.getElementById('main3'))

        const option = {
            xAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom'
            },
            tooltip: {},
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            series: [
                {
                    name: '送审服务费',
                    data: [data['all_sent_review_cost']['1']['all_sent_review_cost'],
                        data['all_sent_review_cost']['2']['all_sent_review_cost'],
                        data['all_sent_review_cost']['3']['all_sent_review_cost'],
                        data['all_sent_review_cost']['4']['all_sent_review_cost'],
                        data['all_sent_review_cost']['5']['all_sent_review_cost'],
                        data['all_sent_review_cost']['6']['all_sent_review_cost'],
                        data['all_sent_review_cost']['7']['all_sent_review_cost'],
                        data['all_sent_review_cost']['8']['all_sent_review_cost'],
                        data['all_sent_review_cost']['9']['all_sent_review_cost'],
                        data['all_sent_review_cost']['10']['all_sent_review_cost'],
                        data['all_sent_review_cost']['11']['all_sent_review_cost'],
                        data['all_sent_review_cost']['12']['all_sent_review_cost']],
                    type: 'bar',
                    // color:'#2452b2',
                    itemStyle: {  // 使用方法二的写法
                        barBorderRadius: [7, 7, 0, 0],
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 0,  //左
                            y2: 1,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(73,119,193)' // 0% 处的颜色
                                },

                                {
                                    offset: 1,
                                    color: 'rgb(159,175,209)' // 100% 处的颜色
                                }
                            ]
                        },

                    },

                }
            ]

        }

        myChart.setOption(option);
    }

    function echarts_4(data) {
        
        const myChart = echarts.init(document.getElementById('main4'))

        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            series: [
                {
                    name: '送审总额占比分布图',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {
                            value: data['sentAndaAuthorize']['0']['all_amount'],
                            name: '预算总额',
                            itemStyle: {
                                color: 'rgb(116,195,225)'
                            }
                        },
                        {
                            value: data['sentAndaAuthorize']['1']['all_amount'],
                            name: '结算总额',
                            itemStyle: {
                                color: 'rgb(241,103,106)'
                            }
                        },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }

        myChart.setOption(option);
    }

    function echarts_5(data) {
        const myChart = echarts.init(document.getElementById('main5'))

        let review = data['review_poportion'];
        let name = [];
        let set = [];
        for (let i = 0; i < review.length; i++) {
            if (review[i]['project_number'] != 0) {
                name.push(review[i]['entrust_unit_name'])
                set.push(review[i]['project_number'])
            }
        }


        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom',
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
                type: 'category',
                data: name
            },
            series: [
                {
                    name: '项目数量',
                    type: 'bar',
                    data: set,
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 1,  //左
                            y2: 0,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(254,221,148)' // 0% 处的颜色
                                },

                                {
                                    offset: 1,
                                    color: 'rgb(209,230,165)' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                },
            ]
        };

        myChart.setOption(option);
    }

    function echarts_6(data) {
        const myChart = echarts.init(document.getElementById('main6'))
        
        let review = data['sent_review_amount_top'];
        let name = [];
        let set = [];
        for (let i = 0; i < review.length; i++) {
            if (review[i]['all_sent_amount'] != 0) {
                name.push(review[i]['entrust_unit_name'])
                set.push(review[i]['all_sent_amount'])
            }
        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom',
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
                type: 'category',
                data: name
            },
            series: [
                {
                    name: '送审总额',
                    type: 'bar',
                    data: set,
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 1,  //左
                            y2: 0,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(229,221,233)' // 0% 处的颜色
                                },

                                {
                                    offset: 1,
                                    color: 'rgb(189,194,232)' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                },
            ]
        };

        myChart.setOption(option);
    }

    function echarts_7(data) {
        console.log(data)
        const myChart = echarts.init(document.getElementById('main7'))

        let review = data['authorize_amount_top'];
        let name = [];
        let set = [];
        for (let i = 0; i < review.length; i++) {
            if (review[i]['all_authorize_amount'] != 0) {
                name.push(review[i]['entrust_unit_name'])
                set.push(review[i]['all_authorize_amount'])
            }

        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom',
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
                type: 'category',
                data: name
            },
            series: [
                {
                    name: '审定总额',
                    type: 'bar',
                    data: set,
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 1,  //左
                            y2: 0,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(229,221,233)' // 0% 处的颜色
                                },

                                {
                                    offset: 1,
                                    color: 'rgb(189,194,232)' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                },
            ]
        };

        myChart.setOption(option);
    }

    function echarts_8(data) {
        const myChart = echarts.init(document.getElementById('main8'))
    
        let review = data['sent_number_top'];
        let name = [];
        let set = [];
        for (let i = 0; i < review.length; i++) {
            if (review[i]['project_number'] != 0) {
                name.push(review[i]['sent_review_unit_name'])
                set.push(review[i]['project_number'])
            }

        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom',
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
                type: 'category',
                data: name
            },
            series: [
                {
                    name: '项目数量',
                    type: 'bar',
                    data: set,
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 1,  //左
                            y2: 0,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(254,221,148)' // 0% 处的颜色
                                },

                                {
                                    offset: 1,
                                    color: 'rgb(209,230,165)' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                },
            ]
        };

        myChart.setOption(option);
    }

    function echarts_9(data) {
        const myChart = echarts.init(document.getElementById('main9'))

        let review = data['sent_poportion'];
        let name = [];
        let set = [];
        for (let i = 0; i < review.length; i++) {
            if (review[i]['all_sent_amount'] != '') {
                name.push(review[i]['sent_review_unit_name'])
                set.push(review[i]['all_sent_amount'])
            }

        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom',
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                axisLine: {
                    show: false // 隐藏轴线
                },

                axisTick: {
                    show: false // 隐藏分隔线
                },
                type: 'category',
                data: name
            },
            series: [
                {
                    name: '送审总额',
                    type: 'bar',
                    data: set,
                    itemStyle: {  // 使用方法二的写法
                        color: {
                            type: 'linear',
                            x: 0,  //右
                            y: 0,  //下
                            x2: 1,  //左
                            y2: 0,  //上
                            colorStops: [
                                {
                                    offset: 0,
                                    color: 'rgb(72,177,203)' // 0% 处的颜色
                                },

                                {
                                    offset: 1,
                                    color: 'rgb(72,116,203)' // 100% 处的颜色
                                }
                            ]
                        },
                    },
                },
            ]
        };

        myChart.setOption(option);
    }

    function echarts_10(data) {
        const myChart = echarts.init(document.getElementById('main10'))

        let review = data['sent_poportion'];
        let set = [];
        for (let i = 0; i < review.length; i++) {
            if (review[i]['all_sent_amount'] != '') {
                set.push({
                    value: review[i]['all_sent_amount'],
                    name: review[i]['sent_review_unit_name']
                })
            }

        }

        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'horizontal', //设置图例朝向
                bottom: 'bottom'
            },
            grid: {
                left: '3%',
                right: '4%',
                top: '10%',
                bottom: '15%',
                containLabel: true
            },
            series: [
                {
                    name: '送审单位送审总额占比图',
                    type: 'pie',
                    radius: '50%',
                    data: set,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }

        myChart.setOption(option);
    }