web/src/views/dashboard-screen/syjhdxqk/index.vue

<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() {
      const baseWidth = 20
      const offsetWidth = 15
      const triangleHeight = 8
      this.option = {
        backgroundColor: 'rgb(2, 10, 33)',
        color: [],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 60,
          top: 40
        },
        xAxis: {

          data: ['第一季度', '第二季度', '第三季度', '第四季度'],
          position: 'bottom',
          type: 'category'
        },
        yAxis: {
          axisLabel: {
            color: '#ffffff',
            fontSize: 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],

            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],
            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],
            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',
              position: [-baseWidth + 5, -20]
            },
            zlevel: -1

          },

          {
            data: [600, 541, 741, 741],
            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],

            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],
            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],
            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',
              position: [baseWidth - 5, -20]
            },
            zlevel: -1

          },
          {
            data: [580, 541, 741, 420],
            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;
.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>