| | |
| | | <script type="text/javascript" src="../../static/js/common.js"></script> |
| | | <script type="text/javascript" src="../../static/layui/layui.js"></script> |
| | | <script type="text/javascript" src="../../static/js/jquery/jquery-3.3.1.min.js"></script> |
| | | <script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script> |
| | | <script type="text/javascript" src="../../static/js/echarts/echarts.min.5.4.3.js"></script> |
| | | <script type="text/javascript" src="../../static/js/echarts/highcharts.js"></script> |
| | | <style> |
| | | body { |
| | |
| | | // 饼图 |
| | | function pieCharts(){ |
| | | $.ajax({ |
| | | url:baseUrl+'/console/loc/pie/charts', |
| | | url: baseUrl+'/console/loc/pie/charts', |
| | | headers: {'token': localStorage.getItem('token')}, |
| | | dataType: 'json', |
| | | contentType: 'application/json;charset=UTF-8', |
| | | crossDomain: true, |
| | | method: 'POST', |
| | | success:function(res){ |
| | | success: function(res){ |
| | | var data = res.data; |
| | | var dataPie=eval(data.rows); |
| | | var chart = { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false |
| | | }; |
| | | var title = { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }; |
| | | var tooltip = { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }; |
| | | var plotOptions = { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | var series= [{ |
| | | type: 'pie', |
| | | name: '库位占比', |
| | | data: dataPie |
| | | }]; |
| | | var loading = { |
| | | hideDuration: 3, |
| | | showDuration: 3 |
| | | }; |
| | | var json = {}; |
| | | json.chart = chart; |
| | | json.title = title; |
| | | json.tooltip = tooltip; |
| | | json.series = series; |
| | | json.plotOptions = plotOptions; |
| | | json.loading = loading; |
| | | json.credits = {enabled: false}; |
| | | $('#pie').highcharts(json); |
| | | var dataPie = eval(data.rows); |
| | | |
| | | Highcharts.chart('pie', { |
| | | chart: { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false, |
| | | type: 'pie' |
| | | }, |
| | | title: { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }, |
| | | credits:{ |
| | | enabled:false |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | legend:{ |
| | | align:'right', |
| | | labelFormat:'{name}:{y}' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | }, |
| | | showInLegend: true, |
| | | |
| | | } |
| | | }, |
| | | series: [{ |
| | | name: '库位占比', |
| | | colorByPoint: true, |
| | | data: dataPie |
| | | }] |
| | | }); |
| | | }, |
| | | error:function(){ |
| | | error: function(){ |
| | | // 错误处理 |
| | | } |
| | | }); |
| | | } |
| | |
| | | success:function(res){ |
| | | var data = res.data; |
| | | var dataPie=eval(data.rows); |
| | | var chart = { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false |
| | | }; |
| | | var title = { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }; |
| | | var tooltip = { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }; |
| | | var plotOptions = { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | Highcharts.chart('pie2', { |
| | | chart: { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false, |
| | | type: 'pie' |
| | | }, |
| | | title: { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }, |
| | | credits:{ |
| | | enabled:false |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | legend:{ |
| | | align:'right', |
| | | labelFormat:'{name}:{y}' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | }, |
| | | showInLegend: true |
| | | } |
| | | } |
| | | }; |
| | | var series= [{ |
| | | type: 'pie', |
| | | name: '库位占比', |
| | | data: dataPie |
| | | }]; |
| | | var loading = { |
| | | hideDuration: 3, |
| | | showDuration: 3 |
| | | }; |
| | | var json = {}; |
| | | json.chart = chart; |
| | | json.title = title; |
| | | json.tooltip = tooltip; |
| | | json.series = series; |
| | | json.plotOptions = plotOptions; |
| | | json.loading = loading; |
| | | json.credits = {enabled: false}; |
| | | $('#pie2').highcharts(json); |
| | | }, |
| | | series: [{ |
| | | name: '库位占比', |
| | | colorByPoint: true, |
| | | data: dataPie |
| | | }] |
| | | }); |
| | | |
| | | }, |
| | | error:function(){ |
| | |
| | | success:function(res){ |
| | | var data = res.data; |
| | | var dataPie=eval(data.rows); |
| | | var chart = { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false |
| | | }; |
| | | var title = { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }; |
| | | var tooltip = { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }; |
| | | var plotOptions = { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | Highcharts.chart('pie3', { |
| | | chart: { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false, |
| | | type: 'pie' |
| | | }, |
| | | title: { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }, |
| | | credits:{ |
| | | enabled:false |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | legend:{ |
| | | align:'right', |
| | | labelFormat:'{name}:{y}' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | }, |
| | | showInLegend: true |
| | | } |
| | | } |
| | | }; |
| | | var series= [{ |
| | | type: 'pie', |
| | | name: '库位占比', |
| | | data: dataPie |
| | | }]; |
| | | var loading = { |
| | | hideDuration: 3, |
| | | showDuration: 3 |
| | | }; |
| | | var json = {}; |
| | | json.chart = chart; |
| | | json.title = title; |
| | | json.tooltip = tooltip; |
| | | json.series = series; |
| | | json.plotOptions = plotOptions; |
| | | json.loading = loading; |
| | | json.credits = {enabled: false}; |
| | | $('#pie3').highcharts(json); |
| | | }, |
| | | series: [{ |
| | | name: '库位占比', |
| | | colorByPoint: true, |
| | | data: dataPie |
| | | }] |
| | | }); |
| | | |
| | | }, |
| | | error:function(){ |
| | |
| | | success:function(res){ |
| | | var data = res.data; |
| | | var dataPie=eval(data.rows); |
| | | var chart = { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false |
| | | }; |
| | | var title = { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }; |
| | | var tooltip = { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }; |
| | | var plotOptions = { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | Highcharts.chart('pie4', { |
| | | chart: { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false, |
| | | type: 'pie' |
| | | }, |
| | | title: { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }, |
| | | credits:{ |
| | | enabled:false |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | legend:{ |
| | | align:'right', |
| | | labelFormat:'{name}:{y}' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | }, |
| | | showInLegend: true |
| | | } |
| | | } |
| | | }; |
| | | var series= [{ |
| | | type: 'pie', |
| | | name: '库位占比', |
| | | data: dataPie |
| | | }]; |
| | | var loading = { |
| | | hideDuration: 3, |
| | | showDuration: 3 |
| | | }; |
| | | var json = {}; |
| | | json.chart = chart; |
| | | json.title = title; |
| | | json.tooltip = tooltip; |
| | | json.series = series; |
| | | json.plotOptions = plotOptions; |
| | | json.loading = loading; |
| | | json.credits = {enabled: false}; |
| | | $('#pie4').highcharts(json); |
| | | }, |
| | | series: [{ |
| | | name: '库位占比', |
| | | colorByPoint: true, |
| | | data: dataPie |
| | | }] |
| | | }); |
| | | |
| | | }, |
| | | error:function(){ |
| | |
| | | success:function(res){ |
| | | var data = res.data; |
| | | var dataPie=eval(data.rows); |
| | | var chart = { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false |
| | | }; |
| | | var title = { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }; |
| | | var tooltip = { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }; |
| | | var plotOptions = { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | Highcharts.chart('pie5', { |
| | | chart: { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false, |
| | | type: 'pie' |
| | | }, |
| | | title: { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }, |
| | | credits:{ |
| | | enabled:false |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | legend:{ |
| | | align:'right', |
| | | labelFormat:'{name}:{y}' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | }, |
| | | showInLegend: true |
| | | } |
| | | } |
| | | }; |
| | | var series= [{ |
| | | type: 'pie', |
| | | name: '库位占比', |
| | | data: dataPie |
| | | }]; |
| | | var loading = { |
| | | hideDuration: 3, |
| | | showDuration: 3 |
| | | }; |
| | | var json = {}; |
| | | json.chart = chart; |
| | | json.title = title; |
| | | json.tooltip = tooltip; |
| | | json.series = series; |
| | | json.plotOptions = plotOptions; |
| | | json.loading = loading; |
| | | json.credits = {enabled: false}; |
| | | $('#pie5').highcharts(json); |
| | | }, |
| | | series: [{ |
| | | name: '库位占比', |
| | | colorByPoint: true, |
| | | data: dataPie |
| | | }] |
| | | }); |
| | | |
| | | }, |
| | | error:function(){ |
| | |
| | | success:function(res){ |
| | | var data = res.data; |
| | | var dataPie=eval(data.rows); |
| | | var chart = { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false |
| | | }; |
| | | var title = { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }; |
| | | var tooltip = { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }; |
| | | var plotOptions = { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | Highcharts.chart('pie6', { |
| | | chart: { |
| | | plotBackgroundColor: null, |
| | | plotBorderWidth: null, |
| | | plotShadow: false, |
| | | type: 'pie' |
| | | }, |
| | | title: { |
| | | text: '库位使用比例', |
| | | margin:1, |
| | | style: {fontSize: '18px',color: '#777',fontWeight: 'bold'}, |
| | | y: 5 |
| | | }, |
| | | credits:{ |
| | | enabled:false |
| | | }, |
| | | tooltip: { |
| | | pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' |
| | | }, |
| | | legend:{ |
| | | align:'right', |
| | | labelFormat:'{name}:{y}' |
| | | }, |
| | | plotOptions: { |
| | | pie: { |
| | | allowPointSelect: true, |
| | | cursor: 'pointer', |
| | | dataLabels: { |
| | | enabled: true, |
| | | format: '<b>{point.name}</b>: {point.percentage:.1f} %', |
| | | style: { |
| | | color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' |
| | | } |
| | | }, |
| | | showInLegend: true |
| | | } |
| | | } |
| | | }; |
| | | var series= [{ |
| | | type: 'pie', |
| | | name: '库位占比', |
| | | data: dataPie |
| | | }]; |
| | | var loading = { |
| | | hideDuration: 3, |
| | | showDuration: 3 |
| | | }; |
| | | var json = {}; |
| | | json.chart = chart; |
| | | json.title = title; |
| | | json.tooltip = tooltip; |
| | | json.series = series; |
| | | json.plotOptions = plotOptions; |
| | | json.loading = loading; |
| | | json.credits = {enabled: false}; |
| | | $('#pie6').highcharts(json); |
| | | }, |
| | | series: [{ |
| | | name: '库位占比', |
| | | colorByPoint: true, |
| | | data: dataPie |
| | | }] |
| | | }); |
| | | |
| | | }, |
| | | error:function(){ |