<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-15 14:26:52
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:38
 * @FilePath: src/views/screen/components/dataManagement/ProjectInfo.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div :class="className" :style="{height:height,width:width,backgroundColor: 'transparent'}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

const animationDuration = 6000

export default {
  name: 'ProjectInfo',
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => []
    },
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  watch: {
    data: {
      handler: function() {
        this.initChart()
      },
      deep: true
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      let data = this.$props.data
      this.chart.setOption({
        backgroundColor: 'transparent',
        tooltip : {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '3%',
          height: '85%',
          containLabel: true
        },
        toolbox: {
          show : false,
          feature : {
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
          }
        },
        calculable : true,
        xAxis : [
          {
            splitLine: {
              show: false
            },
            type : 'category',
            data : ['规划中','筹备中','在建中','已完工'],
            axisTick: {
              show: false
            },
          }
        ],
        yAxis : [
          {
            show:false,
            type : 'value',
            minInterval: 2, // Set the minimum interval
            splitLine: {
              show: false,
              lineStyle: {
                color: '#fff' // Set the color to white to remove the gray shadow effect
              }
            },

            axisLine: { //y轴
              show: true,
              lineStyle: {
                color: '#8c8c8c'
              }
            },
          }
        ],
        axisTick: {
          show: false
        },
        series : [
          {
            name:'工程数量',
            type:'bar',
            barWidth: '20%',
            data: data,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    '#d3d3d3','#4bb5ee','#ecdb91','#138a1a','#27727B',
                  ];
                  return colorList[params.dataIndex]
                },label: {
                  show: true,
                  position: 'top',
                  color: '#fff'
                },
                barBorderRadius: [10, 10, 0, 0], // Set the border radius for rounded corners
              }
            }
          }
        ]
      })
    }
  }
}
</script>
