<template>
  <div class="main">
    <div class="top">
      <div class="top-title">
        任务落实
      </div>
      <table class="w100 table" style="border-collapse:collapse;">
        <thead>
          <tr>
            <th width="50%" align="left">
              任务名称
            </th>
            <th width="30%" align="left">
              牵头单位
            </th>
            <th align="left">
              任务状态
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th align="left">
              <p class="p">扩大优质产品进口</p>
            </th>
            <th align="left">
              <p class="p">县商务局</p>
            </th>
            <th align="left">
              <img src="../assets/images/flag_red.png" class="fl zhihou-img" />
              <p class="p">滞后</p>
            </th>
          </tr>
          <tr>
            <th align="left">
              <p class="p">扩大优质产品进口</p>
            </th>
            <th align="left">
              <p class="p">县商务局</p>
            </th>
            <th align="left">
              <img src="../assets/images/flag_red.png" class="fl zhihou-img" />
              <p class="p">滞后</p>
            </th>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="biao">
      <ul class="clearfix">
        <li class="fl">
          <div class="clearfix">
            <h3 class="fl">外贸智稳出口额</h3>
            <p class="fl">（2021年1-4月）</p>
          </div>
          <div class="tu-biao" id="container1" style="max-width: 100%;height: 280px;"></div>
        </li>
        <li class="fr">
          <div class="clearfix">
            <h3 class="fl">实际使用外资完成进度</h3>
            <p class="fl">（2021年1-4月）</p>
          </div>
          <div class="tu-biao" id="container2" style="max-width: 100%;height: 280px;"></div>
        </li>

      </ul>
      <ul>
        <li class="fl">
          <div class="clearfix">
            <h3 class="fl">服务贸易进出口总额</h3>
            <p class="fl">（2021年1-4月）</p>
          </div>
          <div class="tu-biao" id="container3" style="max-width: 100%;height: 280px;"></div>
        </li>
        <li class="fr">
          <div class="clearfix">
            <h3 class="fl">社会消费品零售总额增速</h3>
            <p class="fl">（2021年1-4月）</p>
          </div>
          <div class="tu-biao" id="container4" style="max-width: 100%;height: 280px;"></div>
        </li>
      </ul>
      <div style="clear: both;"></div>
    </div>
  </div>

</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const label_one = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"];
const label_two = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"];
const label_three = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"];
const label_four = ["一月", "二月", "三月", "四月", "五月", "六月", "七月"];

const data_one = [
  5.2,
  {
    value: 13.2,
    itemStyle: {
      color: "#00E0A6",
    },
  },
  11.2,
  13.2,
  {
    value: 6.9,
    itemStyle: {
      color: "#FC5C5C",
    },
  },
  3.9,
  13.8,
];
const data_two = [
  0,0,0,0,0,0
];
const data_three = [
  0,0,0,0,0,0
];
const data_four = [
  5.2,
  {
    value: 13.2,
    itemStyle: {
      color: "#00E0A6",
    },
  },
  11.2,
  13.2,
  {
    value: 6.9,
    itemStyle: {
      color: "#FC5C5C",
    },
  },
  3.9,
  13.8,
];

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  mounted() {
    this.initCharts1();
    window.addEventListener("resize", function (e) {
      window.parent.postMessage(document.body.scrollHeight, '*');
    });
  },
  methods: {
    initCharts1() {
      var chartDom1 = document.getElementById("container1");
      var chartDom2 = document.getElementById("container2");
      var chartDom3 = document.getElementById("container3");
      var chartDom4 = document.getElementById("container4");
      var myChart1 = this.$echarts.init(chartDom1);
      var myChart2 = this.$echarts.init(chartDom2);
      var myChart3 = this.$echarts.init(chartDom3);
      var myChart4 = this.$echarts.init(chartDom4);
      var option;

      option = {
        color: ["#2690f3"],
        xAxis: {
          type: "category",
          data: label_one,
          axisTick: {
            // 隐藏刻度线
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#dddddd", // 坐标轴颜色
            },
          },
          axisLabel: {
            textStyle: {
              color: "#333", //坐标值得具体的颜色
              fontSize: 14,
            },
            interval: 0,
          },
        },
        yAxis: {
          type: "value",
          name: "亿元",
          splitLine: false, // 网格线
          axisLine: {
            lineStyle: {
              color: "#333333",
            },
          },
        },
        series: [
          {
            data: data_one,
            type: "bar",
            label: {
              // 在图形上显示每个数据
              show: true,
              position: "top",
            },
            barWidth: 25, // 柱子宽度
          },
        ],
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
      };

      var option_one = JSON.parse(JSON.stringify(option));
      option_one.xAxis.data=label_one
      option_one.series[0].data=data_one;

      
      var option_two = JSON.parse(JSON.stringify(option));
      option_two.xAxis.data=label_two
      option_two.series[0].data=data_two;

      var option_three = JSON.parse(JSON.stringify(option));

      option_three.xAxis.data=label_three
      option_three.series[0].data=data_three;


      var option_four = JSON.parse(JSON.stringify(option));

      option_four.xAxis.data=label_four
      option_four.series[0].data=data_four;

      option_one && myChart1.setOption(option_one);
      option_two && myChart2.setOption(option_two);
      option_three && myChart3.setOption(option_three);
      option_four && myChart4.setOption(option_four);
    },
  },
};
</script>

<style lang="scss" scoped>
  html,
  body {
    background-color: #F2F3F5;
  }

  .main {
    width: calc(100% - 30px);
    max-width: 1200px;
    margin: 0 auto 0px;
    padding: 25px 0;
  }

  .top {
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    padding: 10px 0 50px;
    box-shadow: 0 0 10px #E6EBF5;
    border-radius: 5px;
  }

  .top-title {
    line-height: 30px;
    padding: 0 10px 10px
  }

  .w100 {
    width: 100%;
  }

  .table thead th {
    background-color: #F5F7F9;
    line-height: 50px;
    font-size: 18px;
  }

  .table tr th:first-child {
    padding-left: 10px;
  }

  .table tr th p {
    line-height: 50px;
    font-size: 14px;
  }

  .table tr {
    border-bottom: solid 1px #DFE6EC;
  }

  .p {
    font-weight: normal;
  }

  .zhihou-img {
    position: relative;
    top: 12px;
    margin: 0 5px 0 5px;
  }

  .biao {
    margin-top: 20px;
  }

  .biao ul {
    margin-bottom: 20px;
  }

  .biao li {
    width: 49%;
    background-color: #fff;
    box-shadow: 0 0 10px #E6EBF5;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .biao li p {
    position: relative;
    top: 7px;
    font-size: 14px;
  }
</style>
