<template>
  <div style="width: 100%;">
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="400px"
      width="100%"
      style="margin-top: 1rem;"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  props: ['info'],
  data() {
    return {
      options: {}
    }
  },
  components: {
    Echart
  },
  watch: {
    info: {
      handler(newData) {
        // 固定样式数据
        let lineStyle = {
          normal: {
            width: 1,
            opacity: 0.5
          }
        }
        this.options = {
          // title : {
          //     text: '世界人口总量',
          //     subtext: '数据来自网络'
          // },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            right: 20,
            data: ['收货完成率', '发货完成率']
          },
          grid: {
            show: true,
            borderWidth: 2, // 边框宽度
            borderColor: '#444', // 边框颜色
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            data: newData.name,
            axisLabel: {
              // inside: true,
              textStyle: {
                color: '#fff'
              }
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            z: 30
          },
          yAxis: {
            max: 100,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: '#999'
              }
            }
          },
          series: [
            {
              name: '收货完成率',
              type: 'bar',
              barWidth: '25%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.9, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                  ]),
                  // borderColor: 'black', // 边框颜色
                  // borderWidth: 2, // 边框宽度
                  // borderType: 'solid' // 边框类型，默认为实线
                }
              },
              label: {
                formatter: '{c}%',
                textStyle: {
                  // 文本样式
                  color: '#83bff6', // 文本颜色
                  fontSize: 14 // 设置字体大小
                },
                show: true, // 显示数值
                position: 'top' // 数值显示的位置
              },
              data: newData.production
            },
            {
              name: '发货完成率',
              type: 'bar',
              barWidth: '25%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#8AB89C' },
                    { offset: 0.3, color: '#90B886' },
                    { offset: 1, color: '#95B96F' }
                  ]),
                  // borderColor: 'black', // 边框颜色
                  // borderWidth: 2, // 边框宽度
                  // borderType: 'solid' // 边框类型，默认为实线
                }
              },
              label: {
                formatter: '{c}%',
                textStyle: {
                  // 文本样式
                  color: '#14D7C7', // 文本颜色
                  fontSize: 14 // 设置字体大小
                },
                show: true, // 显示数值
                position: 'top' // 数值显示的位置
              },
              showBackground: true,
              backgroundStyle: {
                color: 'none'
                // borderRadius: [20, 20, 20, 20],
              },
              data: newData.inventory
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>