function socialAssistance() { var jsonData1 = [ ['product', '最低生活保障人数(人)', '发放低保金(万元)', '城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)', '农村居民最低生活保障人数(人)', '农村居民发放低保金(万元)'], // ['2015年', 11582, 5820.90, 10289, 5387.60, 1293, 433.30], ['2016年12月', 10577, 6109.90, 9446, 5661.10, 1131, 448.80], ['2017年12月', 10633, 6691.90, 9515, 6146.70, 1118, 545.20], ['2018年12月', 10044, 7345.30, 8994, 6710.60, 1050, 634.70], ['2019年12月', 8960, 6939.10, 8070, 6365.80, 890, 573.30], ['2020年12月', 8297, 7853.00, 7496, 7216.00, 801, 637.00], ['2021年12月', 7467, 6968.03, 6792, 6341.04, 675, 626.99], ['2022年12月', 7090, 6282.82, 6513, 5759.55, 577, 523.27] ] var jsonData2 = [ ['product', '特困人员救助供养人数(人)', '发放救助金供养金(万元)', '城市特困人员救助供养人数(人)', '城市发放救助供养金(万元)', '农村特困人员救助供养人数(人)', '农村发放救助供养金(万元)'], // ['2015年', 208, 573.10, 106, 264.00, 102, 309.10], ['2016年12月', 365, 415.70, 113, 115.50, 252, 300.20], ['2017年12月', 349, 431.80, 116, 191.40, 233, 240.40], ['2018年12月', 351, 503.00, 131, 228.50, 220, 274.50], ['2019年12月', 381, 495.00, 162, 238.00, 219, 257.00], ['2020年12月', 349, 330.80, 142, 330.80, 207, 309.00], ['2021年12月', 352, 654.10, 167, 384.60, 185, 269.50], ['2022年12月', 348, 748.51, 187, 470.57, 161, 277.94] ] var jsonData3 = [ ['product', '临时救助人数(人)', '发放金额(万元)'], // ['2015年', 6064, 411.70], ['2016年12月', 3544, 915.70], ['2017年12月', 2888, 877.50], ['2018年12月', 2677, 743.50], ['2019年12月', 1412, 813.70], ['2020年12月', 1412, 827.70], ['2021年12月', 1264, 680.60], ['2022年12月', 969, 373.16] ] //社会救助统计图 var chartDom = document.getElementById('shjzEchar'); var myChart = echarts.init(chartDom); var option; // var tapsTitleLi = $('.div-shjz .title li'); // tapsTitleLi.removeClass('select'); // console.log($("#zdsh")) // $("#zdsh").addClass('select') myChart.clear(); option = { grid: { // 网格线配置 show: true, lineStyle: { color: ["#e9e9e9"], width: 1, type: "solid", }, left: 80, right: 80, top: '15%' }, legend: [{ left: '0%', orient: 'vertical', itemWidth: 12, itemHeight: 10, data: ['最低生活保障人数(人)', '发放低保金(万元)', '城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)'] }, { left: '40%', orient: 'vertical', itemWidth: 12, itemHeight: 10, data: ['农村居民最低生活保障人数(人)', '农村居民发放低保金(万元)'] } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: "rgb(0 0 0 / 40%)", borderColor: 'transparent', textStyle: { color: '#fff' }, confine: true }, dataset: { source: jsonData1 }, xAxis: { type: 'category', axisTick: { show: true //坐标轴刻度线 }, axisLine: { //轴线 show: true }, splitLine: { //网格线 show: true }, axisLabel: { show: true, textStyle: { color: '#333', //更改坐标轴文字颜色 fontSize: 14, //更改坐标轴文字大小 fontWeight: 'bold' } } }, yAxis: [{ type: 'value', min: 0, max: 12000, interval: 3000, axisLabel: { formatter: '{value}(人)' }, axisTick: { show: true //坐标轴刻度线 }, axisLine: { //轴线 show: true }, splitLine: { //网格线 show: true } }, { type: 'value', min: 0, max: 8000, 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: '#FA8A46' } }, { type: 'bar', yAxisIndex: 1, itemStyle: { color: '#4DC4E7' } }, ] }; 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", }, left: 80, right: 80, top: '15%' }, legend: [{ left: '0%', orient: 'vertical', itemWidth: 12, itemHeight: 10, data: ['最低生活保障人数(人)', '发放低保金(万元)', '城市居民最低生活保障人数(人)', '城市居民发放低保金(万元)'] }, { left: '50%', orient: 'vertical', itemWidth: 12, itemHeight: 10, data: ['农村居民发放低保金(万元)', '农村居民最低生活保障人数(人)'] } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: "rgb(0 0 0 / 40%)", borderColor: 'transparent', textStyle: { color: '#fff' }, confine: true }, 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: 12000, interval: 3000, axisLabel: { formatter: '{value}(人)' }, axisTick: { show: true //坐标轴刻度线 }, axisLine: { //轴线 show: true }, splitLine: { //网格线 show: true } }, { type: 'value', min: 0, max: 8000, 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: '#FA8A46' } }, { type: 'bar', yAxisIndex: 1, itemStyle: { color: '#4DC4E7' } }, ] }; myChart.clear(); option && myChart.setOption(option); } else if ($(this).data('type') == 2) { option = { grid: { // 网格线配置 show: true, lineStyle: { color: ["#e9e9e9"], width: 1, type: "solid", }, left: 80, right: 80, top: '15%' }, legend: [{ left: '0%', orient: 'vertical', itemWidth: 12, itemHeight: 10, data: ['特困人员救助供养人数(人)', '发放救助金供养金(万元)', '城市特困人员救助供养人数(人)', '农村特困人员救助供养人数(人)'] }, { left: '50%', orient: 'vertical', itemWidth: 12, itemHeight: 10, data: ['城市发放救助供养金(万元)', '农村发放救助供养金(万元)'] } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: "rgb(0 0 0 / 40%)", borderColor: 'transparent', textStyle: { color: '#fff' }, confine: true }, 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: 400, interval: 50, axisLabel: { formatter: '{value}(人)' }, axisTick: { show: true //坐标轴刻度线 }, axisLine: { //轴线 show: true }, splitLine: { //网格线 show: true } }, { type: 'value', min: 0, max: 960, interval: 120, 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: '#FA8A46' } }, { type: 'bar', yAxisIndex: 1, itemStyle: { color: '#4DC4E7' } }, ] }; myChart.clear(); option && myChart.setOption(option); } else if ($(this).data('type') == 3) { option = { grid: { // 网格线配置 show: true, lineStyle: { color: ["#e9e9e9"], width: 1, type: "solid", }, left: 80, right: 80 }, legend: [{ itemWidth: 12, itemHeight: 10, data: ['临时救助人数(人)', '发放金额(万元)'] } ], tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: "rgb(0 0 0 / 40%)", borderColor: 'transparent', textStyle: { color: '#fff' }, confine: true }, 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: 7000, interval: 1000, axisLabel: { formatter: '{value}(人)' }, axisTick: { show: true //坐标轴刻度线 }, axisLine: { //轴线 show: true }, splitLine: { //网格线 show: true } }, { type: 'value', min: 0, max: 1050, interval: 150, axisLabel: { formatter: '{value}(万元)' } }], series: [{ type: 'bar', itemStyle: { color: '#3C8DE6' } }, { yAxisIndex: 1, type: 'bar', itemStyle: { color: '#FAA639' } } ] }; myChart.clear(); option && myChart.setOption(option); } }) }