<template>
  <div class="inerank-container">
    <div :style="{height:'100%',width:'100%'}" ref="myLineRank"></div>
  </div>
</template>
<script>
export default {
  props: ['MYdata'],
  data() {
    return {};
  },
  mounted() {
    this.MYdata = [
      {
        dataStr: "9月",
        preferPrice: 12000
      },
      {
        dataStr: "10月",
        preferPrice: 8000
      },
      {
        dataStr: "11月",
        preferPrice: 8500
      },
      {
        dataStr: "12月",
        preferPrice: 7000
      },
      {
        dataStr: "1月",
        preferPrice: 16000
      },
      {
        dataStr: "2月",
        preferPrice: 0
      }
    ];
    this.init();
  },
  methods: {
    init() {
      let myChart = this.$echarts.init(this.$refs.myLineRank);
      var dataAxis = [];
      var data2 = [];
      this.MYdata.forEach(x => {
        dataAxis.push(x.dataStr);
        data2.push(x.preferPrice);
      });
      let option = (option = {
        title: {
          text: "漏斗图",
          subtext: "纯属虚构",
          show:false
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}%"
        },
        legend: {
          data: ["展现", "点击", "访问", "咨询", "订单"]
        },
        color:['#FF9459','#FFB18A','#FCBC9F','#F7C6B6','#EED8D4'],
        series: [
          {
            name: "预期",
            type: "funnel",
            left: "10%",
            width: "80%",
            label: {
              formatter: "{b}预期"
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              opacity: 0.7
            },
            emphasis: {
              label: {
                position: "inside",
                formatter: "{b}预期: {c}%"
              }
            },
            data: [
              { value: 60, name: "访问" },
              { value: 40, name: "咨询" },
              { value: 20, name: "订单" },
              { value: 80, name: "点击" },
              { value: 100, name: "展现" }
            ]
          },
          {
            name: "实际",
            type: "funnel",
            left: "10%",
            width: "80%",
            maxSize: "80%",
            label: {
              position: "inside",
              formatter: "{c}%",
              color: "#fff"
            },
            itemStyle: {
              opacity: 0.5,
              borderColor: "#fff",
              borderWidth: 2
            },
            emphasis: {
              label: {
                position: "inside",
                formatter: "{b}实际: {c}%"
              }
            },
            data: [
              { value: 30, name: "访问" },
              { value: 10, name: "咨询" },
              { value: 5, name: "订单" },
              { value: 50, name: "点击" },
              { value: 80, name: "展现" }
            ]
          }
        ]
      });

      myChart.setOption(option);
    }
  }
};
</script>
<style>
.inerank-container {
  height: 100%;
  width: 100%;
}
</style>
