<template>
  <div>
    <view class="project-overview"><l-echart ref="chartRef" @finished="init"></l-echart></view>
  </div>
</template>

<script>
import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'

export default {
  props: {
    optionData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          data: ['规划中工程', '筹备中工程', '在建中工程', '完工工程'],
          // 字体占用空间过大，旋转45度
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.optionData,
            type: 'bar',
            barWidth: '10px',
            // 设置柱状图颜色-渐变色 90deg, #00D9FF 0%, #0490F4 100%
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#00D9FF' },
              { offset: 1, color: '#0490F4' }
            ]),
            label: {
              show: true,
              position: 'top'
            }
          }
        ]
      },
      myChart: null
    }
  },
  mounted() {
    console.log('🚀 ~ mounted ~ this.optionData:', this.optionData)
    this.init()
  },
  methods: {
    async init() {
      // chart 图表实例不能存在data里
      const chart = await this.$refs.chartRef.init(echarts)
      chart.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
.project-overview {
  height: 300px;
}
</style>
