|
@@ -0,0 +1,448 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="wrap">
|
|
|
|
|
+ <div class="chart-wrap">
|
|
|
|
|
+ <v-chart autoresize :option="option"/>
|
|
|
|
|
+
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="tip">
|
|
|
|
|
+ <img src="/static/images/syjhTIP.png">
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<script>
|
|
|
|
|
+
|
|
|
|
|
+import {chartDlydts, chartSyjhdxqk} from '@/api/dashboard-json'
|
|
|
|
|
+
|
|
|
|
|
+export default {
|
|
|
|
|
+ name: 'SyjhdxqkChart',
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ option: {},
|
|
|
|
|
+ arrMap: {
|
|
|
|
|
+ '开关分合计划': [],
|
|
|
|
|
+ '单体计划': []
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.getOption()
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ async getOption() {
|
|
|
|
|
+ const res = await chartSyjhdxqk()
|
|
|
|
|
+ if (res?.code === 200) {
|
|
|
|
|
+ const arrMap = {
|
|
|
|
|
+ '开关分合计划': [],
|
|
|
|
|
+ '单体计划': []
|
|
|
|
|
+ }
|
|
|
|
|
+ // const max =
|
|
|
|
|
+ res.info.xaxis.forEach((item, index) => {
|
|
|
|
|
+ const valItem = {
|
|
|
|
|
+ name: item,
|
|
|
|
|
+ value: res.info.series[1].data[index],
|
|
|
|
|
+ used: res.info.series[1].data[index],
|
|
|
|
|
+ total: res.info.series[0].data[index]
|
|
|
|
|
+ }
|
|
|
|
|
+ arrMap['开关分合计划'].push(valItem)
|
|
|
|
|
+ const valItem2 = {
|
|
|
|
|
+ name: item,
|
|
|
|
|
+ value: res.info.series[3].data[index],
|
|
|
|
|
+ used: res.info.series[3].data[index],
|
|
|
|
|
+ total: res.info.series[2].data[index]
|
|
|
|
|
+ }
|
|
|
|
|
+ arrMap['单体计划'].push(valItem2)
|
|
|
|
|
+ })
|
|
|
|
|
+ arrMap['开关分合计划'].forEach(item => {
|
|
|
|
|
+ if (item.used > item.total) {
|
|
|
|
|
+ item.used = item.total
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ arrMap['单体计划'].forEach(item => {
|
|
|
|
|
+ if (item.used > item.total) {
|
|
|
|
|
+ item.used = item.total
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ this.arrMap = arrMap
|
|
|
|
|
+ }
|
|
|
|
|
+ window['is'] = this
|
|
|
|
|
+ const baseWidth = this.EchartfontSize(16)
|
|
|
|
|
+ const offsetWidth = this.EchartfontSize(14)
|
|
|
|
|
+ const triangleHeight = 8
|
|
|
|
|
+ this.option = {
|
|
|
|
|
+ color: [],
|
|
|
|
|
+ grid: {
|
|
|
|
|
+ containLabel: true,
|
|
|
|
|
+ left: 20,
|
|
|
|
|
+ right: 20,
|
|
|
|
|
+ bottom: 10,
|
|
|
|
|
+ top: 40
|
|
|
|
|
+ },
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+
|
|
|
|
|
+ data: ['第一季度', '第二季度', '第三季度', '第四季度'],
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ axisLabel: {
|
|
|
|
|
+ color: '#ffffff',
|
|
|
|
|
+ fontSize: this.EchartfontSize(14),
|
|
|
|
|
+ formatter: (name) => {
|
|
|
|
|
+ return `\n` + name
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ position: 'bottom',
|
|
|
|
|
+ label: {}
|
|
|
|
|
+ // offset: [0]
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {
|
|
|
|
|
+ axisLabel: {
|
|
|
|
|
+ color: '#ffffff',
|
|
|
|
|
+ fontSize: this.EchartfontSize(14)
|
|
|
|
|
+ },
|
|
|
|
|
+ axisTick: {
|
|
|
|
|
+ lineStyle: {
|
|
|
|
|
+ color: '#384267',
|
|
|
|
|
+ width: 0
|
|
|
|
|
+ },
|
|
|
|
|
+ show: true
|
|
|
|
|
+ },
|
|
|
|
|
+ splitLine: {
|
|
|
|
|
+ show: false,
|
|
|
|
|
+ lineStyle: {
|
|
|
|
|
+ color: '#384267',
|
|
|
|
|
+ type: 'dashed'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ axisLine: {
|
|
|
|
|
+ lineStyle: {
|
|
|
|
|
+ color: '#ffffff',
|
|
|
|
|
+ width: 0,
|
|
|
|
|
+ type: 'dashed'
|
|
|
|
|
+ },
|
|
|
|
|
+ show: true
|
|
|
|
|
+ },
|
|
|
|
|
+ name: ''
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [200, 85, 112, 275],
|
|
|
|
|
+ data: this.arrMap['开关分合计划'].map(item => item.used),
|
|
|
|
|
+
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+ symbol: 'rect',
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: ['100%', '100%'],
|
|
|
|
|
+ symbolOffset: [-offsetWidth, 0],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: {
|
|
|
|
|
+ x: 0,
|
|
|
|
|
+ y: 0,
|
|
|
|
|
+ x2: 0,
|
|
|
|
|
+ y2: 1,
|
|
|
|
|
+ type: 'linear',
|
|
|
|
|
+ global: false,
|
|
|
|
|
+ colorStops: [
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 0,
|
|
|
|
|
+ color: 'rgb(106, 169, 216)'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 1,
|
|
|
|
|
+ color: 'rgb(54, 125, 181)'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ zlevel: 1
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [1, 1, 1, 1],
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+ symbol: 'triangle',
|
|
|
|
|
+ symbolRotate: 180,
|
|
|
|
|
+ symbolOffset: [-offsetWidth, '96%'],
|
|
|
|
|
+ symbolSize: ['100%', triangleHeight],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgb(54, 125, 181)'
|
|
|
|
|
+ },
|
|
|
|
|
+ zlevel: 1
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [200, 85, 112, 275],
|
|
|
|
|
+ data: this.arrMap['开关分合计划'].map(item => item.used),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+ symbolPosition: 'end',
|
|
|
|
|
+ symbol: 'triangle',
|
|
|
|
|
+ symbolRotate: 180,
|
|
|
|
|
+ symbolSize: [baseWidth, triangleHeight],
|
|
|
|
|
+ symbolOffset: [-offsetWidth, '-0%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgb(159, 214, 253)'
|
|
|
|
|
+ },
|
|
|
|
|
+ zlevel: 2
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [600, 541, 741, 741],
|
|
|
|
|
+ data: this.arrMap['开关分合计划'].map(item => item.total),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+ symbol: 'rect',
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, '100%'],
|
|
|
|
|
+ symbolOffset: [-offsetWidth, 0],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: {
|
|
|
|
|
+ x: 0,
|
|
|
|
|
+ y: 0,
|
|
|
|
|
+ x2: 0,
|
|
|
|
|
+ y2: 1,
|
|
|
|
|
+ type: 'linear',
|
|
|
|
|
+ global: false,
|
|
|
|
|
+ colorStops: [
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 0,
|
|
|
|
|
+ color: 'rgb(35, 55, 81)'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 1,
|
|
|
|
|
+ color: 'rgb(30, 52, 75)'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ label: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ distance: 10,
|
|
|
|
|
+ color: '#fff',
|
|
|
|
|
+ fontSize: this.EchartfontSize(12),
|
|
|
|
|
+ position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(36)],
|
|
|
|
|
+ formatter: (evt) => {
|
|
|
|
|
+ const item = this.arrMap['开关分合计划']?.[evt.dataIndex] || {}
|
|
|
|
|
+ return `${item.value}\n /\n${item.total}`
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ zlevel: -1
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [600, 541, 741, 741],
|
|
|
|
|
+ data: this.arrMap['开关分合计划'].map(item => item.total),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+
|
|
|
|
|
+ symbolPosition: 'end',
|
|
|
|
|
+ symbol: 'triangle',
|
|
|
|
|
+ symbolRotate: 180,
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, triangleHeight],
|
|
|
|
|
+ symbolOffset: [-offsetWidth, '0%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgb(49, 70, 97)'
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ zlevel: 1
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ // 2
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [160, 410, 112, 275],
|
|
|
|
|
+ data: this.arrMap['单体计划'].map(item => item.used),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+ symbol: 'rect',
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, '100%'],
|
|
|
|
|
+ symbolOffset: [offsetWidth, '0%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: {
|
|
|
|
|
+ x: 0,
|
|
|
|
|
+ y: 0,
|
|
|
|
|
+ x2: 0,
|
|
|
|
|
+ y2: 1,
|
|
|
|
|
+ type: 'linear',
|
|
|
|
|
+ global: false,
|
|
|
|
|
+ colorStops: [
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 0,
|
|
|
|
|
+ color: 'rgb(107, 204, 220)'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 1,
|
|
|
|
|
+ color: 'rgb(57, 154, 178)'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ zlevel: 1
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ data: [1, 1, 1, 1],
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+
|
|
|
|
|
+ symbol: 'triangle',
|
|
|
|
|
+ symbolRotate: 180,
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, triangleHeight],
|
|
|
|
|
+ symbolOffset: [offsetWidth, '96%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgb(57, 154, 178)'
|
|
|
|
|
+ },
|
|
|
|
|
+ zlevel: 1
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [160, 410, 112, 275],
|
|
|
|
|
+ data: this.arrMap['单体计划'].map(item => item.used),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+
|
|
|
|
|
+ symbolPosition: 'end',
|
|
|
|
|
+ symbol: 'triangle',
|
|
|
|
|
+ symbolRotate: 180,
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, triangleHeight],
|
|
|
|
|
+ symbolOffset: [offsetWidth, '0%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgb(159, 214, 253)'
|
|
|
|
|
+ },
|
|
|
|
|
+ zlevel: 2
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [580, 541, 741, 420],
|
|
|
|
|
+ data: this.arrMap['单体计划'].map(item => item.total),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+ symbol: 'rect',
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, '100%'],
|
|
|
|
|
+ symbolOffset: [offsetWidth, '0%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: {
|
|
|
|
|
+ x: 0,
|
|
|
|
|
+ y: 0,
|
|
|
|
|
+ x2: 0,
|
|
|
|
|
+ y2: 1,
|
|
|
|
|
+ type: 'linear',
|
|
|
|
|
+ global: false,
|
|
|
|
|
+ colorStops: [
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 0,
|
|
|
|
|
+ color: 'rgb(33, 59, 72)'
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ offset: 1,
|
|
|
|
|
+ color: 'rgb(30, 64, 78)'
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ label: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ distance: 10,
|
|
|
|
|
+ color: '#fff',
|
|
|
|
|
+ fontSize: this.EchartfontSize(12),
|
|
|
|
|
+ position: [baseWidth - offsetWidth / this.EchartfontSize(2), -this.EchartfontSize(36)],
|
|
|
|
|
+ formatter: (evt) => {
|
|
|
|
|
+ const item = this.arrMap['单体计划']?.[evt.dataIndex] || {}
|
|
|
|
|
+ return `${item.value}\n /\n${item.total}`
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ zlevel: -1
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ // data: [580, 541, 741, 420],
|
|
|
|
|
+ data: this.arrMap['单体计划'].map(item => item.total),
|
|
|
|
|
+ type: 'pictorialBar',
|
|
|
|
|
+
|
|
|
|
|
+ symbolPosition: 'end',
|
|
|
|
|
+ symbol: 'triangle',
|
|
|
|
|
+ symbolRotate: 180,
|
|
|
|
|
+
|
|
|
|
|
+ symbolSize: [baseWidth, triangleHeight],
|
|
|
|
|
+ symbolOffset: [offsetWidth, '0%'],
|
|
|
|
|
+ barMaxWidth: 'auto',
|
|
|
|
|
+ barWidth: baseWidth,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ color: 'rgb(49, 70, 97)'
|
|
|
|
|
+
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+ zlevel: 1
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+ tooltip: {
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
|
+ show: false
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
|
|
+
|
|
|
|
|
+$xHeight: 120px;
|
|
|
|
|
+.wrap {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+
|
|
|
|
|
+ .tip {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ right: 1.5vw;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+
|
|
|
|
|
+ img {
|
|
|
|
|
+ height: 20px;
|
|
|
|
|
+ width: auto;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.chart-wrap {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+
|
|
|
|
|
+ .left-bar {
|
|
|
|
|
+ width: 35px;
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .right-conent {
|
|
|
|
|
+ width: calc(100% - 35px);
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ display: grid;
|
|
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
|
|
+ grid-template-rows: auto $xHeight;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|