|
@@ -45,13 +45,14 @@
|
|
|
<div id="data-chart" style="width: 100%;height:200px;"></div>
|
|
|
</div>
|
|
|
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <vBottomMenu></vBottomMenu>
|
|
|
- <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
|
|
|
- <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img src="@/assets/images/mascot.png"/>
|
|
|
- </div>
|
|
|
- </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <vBottomMenu></vBottomMenu>
|
|
|
+ <el-tooltip :content="indentText" placement="top" :disabled="indentdisabled">
|
|
|
+ <div class="mascot" ref="mascot" :class="indentStyle" @click="indent"><img
|
|
|
+ src="@/assets/images/mascot.png" />
|
|
|
+ </div>
|
|
|
+ </el-tooltip>
|
|
|
|
|
|
</div>
|
|
|
</div>
|
|
@@ -121,108 +122,108 @@
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
|
|
|
- },
|
|
|
- grid: {
|
|
|
- top: '5%',
|
|
|
- left: '2%',
|
|
|
- // right: "4%",
|
|
|
- bottom: '-15%',
|
|
|
- width: '75%',
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- show: false,
|
|
|
- type: 'value'
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: 'category', // 不设置类目轴,抽离的dataset数据展示不出来
|
|
|
- inverse: true,
|
|
|
- axisLabel: {
|
|
|
- show: true,
|
|
|
- textStyle: {
|
|
|
- color: '#5deaff',
|
|
|
- fontSize: '12'
|
|
|
- }
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false
|
|
|
- }
|
|
|
- },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ top: '5%',
|
|
|
+ left: '2%',
|
|
|
+ // right: "4%",
|
|
|
+ bottom: '-15%',
|
|
|
+ width: '75%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ show: false,
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'category', // 不设置类目轴,抽离的dataset数据展示不出来
|
|
|
+ inverse: true,
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ textStyle: {
|
|
|
+ color: '#5deaff',
|
|
|
+ fontSize: '12'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- series: [{
|
|
|
+ series: [{
|
|
|
|
|
|
- type: 'bar',
|
|
|
- animationCurve: 'easeOutBack',
|
|
|
- barWidth: 5,
|
|
|
- label: {
|
|
|
- show: true,
|
|
|
- position: 'right',
|
|
|
- offset: [0, 0],
|
|
|
- color: '#88dfd5',
|
|
|
- // fontSize: "12",
|
|
|
- style: {
|
|
|
- fill: '#fff'
|
|
|
- }
|
|
|
- },
|
|
|
- backgroundBar: {
|
|
|
- show: true,
|
|
|
- style: {
|
|
|
- fill: 'rgba(97,152,255,0.20)'
|
|
|
- }
|
|
|
- },
|
|
|
- barStyle: {
|
|
|
- stroke: 'rgba(41,244,236,1)'
|
|
|
- },
|
|
|
- gradient: {
|
|
|
- color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- label: {
|
|
|
- show: true
|
|
|
- },
|
|
|
- labelLine: {
|
|
|
- show: false
|
|
|
- },
|
|
|
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
- offset: 0,
|
|
|
- color: 'rgba(41,244,236,0)'
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: 'rgba(41,244,236,.5)'
|
|
|
- }
|
|
|
- ]),
|
|
|
- borderColor: '#a2f9f7',
|
|
|
- shadowBlur: 16,
|
|
|
- shadowColor: '#a2f9f7'
|
|
|
- }
|
|
|
- }]
|
|
|
- })
|
|
|
+ type: 'bar',
|
|
|
+ animationCurve: 'easeOutBack',
|
|
|
+ barWidth: 5,
|
|
|
+ label: {
|
|
|
+ show: true,
|
|
|
+ position: 'right',
|
|
|
+ offset: [0, 0],
|
|
|
+ color: '#88dfd5',
|
|
|
+ // fontSize: "12",
|
|
|
+ style: {
|
|
|
+ fill: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ backgroundBar: {
|
|
|
+ show: true,
|
|
|
+ style: {
|
|
|
+ fill: 'rgba(97,152,255,0.20)'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ barStyle: {
|
|
|
+ stroke: 'rgba(41,244,236,1)'
|
|
|
+ },
|
|
|
+ gradient: {
|
|
|
+ color: ['rgba(41,244,236,1)', 'rgba(41,244,236,0)']
|
|
|
+ },
|
|
|
+ itemStyle: {
|
|
|
+ label: {
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
|
|
+ offset: 0,
|
|
|
+ color: 'rgba(41,244,236,0)'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: 'rgba(41,244,236,.5)'
|
|
|
+ }
|
|
|
+ ]),
|
|
|
+ borderColor: '#a2f9f7',
|
|
|
+ shadowBlur: 16,
|
|
|
+ shadowColor: '#a2f9f7'
|
|
|
+ }
|
|
|
+ }]
|
|
|
+ })
|
|
|
|
|
|
- },
|
|
|
+ },
|
|
|
|
|
|
- //吉祥物收起左右框
|
|
|
- indent() {
|
|
|
- let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
- list[list.length - 1].style.display = 'none'
|
|
|
- if (this.indentStyle == '') {
|
|
|
- this.indentStyle = 'indent-style'
|
|
|
- this.indentleft = 'indent-left'
|
|
|
- this.indentright = 'indent-right'
|
|
|
- this.indentText = '展开左右栏'
|
|
|
- } else if (this.indentText == '展开左右栏') {
|
|
|
- this.indentStyle = ''
|
|
|
- this.indentleft = ''
|
|
|
- this.indentright = ''
|
|
|
- this.indentText = '收起左右栏'
|
|
|
- }
|
|
|
- },
|
|
|
+ //吉祥物收起左右框
|
|
|
+ indent() {
|
|
|
+ let list = document.getElementsByClassName('el-tooltip__popper')
|
|
|
+ list[list.length - 1].style.display = 'none'
|
|
|
+ if (this.indentStyle == '') {
|
|
|
+ this.indentStyle = 'indent-style'
|
|
|
+ this.indentleft = 'indent-left'
|
|
|
+ this.indentright = 'indent-right'
|
|
|
+ this.indentText = '展开左右栏'
|
|
|
+ } else if (this.indentText == '展开左右栏') {
|
|
|
+ this.indentStyle = ''
|
|
|
+ this.indentleft = ''
|
|
|
+ this.indentright = ''
|
|
|
+ this.indentText = '收起左右栏'
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
getResource() {
|
|
|
let that = this
|
|
@@ -901,5 +902,5 @@
|
|
|
</script>
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
- @import '@/assets/styles/base.scss';
|
|
|
+ @import '@/assets/styles/base.scss';
|
|
|
</style>
|