<template>
  <div class="servicefix">
    <div class="label">维修统计</div>
    <div id="servicefix" class="d1"></div>
  </div>
</template>

<script>
  export default {
    name: "ServiceFix",
    data() {
      return {
        xc: ''
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('servicefix'))
        var scale = 0.8
        var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];
        var legendData = ['维修完成'];
        var serieData = [];
        var metaDate = [100, 140, 100, 120, 300, 230, 130, 170, 140, 120, 300, 230]
        var yname = '      月份\n(2018-2019)'
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[v],
            type: 'line',
            symbol: "circle",
            symbolSize: 5 * scale,
            color: '#a39241',
            lineStyle: {
              width: 1,
              color: '#a39241'
            },
            label: {
              show: true,
              position: 'top',
              textStyle: { //数值样式
                color: '#fefefe',
                fontSize: 14 * scale
              }
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 1,
                  color: '#031a2b' // 0% 处的颜色
                },
                  {
                    offset: 0.5,
                    color: '#273531' // 50% 处的颜色
                  },
                  {
                    offset: 0,
                    color: '#444c3e' // 100% 处的颜色
                  }],
                globalCoord: false // 缺省为 false
              },
            },

            data: metaDate
          }
          serieData.push(serie)
        }
        var colors = ["#036BC8", "#4A95FF", "#5EBEFC", "#2EF7F3", "#FFFFFF"]


        this.xc.setOption({
          title: {text: '', textAlign: 'left', textStyle: {color: "#fff", fontSize: "16*scale", fontWeight: "normal"}},

          color: colors,
          grid: {left: '4%', top: "16%", bottom: "7%", right: "5%", containLabel: true},
          tooltip: {
            formatter: function (params) {
              if (params.data == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result += item.seriesName + " : " + item.value + "</br>";
              });
              return params[0].axisValue + '月<br/>' + result
            },
            axisPointer: {type: 'line', lineStyle: {width: 0}},
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;'
          },
          xAxis: [
            {
              name: yname,
              type: 'category',
              nameTextStyle: {
                fontSize: 12 * scale,
                color: '#15dce2',
                padding: [48 * scale, 0, 0, -70 * scale],
              },
              boundaryGap: false,
              type: 'category',
              axisLine: {show: true, lineStyle: {color: '#04669e', width: 1}},
              axisLabel: {interval: 0, textStyle: {color: '#ffffff', fontSize: 14 * scale}},
              axisTick: {show: false},
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              name: '维修数量',
              nameTextStyle: {
                fontSize: 12 * scale,
                padding: [-8 * scale, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {textStyle: {color: '#15dce2', fontSize: 14 * scale}},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
      },

    },
    ready() {
      this.setBar()
    }
  }
</script>

<style scoped>
  .label {
    /*margin-left: 20px;*/
    margin-left: 6%;
    font-size: 0.85em;
    color: #fff;
    width: 100%;
    height: 9%;
  }

  .d1 {
    /*padding: 20px 30px*/
  }

  #servicefix {
    /*height: 332px;*/
    height: 91%;
    width: 100%;
    padding: 2% 2%;
  }
</style>
