bimgis_sx/src/views/groupPage/components/BarChart/ComSplitBarChart.vue

<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize } from '../../util'
export default {
  name: 'ComSplitBarChart', //合同结算柱状图
  props: {
    chartData: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData: {
      handler(n, o) {
        this.initialChart()
      }
    }
  },
  mounted() {
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      this.initialChart()
    },
    getBarColor(index) {
      const colors = [
        { index: 0, color0: '#CB2222', color1: '#FF4747' },
        { index: 1, color0: '#D7742C', color1: '#F6A75B' },
        { index: 2, color0: '#BEA23F', color1: '#E1D35B' }
      ]
      return colors.find((i) => i.index == index) || { index: 3, color0: '#0A89FF', color1: '#05CFE1' }
    },
    initialChart() {
      this.destroyChart()
      let list = this.chartData
      let barData = []
      list.forEach((item, index) => {
        barData.push({
          ...item,
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: this.getBarColor(index).color0 // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: this.getBarColor(index).color1 // 100% 处的颜色
                }
              ]
            }
          }
        })
      })
      let yName = list.map((item) => item.name)
      let xData = list.map((item) => item.value)
      let barWidth = 10
      let option = {
        backgroundColor: 'transparent',
        xAxis: {
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        grid: {
          containLabel: true,
          left: 0,
          top: '5%',
          right: '35%',
          bottom: 0
        },
        yAxis: [
          {
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              inside: true,
              verticalAlign: 'bottom',
              lineHeight: fontSize(37),
              margin: 0,
              //
              fontSize: fontSize(14),
              fontFamily: 'Source Han Sans CN',
              fontWeight: 500,
              color: '#FFFFFF'
            },
            data: yName
          }
        ],
        series: [
          {
            //内
            type: 'bar',
            barWidth,
            legendHoverLink: false,
            symbolRepeat: true,
            silent: true,
            data: barData,
            z: 1,
            animationEasing: 'elasticOut'
          },
          {
            // 背景
            type: 'pictorialBar',
            animationDuration: 0,
            symbolRepeat: 'fixed',
            symbolMargin: '20%',
            symbol: 'roundRect',
            symbolSize: [6, barWidth],
            itemStyle: {
              color: 'transparent'
            },
            label: {
              show: true,
              position: 'right',
              offset: [0, 2],
              distance: 30,
              textStyle: {
                fontSize: 14,
                fontFamily: 'Source Han Sans CN',
                fontWeight: 500,
                color: '#FEFFFF'
              },
              formatter: function (a, b) {
                return `${a.value}万元`
              }
            },
            data: xData,
            z: 0,
            animationEasing: 'elasticOut'
          },
          {
            //分隔
            type: 'pictorialBar',
            itemStyle: {
              color: '#000'
            },
            symbolRepeat: 'fixed',
            symbolMargin: 4,
            symbol: 'roundRect',
            symbolClip: true,
            symbolSize: [2, barWidth],
            symbolPosition: 'start',
            symbolOffset: [0, 0],
            data: list,
            z: 2,
            animationEasing: 'elasticOut'
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>