<template>
  <div ref="chart" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name:'solidChart',
  props: ["alldata", "alltest"],
  data() {
    return {
      chart: null,
      chartData: [
        { value: 0, name: "表单发布" },
        { value: 0, name: "表单完成" },
        { value: 0, name: "智能问答" }
      ]
    };
  },
  watch: {
    alldata: {
      handler(val) {
        if (Object.keys(val).length) {
          this.startCom(val);
        }
      },
      deep: true,
      immediate: true // 组件创建时立即执行
    }
  },
    // mounted() {
    //   this.startCom(this.alldata);
    // },
  methods: {
    startCom(val) {
      let data = JSON.parse(JSON.stringify(val));

      // console.log("this.alltest", this.alltest[0].value);
      // console.log("data.noLook", data.noLook);

      if (!data.noLook || !this.alltest[0].value) {
        this.chartData[0].value = 0;
      }else{
        this.chartData[0].value =
          ((data.noLook / this.alltest[0].value)* 100).toFixed(2) ;
      }
      
      if (!data.is || !this.alltest[0].value) {
        this.chartData[1].value = 0
      }else{
        this.chartData[1].value =
          ((data.is / this.alltest[0].value)* 100).toFixed(2);
      }

      if (!this.alltest[2].value || !this.alltest[0].value) {
        this.chartData[2].value = 0 
      }else{
        this.chartData[2].value =
          ((this.alltest[2].value / this.alltest[0].value)* 100).toFixed(2);
      } 

      // console.log("this.chartData", this.chartData);

      this.initChart();
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      const option = {
        // tooltip: {
        //   trigger: "item"
        // },

        series: [
          {
            name: "Funnel",
            type: "funnel",
            left: "10%",
            right: "10%",
            top: "15%",
            bottom: "15%",
            width: "80%",
            min: 0,
            max: 100,
            minSize: "10%",
            maxSize: "100%",
            sort: "descending",
            gap: 10,
            label: {
              show: true,
              position: "inside",
              fontSize: 15
            },
            // labelLine: {
            //   length: 10,
            //   lineStyle: {
            //     width: 1,
            //     type: "solid"
            //   }
            // },
            // itemStyle: {
            //   color: this.getColor(index), // 根据索引设置颜色,
            //   borderColor: "#fff",
            //   borderWidth: 1
            // },
            // emphasis: {
            //   label: {
            //     fontSize: 20
            //   }
            // },
            data: this.chartData.map((item, index) => ({
              value: item.value,
              name: item.name + item.value + '%',
              itemStyle: {
                color: this.getColor(index) // 根据索引设置颜色
              }
            }))
          }
        ]
      };

      this.chart.setOption(option);
      window.addEventListener("resize", this.chart.resize);
    },
    getColor(index) {
      // 颜色渐变从深蓝到浅蓝
      const colors = ["#68A0F5", "#ABCBF9","#216AD3"]; // 深蓝到浅蓝的颜色数组
      return colors[index] || colors[colors.length - 1]; // 确保索引在范围内
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
    this.chart && this.chart.dispose();
  }
};
</script>

<style scoped>
.data_body {
  height: 100%;
  /* display: flex; */
  position: relative;
  border-radius: 5px;
  /* border: 1px solid #eee; */
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0;
  width: 95%;
  /* background: #fff; */
}
</style>
