<template>
  <div class="chart-container-content">
    <div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script>
// 方式1：全局引入时不需要这行
// 方式2：按需引入时需要
import * as echarts from 'echarts'
// import 'echarts-liquidfill'

export default {
  name: 'EchartsDemo',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    option: {
      type: Object,
      default: () => ({})
    },
    barColor: {
      type: String,
      default: 'rgba(22, 92, 255, 1)'
    },
    chartList: {
      type: Array,
      default: () => []
    },
    unit: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    chartList: {
      handler(newVal) {
        console.log('newVal',newVal)
        if (newVal) {
          this.initChart()
        }
      },
      deep: true
    },
    width() {
      this.$nextTick(() => {
        this.chart && this.chart.resize()
      })
    },
    height() {
      this.$nextTick(() => {
        this.chart && this.chart.resize()
      })
    }
  },
  mounted() {
    // this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },
  methods: {
    initChart() {
      // 如果全局引入了，可以使用 this.$echarts
      // 如果按需引入了，使用 import 的 echarts
      const echartsInstance = this.$echarts || echarts
      
      this.chart = echartsInstance.init(this.$refs.chart)
      

      
      this.chart.setOption({
        tooltip: {
            trigger: 'axis',
            show: false,
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
        },
        legend: {
          show: false,
          selectedMode: false,
        },
        grid: {
            left: '3%',
            right: '4%',
            top: '3%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(216, 221, 227, 1)',
                    type: 'dashed'
                }
            },
            type: 'value',
            show: true,
             minInterval: 1,
            axisTick: {
                show: true
            },
            axisLabel: {
              formatter: '{value} '+ this.unit
            }
        }],
        yAxis: [{
            splitLine: {
                show: false
            },
            axisLine: { //y轴
                show: false
            },
            type: 'category',
            axisTick: {
                show: false
            },
            data: this.chartList.map(item => item.name),
            axisLabel: {

            }
        }],
        series: [{
            name: '标准化',
            type: 'bar',
            barWidth: '15', // 柱子宽度
            label: {
                show: true,
                position: 'right', // 位置
                color: 'rgba(102, 102, 102, 1)',
                fontSize: 12,
                fontWeight: 'bold', // 加粗
                distance: 5 // 距离
            }, // 柱子上方的数值
            itemStyle: {
                // barBorderRadius: [0, 20, 20, 0], // 圆角（左上、右上、右下、左下）
                color: this.barColor
            },
            data: this.chartList.map(item => item.value)
        }, ]
      })
    }
  }
}
</script>

<style scoped>
.chart-container-content {
  width: 100%;
  height: 100%;
}
</style>