<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {};
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [];
      var data2 = [];
      var data4 = [];
      var data3 = [];
      this.data.forEach(x => {
        dataAxis.push(x.Month + "月");
        data2.push(x.NowSaleMoney);
        data4.push(x.NowSaleDueIn);
        data3.push(x.NowSaleGuest);
      });
      let option = {
        title: {
          show: false
        },
        xAxis: {
          data: dataAxis,
          axisLabel: {
            textStyle: {
              color: "#DADADA",
              fontSize: 12
            },
            margin: 10,
            interval: 0,
            show: true
          },
          type: "category",
          axisTick: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: ["#12397C"]
            }
          }
        },
        yAxis: [
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: ["#12397C"]
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#DADADA",
                fontSize: 12
              },
              show: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#12397c4d"]
              }
            },
            min:0,
            name:"金额（元）",
            type:"value"
          },
          {
            axisLine: {
              show: true,
              lineStyle: {
                color: ["#12397C"]
              }
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color: "#DADADA",
                fontSize: 12
              },
              show: true
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#12397c4d"]
              }
            },
            min:0,
            name:"收客数（人）",
             type:"value"
          }
        ],
        grid: {
          left: "68",
          right: "60",
          top: "50",
          bottom: "30"
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "none",
            snap: true,
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4487F0" },
                  { offset: 0.3, color: "#4487F0" },
                  { offset: 1, color: "#B0D0F8" }
                ])
              }
            },
            barWidth: 24,
            data: data2,
            yAxisIndex:0,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          },
          {
            type: "bar",
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FD3C7C" },
                  { offset: 0.5, color: "#FD3C7C" },
                  { offset: 1, color: "#FFABC7" }
                ])
              }
            },
            barWidth: 24,
            data: data4,
            yAxisIndex:0,
            animationType: "scale",
            animationEasing: "elasticOut",
            animationDelay: function(idx) {
              return Math.random() * 200;
            }
          },
          {
            type: "line",
            smooth: true,
            symbol:'circle',
            symbolSize : 5,
            yAxisIndex:1,
            // left: "0",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#FFB822"
                },
                color: "#FFB822"
              }
            },
            data: data3
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
