
<template>
  <ul class="user_Overview flex onlineBorder ">
    <li class="user_Overview-item position">
      <div class="user_Overview_nums allnum ">
        <p class="headline title">农产品出库数据</p>
        <p class="headlineLeft titleTwo">单位 : 千克</p>
        <p class="headlineCentre titleTwo">本月总计 : </p>
        <p class="headlineRight titleTwo">千克 </p>
      </div>
      <div id="fftjChart"></div>
    </li>
    <li class="user_Overview-item position">
      <div class="user_Overview_nums ">
      </div>
    </li>
  </ul>
</template>

<script>
// 引入基本模板
import * as echarts from "echarts";
export default {
  name: 'fftjChart',
  data() {
    return {
      options: {},
      timer: null,
      pageflag: true,
      fftjChart: null,
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  mounted() {
    this.fftjChart = echarts.init(document.getElementById('fftjChart'));
    console.log(this.fftjChart)
    this.drawFftjChart();
    window.addEventListener('resize', () => {
    this.fftjChart.resize();
    })
  },
  methods: {
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    drawFftjChart() {
      let yData = [300, 498, 600, 382, 299, 372];
      this.fftjChart.setOption({
        grid: {
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '5%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item',
          formatter: function (parms) {
            return parms.marker + " " + parms.name + "：" + parms.value + "千克";
          }
        },
        xAxis: {
          type: 'category', // category(坐标轴类型)
          data: ['2023-6-6', '2023-6-7', '2023-6-8', '2023-6-9', '2023-6-10'],
          axisTick: { // 坐标轴刻度相关配置
            show: false // 是否显示坐标轴刻度
          },
          axisLine: { // 坐标轴轴线相关配置
            lineStyle: { // 坐标轴轴线样式
              color: 'rgba(255,255,255,0.15)' // 坐标轴轴线颜色
            }
          },
          axisLabel: { // 坐标轴刻度标签相关配置
            color: '#ffffff',
            fontSize: 14,
            margin: 20
          }
        },
        yAxis: {
          type: 'value', // value(数值轴,适用于连续数据)
          axisTick: { // 坐标轴刻度相关配置
            show: false  // 是否显示坐标轴刻度
          },
          axisLine: { // 坐标轴轴线相关配置
            show: false // 是否显示坐标轴轴线
          },
          axisLabel: { // 坐标轴刻度标签相关配置
            color: '#ffffff',
            fontSize: 14
          },
          splitLine: { // 坐标轴在 grid 区域中的分隔线
            lineStyle: { // 分割线配置
              color: 'rgba(255,255,255,0.15)' // 分割线颜色
            }
          }
        },
        series: [
          // 底部的椭圆形(象形柱图):pictorialBar
          // {
          //   type: "pictorialBar", // pictorialBar(象形柱图)
          //   label: { // 图形上的文本标签,可用于说明图像的一些数据信息,比如值,名称等
          //     show: true, //是否显示标签
          //     position: ['17', '-30'], // 标签的位置(可以是绝对的像素值或者百分比['50%','50%',也可以是top,left等])
          //     color: '#01E4FF',
          //     fontSize: 14
          //   },
          //   symbolSize: [40, 20], // 图形的大小用数组分别比表示宽和高,也乐意设置成10相当于[10,10]
          //   symbolOffset: [0, 10], // 图形相对于原本位置的偏移
          //   z: 12, // 象形柱状图组件的所有图形的 z 值.控制图形的前后顺序.z 值小的图形会被 z 值大的图形覆盖.
          //   itemStyle: { // 图形样式
          //     // echarts.graphic.LinearGradient(echarts内置的渐变色生成器)
          //     // 4个参数用于配置渐变色的起止位置,这4个参数依次对应右 下 左 上
          //     color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          //       // 这里 offset: 0 1 ,表示从下往上的渐变色
          //       {
          //         offset: 0, // 0%处的颜色
          //         color: "rgba(31,155,255,1)"
          //       },
          //       {
          //         offset: 1, // 100%处的颜色
          //         color: "rgba(0,229,255,1)"
          //       }
          //     ])
          //   },
          //   data: yData
          // },
          // 中间的长方形柱状图(柱状图):bar
          {
            type: 'bar', // 柱状图
            barWidth: 40, // 柱条的宽度,不设时自适应
            barGap: '0%', // 柱子与柱子之间的距离
            itemStyle: { // 图形样式
              // color支持(rgb(255,255,255)、rgba(255,255,255,1)、#fff,也支持渐变色和纹理填充)
              // 下面就是使用线性渐变
              color: {
                "x": 0,
                "y": 0,
                "x2": 0,
                "y2": 1,
                "type": "linear",
                "global": false,
                "colorStops": [{
                  "offset": 0, // 0%处的颜色
                  "color": "rgba(0,229,255,0.5)"
                }, {
                  "offset": 1, // 100%处的颜色
                  "color": "#1F9BFF"
                }]
              }
            },
            data: yData
          },
          // 顶部的椭圆形(象形柱图):pictorialBar
          {
            type: "pictorialBar",
            symbolSize: [40, 20],
            symbolOffset: [0, -10],
            z: 12,
            symbolPosition: "end",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(31,155,255,1)"
                },
                {
                  offset: 1,
                  color: "rgba(0,229,255,1)"
                }
              ], false)
            },
            data: yData
          }
        ]
      });
    }
  }
};

</script>
<style lang='scss' scoped>
#fftjChart{
    width: 550px;
    height: 350px;
}
ul {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  margin-left: 5px;
}

.onlineBorder {
  background-image: url("../../assets/img/left_bottom_1.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.user_Overview {
  li {
    flex: 1;
    //隐藏点
    list-style-type: none;

    //标题的字体大小与颜色
    .title {
      align-self: center;
      height: 100%;
      font-size: 16px;
      background-size: cover;
      color: rgb(50, 195, 205);
    }

    //框内单位：千克字体大小
    .titleTwo {
      height: 100%;
      font-size: 16px;
    }

    .headline {
      position: absolute;
      top: -15px;
      left: 10px;
    }

    .headlineLeft {
      position: absolute;
      top: 5px;
      left: -10px;
    }

    .headlineCentre {
      position: absolute;
      top: 5px;
      left: 330px;
    }

    .headlineRight {
      position: absolute;
      top: 5px;
      left: 480px;
    }

    //决定定位
    .position {
      position: relative;
    }

    .user_Overview_nums {
      width: 600px;
      height: 72px;
      line-height: 100px;
      font-size: 22px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 2px;
        left: -28px;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("../../assets/img/left_bottom_2.png");
        background-repeat: no-repeat;
        background-size: 100%;

      }
    }
  }
}
</style>