|
@@ -4,23 +4,25 @@
|
|
|
<v-chart autoresize :option="option"/>
|
|
<v-chart autoresize :option="option"/>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="r-coner">
|
|
<div class="r-coner">
|
|
|
- <div class="c-item">100%</div>
|
|
|
|
|
- <div class="c-item">100%</div>
|
|
|
|
|
- <div class="c-item">100%</div>
|
|
|
|
|
- <div class="c-item">100%</div>
|
|
|
|
|
- <div class="c-item">100%</div>
|
|
|
|
|
|
|
+ <div class="c-item">{{ arrMap['单元'].per }}%</div>
|
|
|
|
|
+ <div class="c-item">{{ arrMap['变电所'].per }}%</div>
|
|
|
|
|
+ <div class="c-item">{{ arrMap['配电所'].per }}%</div>
|
|
|
|
|
+ <div class="c-item">{{ arrMap['电源线'].per }}%</div>
|
|
|
|
|
+ <div class="c-item">{{ arrMap['箱变'].per }}%</div>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
import * as echarts from 'echarts'
|
|
import * as echarts from 'echarts'
|
|
|
|
|
+import {chartQbdlsbxjdx} from '@/api/dashboard-json'
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
|
name: 'QbDlsbxjdx',
|
|
name: 'QbDlsbxjdx',
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- option: {}
|
|
|
|
|
|
|
+ option: {},
|
|
|
|
|
+ arrMap: {}
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
created() {
|
|
created() {
|
|
@@ -28,13 +30,34 @@ export default {
|
|
|
},
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
|
methods: {
|
|
|
- getOption() {
|
|
|
|
|
|
|
+ async getOption() {
|
|
|
|
|
+ window['tis'] = this
|
|
|
|
|
+ let keys = []
|
|
|
|
|
+ const maxs = []
|
|
|
|
|
+ const values = []
|
|
|
|
|
+ const res = await chartQbdlsbxjdx()
|
|
|
|
|
+ if (res?.code === 200) {
|
|
|
|
|
+ keys = res?.info.xaxis
|
|
|
|
|
+ res?.info.xaxis.forEach((key, index) => {
|
|
|
|
|
+ maxs.push(res.info.series[0].data[index])
|
|
|
|
|
+ values.push(res.info.series[1].data[index])
|
|
|
|
|
+ const keyMap = {
|
|
|
|
|
+ [res?.info.series[0].name]: res.info.series[0].data[index],
|
|
|
|
|
+ [res?.info.series[1].name]: res.info.series[1].data[index],
|
|
|
|
|
+ per: (res.info.series[1].data[index] * 100 / res.info.series[0].data[index]).toFixed(0)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ this.arrMap[key] = keyMap
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ window['max'] = maxs.reverse()
|
|
|
|
|
+ window['values'] = values.reverse()
|
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
|
shape: {
|
|
shape: {
|
|
|
x: 0,
|
|
x: 0,
|
|
|
y: 0
|
|
y: 0
|
|
|
},
|
|
},
|
|
|
- buildPath: function(ctx, shape) {
|
|
|
|
|
|
|
+ buildPath: (ctx, shape) => {
|
|
|
const yAxisPoint = shape.yAxisPoint
|
|
const yAxisPoint = shape.yAxisPoint
|
|
|
const c0 = [shape.x, shape.y]
|
|
const c0 = [shape.x, shape.y]
|
|
|
const c1 = [shape.x + 9, shape.y - 9]
|
|
const c1 = [shape.x + 9, shape.y - 9]
|
|
@@ -73,8 +96,10 @@ export default {
|
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
- const MAX = [100, 220, 200, 150, 200]
|
|
|
|
|
- const VALUE = [20, 10, 30, 50, 150]
|
|
|
|
|
|
|
+ // const MAX = [100, 220, 200, 150, 200]
|
|
|
|
|
+ const MAX = maxs
|
|
|
|
|
+ // const VALUE = [20, 10, 30, 50, 150]
|
|
|
|
|
+ const VALUE = values
|
|
|
const NAMES = ['箱变', '电源线', '配电所', '变电所', '单元']
|
|
const NAMES = ['箱变', '电源线', '配电所', '变电所', '单元']
|
|
|
this.option = {
|
|
this.option = {
|
|
|
grid: {
|
|
grid: {
|
|
@@ -279,9 +304,10 @@ export default {
|
|
|
|
|
|
|
|
normal: {
|
|
normal: {
|
|
|
show: true,
|
|
show: true,
|
|
|
- position: ['90%', '-100%'],
|
|
|
|
|
|
|
+ position: ['80%', '-100%'],
|
|
|
formatter: (e) => {
|
|
formatter: (e) => {
|
|
|
- return e.value
|
|
|
|
|
|
|
+ const ret = `${values[e.dataIndex]}/${maxs[e.dataIndex]}`
|
|
|
|
|
+ return ret
|
|
|
},
|
|
},
|
|
|
fontSize: this.EchartfontSize(14),
|
|
fontSize: this.EchartfontSize(14),
|
|
|
color: '#fff'
|
|
color: '#fff'
|