<template>
  <div>
    <div id="barChart" :style="barChartStyle"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "MainPopulation",
  props:{
    barChartStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      myChart: null,
      rate: 30, //优良率
      data_X: ["光伏", "风机"],
      data_Y1: [10, 20],
      data_Y2: [15, 16],
      data_Y3: [30, 18],
    };
  },
  mounted() {
    // this.init();
  },
  methods: {
    init() {
      this.myChart = this.$echarts.init(document.getElementById('barChart'),'dark');
      this.myChart.clear();
      this.crawPie(this.myChart, this.data_X, this.data_Y1, this.data_Y2);

      var that = this;
      window.addEventListener("resize", function () {
        that.myChart.resize();
      });
    },
    crawPie(myChart, data_X, data_Y1, data_Y2) {
      let barTopColor = [
        "#E8C50B",
        "#0CD7E2",
        "#1EAAFE",
        "white",
        "black",
        "#C23531",
      ];
      let barBottomColor = [
        "rgba(232, 197, 11,0.1)",
        "rgba(12, 215, 226, 0.1)",
        "rgba(30, 170, 254, 0.1)",
        "rgba(255,255,255,0.1)",
        "rgba(0,0,0,0.1)",
        "rgba(194,53,49, 0.1)",
      ];
      myChart.setOption({
        backgroundColor: '',
        grid: {
          top: "15%",
          bottom: "20%",
          left: "3%",
          right: "3%",
        },
        // legend: ['for', 'forwhat'],
        xAxis: {
          data: data_X,

          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            // rotate: -30,
            margin: 25,
            align: "center",
            textStyle: {
              fontSize: 12,
              color: "#ffffff",
            },
          },
        },
        yAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "光伏",
            type: "pictorialBar",
            symbolSize: [26, 10], // [36, 10],
            // symbolOffset: [0, -5], // [0, -5]
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "top",
              fontSize: 20,
              fontFamily: "tenxu",
              formatter: "{c}",
            },
            symbolPosition: "end",
            data: data_Y1,
          },
          {
            name: "光伏",
            type: "pictorialBar",
            symbolSize: [26, 10], // [36, 10]
            // symbolOffset: [0, 5], // [0, 5]
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            data: data_Y1,
          },
          {
            name: "光伏",
            type: "pictorialBar",
            symbolSize: [46, 16], // [56, 16]
            // symbolOffset: [0, 11], // [0, 11]
            z: 11,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
                opacity: 0.2,
              },
            },
            data: data_Y1,
          },
          {
            name: "光伏",
            type: "pictorialBar",
            symbolSize: [64, 22], // [74, 22]
            // symbolOffset: [0, 17], // [0, 17]
            z: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
                opacity: 0.1,
              },
            },
            data: data_Y1,
          },
          {
            name: '光伏',
            type: "bar",
            itemStyle: {
              normal: {
                // 中间柱子渐变色
                color: function (params) {
                  return  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex],
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex],
                    },
                  ]);
                },
                opacity: 0.8,
              },
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: "-100%", // Make series be overlap
            data: data_Y1,
          },
          {
            name: "风机",
            type: "pictorialBar",
            symbolSize: [26, 10], // [36, 10],
            // symbolOffset: [0, -5], // [0, -5]
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            label: {
              show: true,
              position: "top",
              fontSize: 20,
              fontFamily: "tenxu",
              formatter: "{c}",
            },
            symbolPosition: "end",
            data: data_Y2,
          },
          {
            name: "风机",
            type: "pictorialBar",
            symbolSize: [26, 10], // [36, 10]
            // symbolOffset: [0, 5], // [0, 5]
            z: 12,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
              },
            },
            data: data_Y2,
          },
          {
            name: "风机",
            type: "pictorialBar",
            symbolSize: [46, 16], // [56, 16]
            // symbolOffset: [0, 11], // [0, 11]
            z: 11,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
                opacity: 0.2,
              },
            },
            data: data_Y2,
          },
          {
            name: "风机",
            type: "pictorialBar",
            symbolSize: [64, 22], // [74, 22]
            // symbolOffset: [0, 17], // [0, 17]
            z: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  return barTopColor[params.dataIndex];
                },
                opacity: 0.1,
              },
            },
            data: data_Y2,
          },
          {
            name: '风机',
            type: "bar",
            itemStyle: {
              normal: {
                // 中间柱子渐变色
                color: function (params) {
                  return  new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 1,
                      color: barTopColor[params.dataIndex],
                    },
                    {
                      offset: 0,
                      color: barBottomColor[params.dataIndex],
                    },
                  ]);
                },
                opacity: 0.8,
              },
            },
            z: 16,
            silent: true,
            barWidth: 26,
            barGap: "-100%", // Make series be overlap
            data: data_Y2,
          },
        ],
      });
    },
  }
};
</script>
<style scoped lang="less">
.chart_wrap {
  position: relative;
  width: 100%;
  max-width: 615px;
  height: 246px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  margin-top: 15px;
}
.MainPopulation_chart {
  width: 100%;
  max-width: 615px;
  height: 246px;
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
</style>

