|
|
@@ -0,0 +1,473 @@
|
|
|
+<template>
|
|
|
+ <div class="chart-wrap">
|
|
|
+ <v-chart autoresize :option="option"/>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'SyjhdxqkChart',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ option: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getOption()
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+ getOption() {
|
|
|
+ this.option = {
|
|
|
+ backgroundColor: '#03124500',
|
|
|
+ color: [
|
|
|
+ '#63caff',
|
|
|
+ '#49beff',
|
|
|
+ '#03387a',
|
|
|
+ '#03387a',
|
|
|
+ '#03387a',
|
|
|
+ '#6c93ee',
|
|
|
+ '#a9abff',
|
|
|
+ '#f7a23f',
|
|
|
+ '#27bae7',
|
|
|
+ '#ff6d9d',
|
|
|
+ '#cb79ff',
|
|
|
+ '#f95b5a',
|
|
|
+ '#ccaf27',
|
|
|
+ '#38b99c',
|
|
|
+ '#93d0ff',
|
|
|
+ '#bd74e0',
|
|
|
+ '#fd77da',
|
|
|
+ '#dea700'
|
|
|
+ ],
|
|
|
+ grid: {
|
|
|
+ containLabel: true,
|
|
|
+ left: 20,
|
|
|
+ right: 20,
|
|
|
+ bottom: 10,
|
|
|
+ top: 40
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ color: '#c0c3cd',
|
|
|
+ fontSize: 14,
|
|
|
+ interval: 0
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#384267'
|
|
|
+ },
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#384267',
|
|
|
+ width: 1,
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ data: ['第一季度', '第二季度', '第三季度', '第四季度'],
|
|
|
+ type: 'category'
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ axisLabel: {
|
|
|
+ color: '#c0c3cd',
|
|
|
+ fontSize: 14
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#384267',
|
|
|
+ width: 1
|
|
|
+ },
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: '#384267',
|
|
|
+ type: 'dashed'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: '#384267',
|
|
|
+ width: 1,
|
|
|
+ type: 'dashed'
|
|
|
+ },
|
|
|
+ show: true
|
|
|
+ },
|
|
|
+ name: ''
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: [200, 85, 112, 275,],
|
|
|
+ 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'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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],
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ {
|
|
|
+ data: [741, 741, 741, 741],
|
|
|
+ type: 'pictorialBar',
|
|
|
+ barMaxWidth: '20',
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbol: 'diamond',
|
|
|
+ symbolOffset: [0, '-50%'],
|
|
|
+ symbolSize: [30, 12],
|
|
|
+ zlevel: -1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ show: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // const CubeLeft = echarts.graphic.extendShape({
|
|
|
+ // shape: {
|
|
|
+ // x: 0,
|
|
|
+ // y: 0
|
|
|
+ // },
|
|
|
+ // buildPath: (ctx, shape) => {
|
|
|
+ // const xAxisPoint = shape.xAxisPoint
|
|
|
+ // const c0 = [shape.x, shape.y]
|
|
|
+ // const c1 = [shape.x - 9, shape.y - 9]
|
|
|
+ // const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
|
|
|
+ // const c3 = [xAxisPoint[0], xAxisPoint[1]]
|
|
|
+ // ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // const CubeRight = echarts.graphic.extendShape({
|
|
|
+ // shape: {
|
|
|
+ // x: 0,
|
|
|
+ // y: 0
|
|
|
+ // },
|
|
|
+ // buildPath: (ctx, shape) => {
|
|
|
+ // const xAxisPoint = shape.xAxisPoint
|
|
|
+ // const c1 = [shape.x, shape.y]
|
|
|
+ // const c2 = [xAxisPoint[0], xAxisPoint[1]]
|
|
|
+ // const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
|
|
|
+ // const c4 = [shape.x + 18, shape.y - 9]
|
|
|
+ // ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // const CubeTop = echarts.graphic.extendShape({
|
|
|
+ // shape: {
|
|
|
+ // x: 0,
|
|
|
+ // y: 0
|
|
|
+ // },
|
|
|
+ // buildPath: (ctx, shape) => {
|
|
|
+ // const c1 = [shape.x, shape.y]
|
|
|
+ // const c2 = [shape.x + 18, shape.y - 9]
|
|
|
+ // const c3 = [shape.x + 9, shape.y - 18]
|
|
|
+ // const c4 = [shape.x - 9, shape.y - 9]
|
|
|
+ // ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
+ // echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
+ // echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
+ // const MAX = [100, 200, 300, 400]
|
|
|
+ // const VALUE = [2012, 1230, 3790, 2349]
|
|
|
+ // this.option = {
|
|
|
+ // backgroundColor: '#012366',
|
|
|
+ // title: {
|
|
|
+ // text: '',
|
|
|
+ // top: 32,
|
|
|
+ // left: 18,
|
|
|
+ // textStyle: {
|
|
|
+ // color: '#00F6FF',
|
|
|
+ // fontSize: 24
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // grid: {
|
|
|
+ // left: 10,
|
|
|
+ // right: 40,
|
|
|
+ // bottom: '5%',
|
|
|
+ // top: 20,
|
|
|
+ // containLabel: true
|
|
|
+ // },
|
|
|
+ // xAxis: {
|
|
|
+ // type: 'category',
|
|
|
+ // data: ['第一季度', '第二季度', '第三季度', '第四季度'],
|
|
|
+ // axisLine: {
|
|
|
+ // show: true,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: 'white'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // offset: 0,
|
|
|
+ // axisTick: {
|
|
|
+ // show: false,
|
|
|
+ // length: 9,
|
|
|
+ // alignWithLabel: true,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#7DFFFD'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // fontSize: 12
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // yAxis: {
|
|
|
+ // type: 'value',
|
|
|
+ // axisLine: {
|
|
|
+ // show: true,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: 'white'
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // splitLine: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // axisTick: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // axisLabel: {
|
|
|
+ // fontSize: 16
|
|
|
+ // },
|
|
|
+ // boundaryGap: ['20%', '20%']
|
|
|
+ // },
|
|
|
+ // series: [{
|
|
|
+ // type: 'custom',
|
|
|
+ // renderItem: (params, api) => {
|
|
|
+ // const location = api.coord([api.value(0), api.value(1)])
|
|
|
+ // return {
|
|
|
+ // type: 'group',
|
|
|
+ // children: [{
|
|
|
+ // type: 'CubeLeft',
|
|
|
+ // shape: {
|
|
|
+ // api,
|
|
|
+ // xValue: api.value(0),
|
|
|
+ // yValue: api.value(1),
|
|
|
+ // x: location[0],
|
|
|
+ // y: location[1],
|
|
|
+ // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ // },
|
|
|
+ // style: {
|
|
|
+ // fill: 'rgba(47,102,192,.27)'
|
|
|
+ // }
|
|
|
+ // }, {
|
|
|
+ // type: 'CubeRight',
|
|
|
+ // shape: {
|
|
|
+ // api,
|
|
|
+ // xValue: api.value(0),
|
|
|
+ // yValue: api.value(1),
|
|
|
+ // x: location[0],
|
|
|
+ // y: location[1],
|
|
|
+ // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ // },
|
|
|
+ // style: {
|
|
|
+ // fill: 'rgba(59,128,226,.27)'
|
|
|
+ // }
|
|
|
+ // }, {
|
|
|
+ // type: 'CubeTop',
|
|
|
+ // shape: {
|
|
|
+ // api,
|
|
|
+ // xValue: api.value(0),
|
|
|
+ // yValue: api.value(1),
|
|
|
+ // x: location[0],
|
|
|
+ // y: location[1],
|
|
|
+ // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ // },
|
|
|
+ // style: {
|
|
|
+ // fill: 'rgba(72,156,221,.27)'
|
|
|
+ // }
|
|
|
+ // }]
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: MAX
|
|
|
+ // }, {
|
|
|
+ // type: 'custom',
|
|
|
+ // renderItem: (params, api) => {
|
|
|
+ // const location = api.coord([api.value(0), api.value(1)])
|
|
|
+ // return {
|
|
|
+ // type: 'group',
|
|
|
+ // children: [{
|
|
|
+ // type: 'CubeLeft',
|
|
|
+ // shape: {
|
|
|
+ // api,
|
|
|
+ // xValue: api.value(0),
|
|
|
+ // yValue: api.value(1),
|
|
|
+ // x: location[0],
|
|
|
+ // y: location[1],
|
|
|
+ // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ // },
|
|
|
+ // style: {
|
|
|
+ // fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: '#3B80E2'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: '#49BEE5'
|
|
|
+ // }
|
|
|
+ // ])
|
|
|
+ // }
|
|
|
+ // }, {
|
|
|
+ // type: 'CubeRight',
|
|
|
+ // shape: {
|
|
|
+ // api,
|
|
|
+ // xValue: api.value(0),
|
|
|
+ // yValue: api.value(1),
|
|
|
+ // x: location[0],
|
|
|
+ // y: location[1],
|
|
|
+ // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ // },
|
|
|
+ // style: {
|
|
|
+ // fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: '#3B80E2'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: '#49BEE5'
|
|
|
+ // }
|
|
|
+ // ])
|
|
|
+ // }
|
|
|
+ // }, {
|
|
|
+ // type: 'CubeTop',
|
|
|
+ // shape: {
|
|
|
+ // api,
|
|
|
+ // xValue: api.value(0),
|
|
|
+ // yValue: api.value(1),
|
|
|
+ // x: location[0],
|
|
|
+ // y: location[1],
|
|
|
+ // xAxisPoint: api.coord([api.value(0), 0])
|
|
|
+ // },
|
|
|
+ // style: {
|
|
|
+ // fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
|
|
+ // offset: 0,
|
|
|
+ // color: '#3B80E2'
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // offset: 1,
|
|
|
+ // color: '#49BEE5'
|
|
|
+ // }
|
|
|
+ // ])
|
|
|
+ // }
|
|
|
+ // }]
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: VALUE
|
|
|
+ // }, {
|
|
|
+ // type: 'bar',
|
|
|
+ // label: {
|
|
|
+ // normal: {
|
|
|
+ // show: true,
|
|
|
+ // position: 'top',
|
|
|
+ // formatter: (e) => {
|
|
|
+ // switch (e.name) {
|
|
|
+ // case '10kV线路':
|
|
|
+ // return VALUE[0]
|
|
|
+ // case '公用配变':
|
|
|
+ // return VALUE[1]
|
|
|
+ // case '35kV主变':
|
|
|
+ // return VALUE[2]
|
|
|
+ // case '水':
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // fontSize: 16,
|
|
|
+ // color: '#fff',
|
|
|
+ // offset: [4, -25]
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // itemStyle: {
|
|
|
+ // color: 'transparent'
|
|
|
+ // },
|
|
|
+ // data: MAX
|
|
|
+ // }]
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+
|
|
|
+$xHeight: 120px;
|
|
|
+.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>
|
isv-robot
