| | |
| | | }, |
| | | }, |
| | | grid: { |
| | | top: '5%', |
| | | left: '7%', |
| | | top: '25px', |
| | | left: '40px', |
| | | right: '3%', |
| | | bottom: '7%', |
| | | bottom: '40px', |
| | | // containLabel: true |
| | | }, |
| | | legend: { |
| | | show: true, |
| | | orient: 'horizontal', |
| | | y:-5, |
| | | y:-2, |
| | | right:15, |
| | | itemWidth: 12, |
| | | itemHeight: 12, |
| | |
| | | |
| | | }], |
| | | yAxis: [{ |
| | | minInterval:1, |
| | | type: 'value', |
| | | min: 0, |
| | | splitNumber: 4, |
| | |
| | | }, |
| | | axisLabel: { |
| | | color: 'rgba(43,48,52, 0.4)', |
| | | margin: 30 |
| | | margin: 20, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | |
| | | }, |
| | | }, |
| | | grid: { |
| | | top: '5%', |
| | | left: '7%', |
| | | right: '2%', |
| | | bottom: '7%', |
| | | top: '25px', |
| | | left: '40px', |
| | | right: '3%', |
| | | bottom: '40px', |
| | | // containLabel: true |
| | | }, |
| | | xAxis: [{ |
| | |
| | | |
| | | }], |
| | | yAxis: [{ |
| | | minInterval:1, |
| | | type: 'value', |
| | | min: 0, |
| | | splitNumber: 4, |
| | |
| | | }, |
| | | axisLabel: { |
| | | color: 'rgba(43,48,52, 0.4)', |
| | | margin: 30 |
| | | margin: 20, |
| | | }, |
| | | axisTick: { |
| | | show: false, |
| | |
| | | backgroundColor: '#fff', |
| | | tooltip: { |
| | | trigger: 'item', |
| | | formatter: '{a} <br/>{b} : {c} ({d}%)' |
| | | formatter: '{a} <br/>{b} : {c}' |
| | | }, |
| | | title: { |
| | | text: params.percentage, |
| | |
| | | ] |
| | | }; |
| | | chart.setOption(option); |
| | | }, |
| | | drawGauge:function(chart,params){ |
| | | let option = { |
| | | tooltip: { |
| | | formatter: "{a} <br/>{b} : {c}%" |
| | | }, |
| | | toolbox: { |
| | | feature: { |
| | | restore: {}, |
| | | saveAsImage: {} |
| | | } |
| | | }, |
| | | series: [ |
| | | { |
| | | type: 'gauge', |
| | | axisLine: { |
| | | lineStyle: { |
| | | width: 28, |
| | | color: [ |
| | | [0.3, '#67e0e3'], |
| | | [0.7, '#37a2da'], |
| | | [1, '#fd666d'] |
| | | ] |
| | | } |
| | | }, |
| | | pointer: { |
| | | itemStyle: { |
| | | color: 'auto' |
| | | } |
| | | }, |
| | | axisTick: { |
| | | distance: -28, |
| | | length: 8, |
| | | lineStyle: { |
| | | color: '#fff', |
| | | width: 2 |
| | | } |
| | | }, |
| | | splitLine: { |
| | | distance: -28, |
| | | length: 28, |
| | | lineStyle: { |
| | | color: '#fff', |
| | | width: 4 |
| | | } |
| | | }, |
| | | axisLabel: { |
| | | color: 'inherit', |
| | | distance: 40, |
| | | fontSize: 14 |
| | | }, |
| | | detail: { |
| | | valueAnimation: true, |
| | | formatter: '{value} %', |
| | | color: 'inherit', |
| | | textStyle: { |
| | | fontSize: 30, |
| | | align: 'center', |
| | | }, |
| | | }, |
| | | data: [ |
| | | { |
| | | value: 70 |
| | | } |
| | | ] |
| | | } |
| | | ] |
| | | }; |
| | | chart.setOption(option,true); |
| | | } |
| | | } |
| | | |