<template>
  <div id="chartWsd" style="width: 100%; height: 100%"></div>
</template>

<script>
export default {
  name: "ChartWsd",
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      let options = {
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          data: ['温度', '湿度']
        },
        color: ['#5599FE', '#31C3A6'],
        grid: {
          top: '15%',
          left: '10%',
          bottom: '10%',
          right: '10%'
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '温度',
            axisLabel: {
              formatter: '{value} °C'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
            splitLine:{
              show:false
            }
          },
          {
            type: 'value',
            name: '湿度',
            axisLabel: {
              formatter: '{value} RH'
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6e7079',
              }
            },
            axisTick:{
              show:false
            },
            // splitLine:{
            //   show:false
            // }
          }
        ],
        series: [
          {
            name: '温度',
            type: 'line',
            smooth: true,
            data: [20, 19, 18, 23.2, 25.6, 28.7, 35.6, 36.2, 32.6, 20.0, 16.4, 23.3]
          },
          {
            name: '湿度',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: [20, 22, 33, 45, 63, 102, 23, 24, 23, 65, 50, 62]
          }
        ]
      }
      this.myChart.setOption(options);
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('chartWsd'));
    this.init();
  }
}
</script>

<style scoped>

</style>
