<template>
  <div>
    <Echart
      :options="options"
      id="centreRight2Chart1"
      height="380px"
      width="500px"
    ></Echart>
  </div>
</template>

<script>
import Echart from '@/common/echart'
export default {
  data() {
    return {
      options: {}
    }
  },
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    cdata: {
      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: [
            {
              type: 'value',
              show: false,
              // boundaryGap : [0, 0.01],
              max: 800
            }
          ],
          yAxis: [
            {
              type: 'category',
              data: ['一部', '二部', '三部']
            }
          ],
          series: [
            {
              name: '昨日产量',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { 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: 'right' // 数值显示的位置
              },
              data: [411, 511, 611]
            },
            {
              name: '临时库存',
              type: 'bar',
              barWidth: '30%',
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: '#14D7C7' },
                    { offset: 0.5, color: '#13A1A2' },
                    { offset: 1, color: '#103F5B' }
                  ]),
                  borderColor: 'black', // 边框颜色
                  borderWidth: 2, // 边框宽度
                  borderType: 'solid' // 边框类型，默认为实线
                }
              },
              label: {
                formatter: '{c} 箱',
                textStyle: {
                  // 文本样式
                  color: '#14D7C7', // 文本颜色
                  fontSize: 14 // 设置字体大小
                },
                show: true, // 显示数值
                position: 'right' // 数值显示的位置
              },
              showBackground: true,
              backgroundStyle: {
                color: 'none'
                // borderRadius: [20, 20, 20, 20],
              },
              data: [411, 511, 611]
              // data: [
              // {value: 322, itemStyle: {color: 'rgba(19,180,174,0.8)'}}, // 半透明蓝色
              // {value: 433, itemStyle: {color: 'rgba(19,180,174,0.8),'}}, // 透明绿色
              // {value: 522, itemStyle: {color: 'rgba(19,180,174,0.8)'}} // 透明黄色
              // ]
              // data:[322, 433, 522]
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>