|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
<template>
|
|
|
<div class="chart-wrap">
|
|
<div class="chart-wrap">
|
|
|
- <v-chart autoresize :option="option"/>
|
|
|
|
|
|
|
+ <v-chart autoresize :option="option" />
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
@@ -48,32 +48,40 @@ export default {
|
|
|
bottom: 10,
|
|
bottom: 10,
|
|
|
top: 40
|
|
top: 40
|
|
|
},
|
|
},
|
|
|
- xAxis: {
|
|
|
|
|
- axisLabel: {
|
|
|
|
|
- color: '#c0c3cd',
|
|
|
|
|
- fontSize: 14,
|
|
|
|
|
- interval: 0
|
|
|
|
|
- },
|
|
|
|
|
- axisTick: {
|
|
|
|
|
- lineStyle: {
|
|
|
|
|
- color: '#384267'
|
|
|
|
|
|
|
+ xAxis: [
|
|
|
|
|
+ {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ axisTick: {
|
|
|
|
|
+ show: false
|
|
|
},
|
|
},
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- splitLine: {
|
|
|
|
|
- show: false
|
|
|
|
|
- },
|
|
|
|
|
- axisLine: {
|
|
|
|
|
- lineStyle: {
|
|
|
|
|
- color: '#384267',
|
|
|
|
|
- width: 1,
|
|
|
|
|
- type: 'dashed'
|
|
|
|
|
|
|
+ axisLine: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ lineStyle: {
|
|
|
|
|
+ color: '#fff'
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
- show: true
|
|
|
|
|
- },
|
|
|
|
|
- data: ['第一季度', '第二季度', '第三季度', '第四季度'],
|
|
|
|
|
- type: 'category'
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ data: ['第一季度', '第二季度', '第三季度', '第四季度']
|
|
|
|
|
+ }, {
|
|
|
|
|
+ type: 'category',
|
|
|
|
|
+ axisLine: {
|
|
|
|
|
+ show: false
|
|
|
|
|
+ },
|
|
|
|
|
+ axisTick: {
|
|
|
|
|
+ show: false
|
|
|
|
|
+ },
|
|
|
|
|
+ axisLabel: {
|
|
|
|
|
+ show: false
|
|
|
|
|
+ },
|
|
|
|
|
+ splitArea: {
|
|
|
|
|
+ show: false
|
|
|
|
|
+ },
|
|
|
|
|
+ splitLine: {
|
|
|
|
|
+ show: false
|
|
|
|
|
+ },
|
|
|
|
|
+ data: ['第一季度', '第二季度', '第三季度', '第四季度']
|
|
|
|
|
+ }
|
|
|
|
|
+ ],
|
|
|
|
|
+
|
|
|
yAxis: {
|
|
yAxis: {
|
|
|
axisLabel: {
|
|
axisLabel: {
|
|
|
color: '#c0c3cd',
|
|
color: '#c0c3cd',
|
|
@@ -105,86 +113,86 @@ export default {
|
|
|
},
|
|
},
|
|
|
series: [
|
|
series: [
|
|
|
{
|
|
{
|
|
|
- data: [200, 85, 112, 275,],
|
|
|
|
|
|
|
+ name: '开关分合',
|
|
|
type: 'bar',
|
|
type: 'bar',
|
|
|
- barMaxWidth: 'auto',
|
|
|
|
|
- barWidth: 30,
|
|
|
|
|
|
|
+ xAxisIndex: 1,
|
|
|
|
|
+
|
|
|
itemStyle: {
|
|
itemStyle: {
|
|
|
- color: {
|
|
|
|
|
- x: 0,
|
|
|
|
|
- y: 0,
|
|
|
|
|
- x2: 0,
|
|
|
|
|
- y2: 1,
|
|
|
|
|
- type: 'linear',
|
|
|
|
|
- global: false,
|
|
|
|
|
- colorStops: [
|
|
|
|
|
- {
|
|
|
|
|
- offset: 0,
|
|
|
|
|
- color: '#0b9eff'
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- offset: 1,
|
|
|
|
|
- color: '#63caff'
|
|
|
|
|
- }
|
|
|
|
|
- ]
|
|
|
|
|
|
|
+ normal: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ color: '#277ace',
|
|
|
|
|
+ barBorderRadius: 50,
|
|
|
|
|
+ borderWidth: 0,
|
|
|
|
|
+ borderColor: '#333'
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
- label: {
|
|
|
|
|
- show: true,
|
|
|
|
|
- position: 'top',
|
|
|
|
|
- distance: 10,
|
|
|
|
|
- color: '#fff'
|
|
|
|
|
- }
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
|
|
- type: 'pictorialBar',
|
|
|
|
|
- barMaxWidth: '20',
|
|
|
|
|
- symbol: 'diamond',
|
|
|
|
|
- symbolOffset: [0, '50%'],
|
|
|
|
|
- symbolSize: [30, 15]
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- data: [200, 85, 112, 275],
|
|
|
|
|
- type: 'pictorialBar',
|
|
|
|
|
- barMaxWidth: '20',
|
|
|
|
|
- symbolPosition: 'end',
|
|
|
|
|
- symbol: 'diamond',
|
|
|
|
|
- symbolOffset: [0, '-50%'],
|
|
|
|
|
- symbolSize: [30, 12],
|
|
|
|
|
- zlevel: 2
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- data: [741, 741, 741, 741],
|
|
|
|
|
|
|
+ barWidth: '20%',
|
|
|
|
|
+ data: [100, 100, 100, 100]
|
|
|
|
|
+ }, {
|
|
|
|
|
+ name: '单体',
|
|
|
type: 'bar',
|
|
type: 'bar',
|
|
|
- barMaxWidth: 'auto',
|
|
|
|
|
- barWidth: 30,
|
|
|
|
|
- barGap: '-100%',
|
|
|
|
|
- zlevel: -1
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- data: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
|
|
|
- type: 'pictorialBar',
|
|
|
|
|
- barMaxWidth: '20',
|
|
|
|
|
- symbol: 'diamond',
|
|
|
|
|
- symbolOffset: [0, '50%'],
|
|
|
|
|
- symbolSize: [30, 15],
|
|
|
|
|
- zlevel: -2
|
|
|
|
|
|
|
+ xAxisIndex: 1,
|
|
|
|
|
+
|
|
|
|
|
+ itemStyle: {
|
|
|
|
|
+ normal: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ color: '#277ace',
|
|
|
|
|
+ barBorderRadius: 50,
|
|
|
|
|
+ borderWidth: 0,
|
|
|
|
|
+ borderColor: '#333'
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ barWidth: '20%',
|
|
|
|
|
+ barGap: '100%',
|
|
|
|
|
+ data: [150, 150, 150, 150]
|
|
|
},
|
|
},
|
|
|
- {
|
|
|
|
|
- data: [741, 741, 741, 741],
|
|
|
|
|
- type: 'pictorialBar',
|
|
|
|
|
- barMaxWidth: '20',
|
|
|
|
|
- symbolPosition: 'end',
|
|
|
|
|
- symbol: 'diamond',
|
|
|
|
|
- symbolOffset: [0, '-50%'],
|
|
|
|
|
- symbolSize: [30, 12],
|
|
|
|
|
- zlevel: -1
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ // {
|
|
|
|
|
+ // name: '开关分合(完成)',
|
|
|
|
|
+ // type: 'bar',
|
|
|
|
|
+ // barMaxWidth: 'auto',
|
|
|
|
|
+ // barWidth: 30,
|
|
|
|
|
+ // itemStyle: {
|
|
|
|
|
+ // color: {
|
|
|
|
|
+ // x: 0,
|
|
|
|
|
+ // y: 0,
|
|
|
|
|
+ // x2: 0,
|
|
|
|
|
+ // y2: 1,
|
|
|
|
|
+ // type: 'linear',
|
|
|
|
|
+ // global: false,
|
|
|
|
|
+ // colorStops: [
|
|
|
|
|
+ // {
|
|
|
|
|
+ // offset: 0,
|
|
|
|
|
+ // color: '#0b9eff'
|
|
|
|
|
+ // },
|
|
|
|
|
+ // {
|
|
|
|
|
+ // offset: 1,
|
|
|
|
|
+ // color: '#63caff'
|
|
|
|
|
+ // }
|
|
|
|
|
+ // ]
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
|
|
+ // label: {
|
|
|
|
|
+ // show: true,
|
|
|
|
|
+ // position: 'top',
|
|
|
|
|
+ // distance: 10,
|
|
|
|
|
+ // color: '#fff'
|
|
|
|
|
+ // }
|
|
|
|
|
+ // },
|
|
|
|
|
+ // {
|
|
|
|
|
+ // name: '单体(完成)',
|
|
|
|
|
+ // data: [200, 85, 112, 275],
|
|
|
|
|
+ // type: 'pictorialBar',
|
|
|
|
|
+ // barMaxWidth: '20',
|
|
|
|
|
+ // symbolPosition: 'end',
|
|
|
|
|
+ // symbol: 'diamond',
|
|
|
|
|
+ // symbolOffset: [0, '-50%'],
|
|
|
|
|
+ // symbolSize: [30, 12],
|
|
|
|
|
+ // zlevel: 2
|
|
|
|
|
+ // }
|
|
|
],
|
|
],
|
|
|
tooltip: {
|
|
tooltip: {
|
|
|
trigger: 'axis',
|
|
trigger: 'axis',
|
|
|
- show: false
|
|
|
|
|
|
|
+ show: true
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|