<template>
  <div>
    <div class="label">销售额往年同比分析</div>
    <div id="saleproportion" class="d1"></div>
  </div>
</template>

<script>
  export default {
    name: "sale-proportion",
    data() {
      return {
        xc: '',
        visible: false,
        content: '',
        duration: 3000
      }
    },
    methods: {
      setBar() {
        this.xc = this.$echarts.init(document.getElementById('saleproportion'))
        var scale = 0.8
        var xAxisData = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '', ''];
        var legendData = ['2017', '2018'];
        var serieData = [];
        var metaDate = [
          [120, 140, 100, 120, 300, 230, 130, 170, 140, 120, 300, 230],
          [200, 120, 300, 200, 170, 300, 200, 180, 200, 190, 300, 200],
        ]
        for (var v = 0; v < legendData.length; v++) {
          var serie = {
            name: legendData[v],
            type: 'line',
            symbol: "circle",
            symbolSize: 5 * scale,
            itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                  shadowBlur: 10 * scale,
                  shadowOffsetY: 15 * scale,
                }
              }
            },
            data: metaDate[v]
          }
          serieData.push(serie)
        }
        var colors = ["#f7cb32", "#6fd9d0"];

        this.xc.setOption({
          title: {
            text: '',
            textAlign: 'left',
            textStyle: {color: "#FFFFFF", fontSize: 12 * scale, fontWeight: "normal"}
          },
          legend: {
            itemGap: 0,
            width: '90%',
            show: true,
            left: "right",
            data: legendData,
            y: 'top',
            // padding: [0, 25*scale, 0, 0],
            itemWidth: 14 * scale,
            itemHeight: 6 * scale,
            textStyle: {width: '20%', color: "#15dce2", fontSize: 12 * scale},
            formatter: function (params) {
              return params + "年"
            }
          },
          color: colors,
          grid: {left: '5%', top: "18%", bottom: "5%", right: "5%", width: '88%',height:'64%',containLabel: true},
          tooltip: {
            formatter: function (params) {
              if (params[0].data == '') {
                return ''
              }
              var result = ''
              params.forEach(function (item) {
                result += item.marker + " " + item.seriesName + " : " + item.value + "</br>";
              });
              return params[0].axisValue + '<br/>' + result
            },
            trigger: 'axis',
            extraCssText: 'width: auto;height: auto;',
            axisPointer: {lineStyle: {width: 0}},
          },
          xAxis: [
            {
              name: '      月份\n(2018-2019)',
              type: 'category',
              nameTextStyle: {
                fontSize: 12 * scale,
                color: '#15dce2',
                padding: [38, 0, 0, -80 * scale],
              },
              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: 14 * scale,
                padding: [0, 35 * scale, 0, 0],
              },
              axisTick: {show: false},
              splitLine: {show: true, lineStyle: {type: 'dashed', color: '#004371'}},
              axisLabel: {textStyle: {color: '#15dce2', fontSize: 14 * scale}, formatter: function (params) {
                  return params+"万"
                }},
              axisLine: {show: false, lineStyle: {color: '#15dce2', fontSize: 14 * scale}},
            },
          ],
          series: serieData
        })
      },
    },

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

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

  .callstatic {
    /*padding: 0% 1%;*/
  }

  .d1 {

  }

  #call {
    height: 88%;
    width: 99%;
    padding: 1% 2% 3% 2%;

  }
</style>
