nazw/nngkxxdp/src/main/resources/static/natj/dataCenter/js/socialAssistance.js

var jsonData1 = [
    ['product', '最低生活保障人数(人)', '发放低保金(万元)', '城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)', '农村居民最低生活保障（人)', '农村居民最发放低保金(万元)'],
    ['2015', 11582, 5820.90, 10289, 5387.60, 1293, 433.30],
    ['2016', 10577, 6109.90, 9446, 5661.10, 1131, 448.80],
    ['2017', 10633, 6691.90, 9515, 6146.70, 1118, 545.20],
    ['2018', 10044, 7345.30, 8994, 6710.60, 1050, 634.70],
    ['2019', 8960, 6939.10, 8070, 6365.80, 890, 573.00],
    ['2020', 8297, 7853.00, 7496, 7216.00, 801, 637.00],
    ['2021', 7467, 5800.80, 6792, 5317.40, 675, 483.40]
]
var jsonData2 = [
    ['product', '特困人员救助供养人数（人）', '发放救助金供养金（万元）', '城市特困人员救助供养人数（人）', '城市发放救助供养金（万元）', '农村特困人员救助供养人数（人）', '农村发放救助供养金（万元）'],
    ['2015', 2000, 50, 7000, 32, 767, 90],
    ['2016', 2000, 50, 7000, 32, 767, 90],
    ['2017', 2000, 50, 7000, 32, 767, 90],
    ['2018', 2000, 50, 7000, 32, 767, 90],
    ['2019', 2000, 50, 7000, 32, 767, 90],
    ['2020', 2000, 50, 7000, 32, 767, 90],
    ['2021', 2000, 50, 7000, 32, 767, 90]
]
var jsonData3 = [
    ['product', '临时救助人数（人）', '发放金额（万元）'],
    ['2015', 2000, 50],
    ['2016', 2000, 50],
    ['2017', 2000, 50],
    ['2018', 2000, 50],
    ['2019', 2000, 50],
    ['2020', 2000, 50],
    ['2021', 2000, 50]
]
//社会救助统计图
var chartDom = document.getElementById('shjzEchar');
var myChart = echarts.init(chartDom);
var option;
option = {
    grid: {
        // 网格线配置
        show: true,
        lineStyle: {
            color: ["#e9e9e9"],
            width: 1,
            type: "solid",
        },
    },
    legend: [{
        left: '20%',
        orient: 'vertical',
        data: ['最低生活保障人数(人)', '发放低保金(万元)']
    },
    {
        left: '40%',
        orient: 'vertical',
        data: ['城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)']
    }, {
        left: '60%',
        orient: 'vertical',
        data: ['农村居民最低生活保障（人)', '农村居民最发放低保金(万元)']
    }
    ],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: "rgb(0 0 0 / 40%)",
        borderColor: 'transparent',
        textStyle: {
            color: '#fff'
        },

    },
    dataset: {
        source: jsonData1
    },
    xAxis: {
        type: 'category',
        axisTick: {
            show: true  //坐标轴刻度线
        },
        axisLine: { //轴线
            show: true
        },
        splitLine: { //网格线
            show: true
        },
        axisLabel: {
            show: true,
            textStyle: {
                color: '#333',  //更改坐标轴文字颜色
                fontSize: 14      //更改坐标轴文字大小
            }
        }
    },
    yAxis: [{
        type: 'value',
        min: 0,
        max: 15000,
        interval: 3000,
        axisLabel: {
            formatter: '{value}(人)'
        },
        axisTick: {
            show: true  //坐标轴刻度线
        },
        axisLine: { //轴线
            show: true
        },
        splitLine: { //网格线
            show: true
        }
    },
    {
        type: 'value',
        min: 0,
        max: 10000,
        interval: 2000,
        axisLabel: {
            formatter: '{value}(万元)'
        }
    }],
    series: [{
        type: 'bar',
        itemStyle: {
            color: '#3C8DE6'
        }
    },
    {
        yAxisIndex: 1,
        type: 'bar',
        itemStyle: {
            color: '#FAA639'
        }
    },
    {
        type: 'bar',
        itemStyle: {
            color: '#8EC051'
        }
    },
    {
        type: 'bar',
        yAxisIndex: 1,
        itemStyle: {
            color: '#27C2C1'
        }
    },
    {
        type: 'bar',
        itemStyle: {
            color: '#4DC4E7'
        }
    },
    {
        type: 'bar',
        yAxisIndex: 1,
        itemStyle: {
            color: '#FA8A46'
        }
    },
    ]
};
option && myChart.setOption(option);
$('.div-shjz .title').on('click', 'li', function () {
    if ($(this).data('type') == 1) {
        option = {
            grid: {
                // 网格线配置
                show: true,
                lineStyle: {
                    color: ["#e9e9e9"],
                    width: 1,
                    type: "solid",
                },
            },
            legend: [{
                left: '20%',
                orient: 'vertical',
                data: ['最低生活保障人数(人)', '发放低保金(万元)']
            },
            {
                left: '40%',
                orient: 'vertical',
                data: ['城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)']
            }, {
                left: '60%',
                orient: 'vertical',
                data: ['农村居民最低生活保障（人)', '农村居民最发放低保金(万元)']
            }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: "rgb(0 0 0 / 40%)",
                borderColor: 'transparent',
                textStyle: {
                    color: '#fff'
                },

            },
            dataset: {
                source: jsonData1
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                }
            },
            yAxis: [{
                type: 'value',
                min: 0,
                max: 15000,
                interval: 3000,
                axisLabel: {
                    formatter: '{value}(人)'
                },
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10000,
                interval: 2000,
                axisLabel: {
                    formatter: '{value}(万元)'
                }
            }],
            series: [{
                type: 'bar',
                itemStyle: {
                    color: '#3C8DE6'
                }
            },
            {
                yAxisIndex: 1,
                type: 'bar',
                itemStyle: {
                    color: '#FAA639'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#8EC051'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#27C2C1'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#4DC4E7'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#FA8A46'
                }
            },
            ]
        };
        option && myChart.setOption(option);
    } else if ($(this).data('type') == 2) {
        option = {
            grid: {
                // 网格线配置
                show: true,
                lineStyle: {
                    color: ["#e9e9e9"],
                    width: 1,
                    type: "solid",
                },
            },
            legend: [{
                left: '20%',
                orient: 'vertical',
                data: ['特困人员救助供养人数（人）', '发放救助金供养金（万元）']
            },
            {
                left: '40%',
                orient: 'vertical',
                data: ['城市特困人员救助供养人数（人）', '城市发放救助供养金（万元）']
            }, {
                left: '60%',
                orient: 'vertical',
                data: ['农村特困人员救助供养人数（人）', '农村发放救助供养金（万元）']
            }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: "rgb(0 0 0 / 40%)",
                borderColor: 'transparent',
                textStyle: {
                    color: '#fff'
                },

            },
            dataset: {
                source: jsonData2
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                }
            },
            yAxis: [{
                type: 'value',
                min: 0,
                max: 15000,
                interval: 3000,
                axisLabel: {
                    formatter: '{value}(人)'
                },
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10000,
                interval: 2000,
                axisLabel: {
                    formatter: '{value}(万元)'
                }
            }],
            series: [{
                type: 'bar',
                itemStyle: {
                    color: '#3C8DE6'
                }
            },
            {
                yAxisIndex: 1,
                type: 'bar',
                itemStyle: {
                    color: '#FAA639'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#8EC051'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#27C2C1'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#4DC4E7'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#FA8A46'
                }
            },
            ]
        };
        option && myChart.setOption(option);
    } else if ($(this).data('type') == 3) {
        option = {
            grid: {
                // 网格线配置
                show: true,
                lineStyle: {
                    color: ["#e9e9e9"],
                    width: 1,
                    type: "solid",
                },
            },
            legend: [{
                left: '40%',
                orient: 'vertical',
                data: ['临时救助人数（人）', '发放金额（万元）']
            }
            ],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                backgroundColor: "rgb(0 0 0 / 40%)",
                borderColor: 'transparent',
                textStyle: {
                    color: '#fff'
                },

            },
            dataset: {
                source: jsonData3
            },
            xAxis: {
                type: 'category',
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#333',  //更改坐标轴文字颜色
                        fontSize: 14      //更改坐标轴文字大小
                    }
                }
            },
            yAxis: [{
                type: 'value',
                min: 0,
                max: 15000,
                interval: 3000,
                axisLabel: {
                    formatter: '{value}(人)'
                },
                axisTick: {
                    show: true  //坐标轴刻度线
                },
                axisLine: { //轴线
                    show: true
                },
                splitLine: { //网格线
                    show: true
                }
            },
            {
                type: 'value',
                min: 0,
                max: 10000,
                interval: 2000,
                axisLabel: {
                    formatter: '{value}(万元)'
                }
            }],
            series: [{
                type: 'bar',
                itemStyle: {
                    color: '#3C8DE6'
                }
            },
            {
                yAxisIndex: 1,
                type: 'bar',
                itemStyle: {
                    color: '#FAA639'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#8EC051'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#27C2C1'
                }
            },
            {
                type: 'bar',
                itemStyle: {
                    color: '#4DC4E7'
                }
            },
            {
                type: 'bar',
                yAxisIndex: 1,
                itemStyle: {
                    color: '#FA8A46'
                }
            },
            ]
        };
        option && myChart.setOption(option);
    }
})