<!--
  @description:集采订单统计-订单行项目数分析
  @Modifier: haoFx
  @routerPath:
  @date: 2021-05-25-16:31
-->
<template>
  <dl class="reportChart_crud" :style="{'height':height}">
    <dt>订单行项目数分析</dt>
    <dd>
      <MyEcharts
        v-if="orderPlanDetailsNumStatistics.length"
        :id="'orderPlanDetailsNumStatisticsComp'"
        class="echart-dom"
        :option="chartOption"
      />
    </dd>
  </dl>
</template>
<script>
import MyEcharts from '@/components/common/echarts/myEcharts.vue'// 图表
export default {
  name: 'OrderPlanDetailsNumStatisticsComp',
  components: {
    MyEcharts// 图表
  },
  props: {
    height: {
      type: String,
      default: '100%'
    },
    chartData: {
      type: Object,
      default() {
        return {
          mainBg: 'rgba(11, 21, 74, 1)', // 背景色
          highlightBg: 'rgba(15, 28, 93, 1)', // 背景色-高亮
          borderColor: 'rgba(255,255,255,0.15)', // 边框颜色
          textColor: '#fff' // 文本颜色
        }
      }
    },
    orderPlanDetailsNumStatistics: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      // 图表配置
      chartOption: {}
    }
  },
  watch: {
    orderPlanDetailsNumStatistics() {
      this.initChart(this.orderPlanDetailsNumStatistics)
    }
  },
  methods: {
    initChart(fromData) {
      const lineColor = ['#00a9f2', '#00f298', '#f6cb09', '#8080ff', '#c280ff'] // 柱形图颜色
      const borderColor = this.chartData.borderColor // 边框颜色
      const textColor = this.chartData.textColor // 文本颜色
      const numNameArr = [] // x轴名称
      const numValueArr = [] // Y轴名称
      fromData.forEach(item => {
        numNameArr.push(item.numName)
        numValueArr.push(item.numValue)
      })
      // 刻度值计算
      const maxY1 = parseInt((Math.max(...numValueArr) + 500) / 500) * 500
      /* ------------------------------------------------- */
      this.chartOption = {
        // 提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        grid: {
          // 距离 上右下左 的距离
          right: '30px',
          bottom: '10px',
          left: '30px',
          // 是否包含文本
          containLabel: true,
          // 显示边框
          show: false
        },
        // 图例
        legend: {
          selectedMode: false, // 取消图例上的点击事件
          textStyle: {
            color: textColor // 图例文字颜色
          }
        },
        xAxis: {
          // 使用类目，必须有data属性
          type: 'category',
          // 使用 data 中的数据设为刻度文字
          data: numNameArr,
          axisLine: {
            lineStyle: {
              opacity: 0 // 边框是否显引
            }
          },
          // 文字
          axisLabel: {
            interval: 0,
            rotate: 10,
            color: textColor
          }
        },
        yAxis: {
          // 使用数据的值设为刻度文字
          type: 'value',
          min: 0,
          name: '订单数量（个）',
          max: maxY1,
          interval: Math.ceil(maxY1 / 5),
          nameTextStyle: {
            // 标题文字
            color: textColor
          },
          axisLine: {
            lineStyle: {
              opacity: 0// 边框是否显引
            }
          },
          splitLine: {
            lineStyle: {
              color: borderColor
            }
          },
          // 文字
          axisLabel: {
            color: textColor
          }
        },
        series: [{
          data: [
            { value: numValueArr[0], itemStyle: { color: lineColor[0] }},
            { value: numValueArr[1], itemStyle: { color: lineColor[1] }},
            { value: numValueArr[2], itemStyle: { color: lineColor[2] }},
            { value: numValueArr[3], itemStyle: { color: lineColor[3] }},
            { value: numValueArr[4], itemStyle: { color: lineColor[4] }}
          ],
          barWidth: '30rem', // 柱图宽度
          type: 'bar',
          yAxisIndex: 0,
          smooth: true,
          label: {
            show: true,
            color: textColor,
            position: 'top'
          }
        }]
      }
    }
  }
}
</script>

<style scoped>

</style>
