<template>
  <!-- 全年运单量图表 -->
  <div style="width: 100%;height: 100%;">
    <div class="head_headlineUrl">
      <div>{{title}}</div>
      <timingFrame :whetherChoose="false" @changeYearTime="changeYearTime"></timingFrame>
    </div>
    <div class="card_collect">
      <div id="putInto6"></div>
    </div>
  </div>
</template>

<script>
  import timingFrame from './timingFrame.vue'
  export default {
    name: 'AnnualWaybill',
    components: {
      timingFrame
    },
    props: {
      title: {
        type: String,
        default: () => '文字',
      },
      textData: {
        type: Array,
        default: () => [],
      },
    },
    data() {
      return {
        myChartAnn1: null,
      }
    },
    watch: {
      textData: {
        handler(newVal) {
          if (newVal) {
            if (this.myChartAnn1 && newVal[0].length > 0) {
              this.myChartAnn1.setOption({
                title: {
                  show: false,
                },
                xAxis: [{
                  data: newVal[0],
                }],
                series: [{
                  data: newVal[1],
                }]
              })
            } else {
              if (this.myChartAnn1) {
                this.myChartAnn1.setOption({
                  title: {
                    show: true,
                  },
                  xAxis: [{
                    data: [],
                  }],
                  series: [{
                    data: [],
                  }]
                })
              }
            }
          }
        },
        deep: true, // 是否开启深度监听
        immediate: true,
      }
    },
    mounted() {
      this.getAnnCylinder()
    },
    methods: {
      // 选择切换年
      changeYearTime(event) {
        this.$emit('changeYearTime', event)
      },
      getAnnCylinder() {
        var that = this
        var chartDom1 = document.getElementById('putInto6');
        that.myChartAnn1 = that.$echarts.init(chartDom1);
        var option;
        let dateArr = []
        let valueArr = []
        if (that.textData.length > 0) {
          dateArr = that.textData[0]
          valueArr = that.textData[1]
        }
        let showFlag = true
        if (valueArr.length > 0) {
          showFlag = false
        } else if (valueArr.length == 0) {
          showFlag = true
        }
        option = {
          title: {
            show: showFlag,
            textStyle: {
              color: '#fff',
              fontSize: 16,
            },
            text: '暂无数据',
            left: 'center',
            top: 'center',
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              label: {
                backgroundColor: "#6a7985",
              },
            },
          },
          legend: {
            padding: 2,
            icon: "circle", //  字段控制形状  类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none
            itemWidth: 8, // 设置宽度
            itemHeight: 8, // 设置高度
            bottom: "2%",
            itemGap: 16,
            textStyle: {
              color: '#999'
            }
          },
          grid: {
            top: "10%",
            left: "10px",
            right: "0%",
            bottom: "15%",
            containLabel: true,
          },
          xAxis: [{
            type: "category",
            data: dateArr,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#fff",
              },
            },
            splitNumber: 0,
            axisTick: {
              show: false,
            },
          }],
          yAxis: [{
            type: "value",
            axisLabel: {
              interval: 0,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: true,
              //  改变轴线颜色
              lineStyle: {
                width: 0.5,
                // 使用深浅的间隔色
                color: ["rgba(95, 99, 127, 0.6)"],
              },
            },
          }],
          series: [{
            name: "2024年",
            type: "line",
            // smooth: true,
            lineStyle: {
              width: 1,
            },
            showSymbol: true,
            symbolSize: 5,
            symbol: "circle",
            areaStyle: {
              opacity: 1,
              color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: "rgba(66, 133, 244,0.6)",
                },
                {
                  offset: 1,
                  color: "rgba(66, 133, 244,0)",
                },
              ]),
            },
            emphasis: {
              focus: "series",
            },
            data: valueArr,
          }],
        }
        that.myChartAnn1.setOption(option);
      },
      getResize() {
        this.myChartAnn1.resize();
      }
    }
  }
</script>

<style lang="scss">
  .head_headlineUrl {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 40px;
    margin-left: 10px;
    margin-right: 20px;
    width: calc(100% - 70px);
    height: 50px;
    font-size: 18px;
    color: #fff;
    background: url(../../src/assets/images/headlineUrl.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .card_collect {
    width: calc(100% - 20px);
    height: calc(100% - 50px);
  }

  #putInto6 {
    width: 100%;
    height: 100%;
  }
</style>
