<template>
  <div :class="className" :style="{ height: height, width: width }"></div>
</template>

<script>
import * as echarts from 'echarts';
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";
const animationDuration = 2600;
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "100%"
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object
      //   required: true,
    },
    
    chartConfig: {
      type: Object,
      default: () => {
        return {};
      }
    },
    title: {
      type: String,
      default: "分布图"
    },
  },
  data() {
    return {
      chart: null,
      maleCount:0,
      femaleCount:0,
      bodyMax: 100, //指定图形界限的值
      labelSetting: {
        normal: {
          show: false,
          position: "right",
          offset: [0, 10],
          formatter: function(param) {
            return ((param.value / bodyMax) * 100).toFixed(0) + "%"+"客户经理";
          },
          textStyle: {
            fontSize: 18,
            fontFamily: "Arial",
            color: "#686868"
          }
        }
      },
      markLineSetting: {
        //设置标线
        symbol: "none",
        lineStyle: {
          normal: {
            opacity: 0.3
          }
        },
        data: [
          {
            type: "max",
            label: {
              normal: {
                formatter: "max: {c}"
              }
            }
          },
          {
            type: "min",
            label: {
              normal: {
                formatter: "min: {c}"
              }
            }
          }
        ]
      },
      symbols: [
        "path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z",
        "path://M511.6 190.5c-39.4 0-71.3-39.9-71.3-89.1 0-49.2 31.9-89.1 71.3-89.1s71.3 39.9 71.3 89.1c0 49.2-31.8 89.1-71.3 89.1zM706 500.3c12.4 51-42.5 72.1-55.7 23l-53.8-216h-17.2l94.3 379.5h-88.7V972c0 51.6-63.2 51.6-63.2 0V686.7h-20.4v285.2c0 51.6-65.4 51.6-65.4 0V686.7H349.5l92.4-379.5H427l-53.6 216c-13.6 48-68.6 28.1-55.8-23.1L377.7 266c7-27.1 35.8-73.3 86-75.5h96.6c48.6 2.1 77.7 48.8 85.7 75.3l60 234.5z m0 0"
      ],
      config: {
        title: {
          text: "",
          top: "3%",
          left: "1%",
          // padding: 20,
          textStyle: {
            color: "rgba(255, 255, 255, 0.8)",
            fontStyle: "normal",
            fontSize: 16
          }
        },
        tooltip: {
          show: false //鼠标放上去显示悬浮数据
        },
        grid: {
          // left: '20%',
          // right: '20%',
          top: "50%",
          bottom: "0",
          left: "1%",
          right: "1%",
          containLabel: true
        },
        xAxis: {
          data: ["男", "女"],
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: this.chartsRelativeSize(1.1, "r")
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          axisTick: {
            // 刻度线
            show: false
          },
          axisLine: {
            // 轴线
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#00badb",
              fontSize: this.chartsRelativeSize(0.9, "r")
            }
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a}<br>{b}:{c}%",
          borderWidth:0,
          textStyle: {
            color: "#ffffff",
            fontSize: this.chartsRelativeSize(0.8, "r")
          },
          axisPointer: {
            type: "shadow"
          }
        },
        series: [
          {
            name: "男女比例",
            type: "pictorialBar",
            symbolClip: true,
            symbolBoundingData: this.bodyMax,
            // label: this.labelSetting,
            barWidth: this.chartsRelativeSize(3.2, "r"),
            data: [
              {
                value: 35,
                symbol:
                  "path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z",
                itemStyle: {
                  normal: {
                    color: "rgb(146,250,53)" //单独控制颜色
                  }
                }
              },
              {
                value: 65,
                symbol:
                  "path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z",
                itemStyle: {
                  normal: {
                    color: "rgb(255,128,98)" //单独控制颜色
                  }
                }
              }
            ],
            // markLine: markLineSetting,
            z: 10
          }
        ]
      }
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      }
    }
  },
  created() {
    
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    buildDataFuc(){
      this.symbols = [
        "path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z",
        "path://M511.6 190.5c-39.4 0-71.3-39.9-71.3-89.1 0-49.2 31.9-89.1 71.3-89.1s71.3 39.9 71.3 89.1c0 49.2-31.8 89.1-71.3 89.1zM706 500.3c12.4 51-42.5 72.1-55.7 23l-53.8-216h-17.2l94.3 379.5h-88.7V972c0 51.6-63.2 51.6-63.2 0V686.7h-20.4v285.2c0 51.6-65.4 51.6-65.4 0V686.7H349.5l92.4-379.5H427l-53.6 216c-13.6 48-68.6 28.1-55.8-23.1L377.7 266c7-27.1 35.8-73.3 86-75.5h96.6c48.6 2.1 77.7 48.8 85.7 75.3l60 234.5z m0 0"
      ];
      this.config = {
        title: {
            text: "",
            top: "3%",
            left: "1%",
            // padding: 20,
            textStyle: {
              color: "rgba(255, 255, 255, 0.8)",
              fontStyle: "normal",
              fontSize: 16
            }
          },
        tooltip: {
          show: false //鼠标放上去显示悬浮数据
        },
        grid: {
            left: 20,
            right: 38,
            bottom: "20%",
            top: "30%",
            containLabel: true
          },
        xAxis: {
          data: ["男性筛查目标人数："+this.maleCount+"人", "女性筛查目标人数："+this.femaleCount+"人"],
          nameGap: 15,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            margin:15,
            textStyle: {
              color: "#fff",
              fontSize: 16,
              
            }
          },
          splitArea: false
        },
        yAxis: {
          splitLine: {
            show: false,
            lineStyle: {
              color: "#393d60"
            }
          },
          axisTick: {
            // 刻度线
            show: false
          },
          axisLine: {
            // 轴线
            show: false
          },
          axisLabel: {
            show: false,
            textStyle: {
              color: "#00badb",
              fontSize: this.chartsRelativeSize(0.9, "r")
            }
          },
          splitLine: {
            show:false,
            
          },
          splitArea: false
        },
        tooltip: {
          show: true,
          trigger: "axis",
          borderWidth:0,
          formatter: "{b1}占{c1}%",
          textStyle: {
            color: "#ffffff",
            // fontSize: this.chartsRelativeSize(0.8, "r")
          },
          axisPointer: {
            type: "none"
          }
        },
        series: [
          {
            // 设置背景底色，不同的情况用这个
            name: "full",
            type: "pictorialBar", //异型柱状图 图片、SVG PathData
            symbolBoundingData: this.bodyMax,
            animationDuration: 0,
            barWidth: this.chartsRelativeSize(7, "r"),
            itemStyle: {
              normal: {
                color: "#ccc" //设置全部颜色，统一设置
              }
            },
            z: 10,
            data: [
              {
                itemStyle: {
                  normal: {
                    color: "rgba(255,255,255,0.80)" //单独控制颜色
                  }
                },
                value: 100,
                symbol: this.symbols[0]
              },
              {
                itemStyle: {
                  normal: {
                    color: "rgba(255,255,255,0.80)" //单独控制颜色
                  }
                },
                value: 100,
                symbol: this.symbols[1]
              }
            ]
          },
          {
            name: "男女比例",
            type: "pictorialBar",
            symbolClip: true,
            symbolBoundingData: this.bodyMax,
            label: {
                show: true,
                // 标签的位置 left right bottom top inside  // 绝对的像素值 position: [10, 10]
                // 相对的百分比 position: ['50%', '50%']
                position: "right",
                color: "white",
                fontSize: 16,
                distance: 30,
                formatter: "{c0}%"
              },
            barWidth: this.chartsRelativeSize(7, "r"),
            data: [
              //男
              {
                value: 35,
                symbol: this.symbols[0],
                itemStyle: {
                  normal: {
                    color: "#02a7f0" //单独控制颜色
                  }
                }
              },
              //女
              {
                value: 65,
                symbol: this.symbols[1],
                itemStyle: {
                  normal: {
                    color: "#ec808d" //单独控制颜色
                  }
                }
              }
            ],
            // markLine: markLineSetting,
            z: 10
          }
        ]
      }
    },
    chartsRelativeSize(rate, type) {
      return 10 * rate;
    },
    initChart() {
      //   this.chart = echarts.init(document.getElementById('chart'));
      this.chart = echarts.init(this.$el, "macarons");
      // 监听屏幕变化自动缩放图表
      //   window.addEventListener('resize', function () { this.chart.resize() })
      this.setOptions(this.chartData);
    },
    setOptions(chartData) {
      if (!chartData.data) return;
     
      const series = chartData.data.map(v => {
        // if (v.color) {
        //   return {
        //     name: v.name,
        //     value: Number(v.value),
        //     color: v.color
        //   };
        // }
        if(v.name.indexOf("男")>=0){
          this.maleCount=v.count||0
        }
        if(v.name.indexOf("女")>=0){
          this.femaleCount=v.count||0
        }
        return {
          name: v.name,
          value: Number(v.value),

        };
      });
      this.buildDataFuc();//构造config
      const option = Object.assign(this.config, this.chartConfig);
      series.forEach((item,i) => {
        option.series[1].data[i].value=item.value
      })
      
      option.title.text = this.title;

      this.chart.setOption(option);
    }
  }
};
</script>


