var option = {
  grid: [
    {
      left: '-15px',
      right: '-15px',
      bottom: '-90px',
      top: '0px',
      containLabel: true
    }
  ],
  xAxis: [
    {
      type: 'category',
      position: 'bottom',
      offset: -25,
      zlevel: 100,
      boundaryGap: false,
      axisTick: {
        show: false
      },
      axisLabel: {
        show: true,
        interval: 1,
        rotate: '0',
        fontSize: 12,
        color: '#666'
      },
      axisLine: {
        show: true,
        lineStyle: {
          textAlign: 'left',
          color: 'rgba(0,0,0,.4)'
        }
      },
      data: [
        ' ',
        ' ',
        '现在',
        '13:00',
        '14:00',
        '15:00',
        '16:00',
        '17:00',
        '18:00',
        '19:00',
        '20:00',
        '21:00',
        '22:00',
        '23:00',
        '00:00',
        '01:00',
        '02:00',
        '03:00',
        '04:00',
        '05:00',
        '06:00',
        '07:00',
        '08:00',
        '09:00',
        '10:00',
        '11:00',
        '12:00',
        ' '
      ]
    },
    {
      type: 'category',
      boundaryGap: false,
      position: 'bottom',
      offset: -90,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: function (value, index) {
          return '{' + index + '| }\n{b|' + value + '}';
        },
        rich: {
          3: {
            backgroundColor: {
              image: 'https://d.scggqx.com/forecast/img/阴.png'
            },
            height: 20,
            width: 20
          },
          7: {
            backgroundColor: {
              // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
              image: 'https://d.scggqx.com/forecast/img/阴.png'
            },
            height: 20,
            width: 20
          },
          11: {
            backgroundColor: {
              // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
              image: 'https://d.scggqx.com/forecast/img/小雨.png'
            },
            height: 20,
            width: 20
          },
          18: {
            backgroundColor: {
              // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
              image: 'https://d.scggqx.com/forecast/img/多云.png'
            },
            height: 20,
            width: 20
          },
          b: {
            color: 'white',
            fontSize: 12,
            lineHeight: 30,
            height: 20
          }
        }
      },
      nameTextStyle: {
        fontWeight: 'bold',
        fontSize: 19
      },
      // data: this.weatherdata.weather
      data: [
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        ''
      ]
    },
    {
      type: 'category',
      boundaryGap: false,
      position: 'bottom',
      offset: -50,
      zlevel: 100,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0,
        formatter: ['{a|{value}}'].join('\n'),
        rich: {
          a: {
            color: '#666',
            fontSize: 10
          }
        }
      },
      nameTextStyle: {},
      data: [
        '',
        '降水概率',
        '14%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '13%',
        '',
        '12%',
        ''
      ]
    }
  ],
  yAxis: {
    max: 100,
    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    }
  },
  visualMap: {
    type: 'piecewise',
    show: false,
    dimension: 0,
    seriesIndex: 0
  },
  series: [
    {
      type: 'line',
      smooth: true,
      // symbol: 'none',
      symbolSize: 0,
      showSymbol: true,
      lineStyle: {
        color: '#5470C6',
        width: 0.1
      },
      // markLine: {
      //     silent:true,
      //     symbol: ['none', 'none'],
      //     label: {
      //     show: true,
      //     position: 'end',
      //     normal: {
      //         distance: -20,
      //         // lineHeight: 60,
      //         // backgroundColor: '#fff',
      //         position: 'end',
      //         formatter: function (param:any) {
      //         return `${param.name} \r ${param.name}`;
      //         }
      //     }
      //     },
      //     lineStyle: {
      //     color: 'rgba(255,255,255,.5)',
      //     dashOffset: 40
      //     },
      //     data: [{ xAxis: 7, name: '今天' }]
      // },
      label: {
        show: true,
        color: '#666',
        position: 'top',
        formatter: '{c} °'
        // formatter: function (params) {
        //   return params[0];
        //   return '{c} °C'
        // }
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(30, 90, 246, .8)'
          },
          {
            offset: 0.1,
            color: 'rgba(30, 90, 246, .5)'
          },
          {
            offset: 1,
            color: 'rgba(30, 90, 246, 0)'
          }
        ])
      },
      data: [
        0, 70, 70, 72, 82, 69, 83, 79, 83, 80, 70, 80, 70, 80, 70, 72, 82, 69,
        83, 79, 83, 80, 70, 80, 70, 80, 80, 0
      ]
    }
  ]
};