|
@@ -0,0 +1,543 @@
|
|
|
+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);
|
|
|
+ }
|
|
|
+})
|