<template>
  <div ref="assetEchart" class="asset_echart"></div>
</template>
<script lang="ts" setup>
import { init } from "echarts";
import * as echarts from "echarts";
import { reactive, toRefs, Ref, ref, onMounted, watchEffect } from "vue";
const assetEchart: Ref<HTMLElement | null | any> = ref(null);
let {
    myData,classifyInvestProportion,classifyAreaProportion
} = defineProps(['myData','classifyInvestProportion','classifyAreaProportion']);
const emit = defineEmits(['click-call-back'])
const initM = () => {
  const chart = init(assetEchart.value as HTMLElement);
  window.addEventListener("resize", () => {
    chart.resize();
  });
    chart.setOption({
        tooltip: {
            show: true,
            position: "left",
            offset: [0, 0],
            textStyle: {
              color: "#666666",
              fontSize: 14,
            },
            formatter: `{a0}</br> {b0}:{c0}%`
          },
        legend: {
            type:"plain",
            textStyle:{
                color:"#D1DEEE", //文字的颜色
                fontSize: 12 , //文字的字号
            },
        },
        grid: [
            {
                show: false,
                left:10,
                top: 30,
                bottom: 22,
                width: '15%',
            },
            {
                show: false,
                left: '20%',
                top: 30,
                bottom: 0,
                containLabel: true,
                width: '39%',
            },
            {
                show: false,
                right: '2%',
                top: 30,
                bottom: 0,
                containLabel: true,
                width: '39%',
            },
        ],
        xAxis: [
            {
                gridIndex: 0,
                show: false,
            },
            {
                gridIndex: 1,
                type: 'value',
                inverse: true,
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    verticalAlign: 'middle',
                    textStyle: {
                        color: '#6E8098',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                },
            },
            {
                gridIndex: 2,
                type: 'value',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: true,
                    verticalAlign: 'middle',
                    textStyle: {
                        color: '#6E8098',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        yAxis: [
            {
                name: "",
                gridIndex: 0,
                type: 'category',
                inverse: true,
                position: 'right',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                data: myData.map(function (value) {
                    return {
                        value: value,
                        textStyle: {
                        textAlign:'left',
                            align: 'right',
                        },
                    };
                }),
                axisLabel: {
                    fontSize: 14,
                    align: 'left',
                    rich: {
                        a: {
                            color: '#fff',
                            backgroundColor: '#49a2ff',
                            width: 24,
                            height: 23,
                            align: 'center',
                            borderRadius: 3,
                        },
                        a1: {
                            color: '#fff',
                            backgroundColor: '#f5576c',
                            width: 24,
                            height: 23,
                            align: 'center',
                            borderRadius: 3,
                        },
                        a2: {
                            color: '#fff',
                            backgroundColor: '#fee140',
                            width: 24,
                            height: 24,
                            align: 'center',
                            borderRadius: 3,
                        },
                        a3: {
                            color: '#fff',
                            backgroundColor: '#96fbc4',
                            width: 24,
                            height: 24,
                            align: 'center',
                            borderRadius: 3,
                        },
                        b: {
                            color: '#D1DEEE',
                            width: 100,
                            height: 24,
                            align: 'right',
                            fontSize:12,
                            fontWeight:'bold'
                        },
                    },
                    formatter: function (params) {
                        var index = myData.map((item) => item).indexOf(params);
                        index = index + 1;
                        if (index < 4) {
                            return [`{a${index}|${index}}{b|${params}}`].join('\n');
                        } else {
                            return [`{a|${index}}{b|${params}}`].join('\n');
                        }
                    },
                },
                triggerEvent: true
            },
            {
                gridIndex: 1,
                type: 'category',
                inverse: true,
                position: 'right',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    margin: 8,
                    textStyle: {
                        color: '#9D9EA0',
                        fontSize: 12,
                    },
                },
                data: myData,
                triggerEvent: true
            },
            {
                gridIndex: 2,
                type: 'category',
                inverse: true,
                position: 'left',
                axisLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                    textStyle: {
                        color: '#9D9EA0',
                        fontSize: 12,
                    },
                },
                data: myData,
                triggerEvent: true
            },
        ],
        series: [
            {
                name: '资金占比',
                type: 'bar',
                barGap: 20,
                barWidth: 6,
                xAxisIndex: 1,
                yAxisIndex: 1,
                showBackground: true,
                backgroundStyle: {
                    color: '#011431',
                },
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: true,
                        position: 'left',
                        offset: [0, 0],
                        textStyle: {
                            color: '#666666',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: [10, 0, 0, 10],
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#FFCE65',
                            },
                            {
                                offset: 1,
                                color: '#052a57',
                            },
                        ]),
                    },
                },
                data: classifyAreaProportion,
            },
            {
                name: '面积占比',
                type: 'bar',
                barGap: 20,
                barWidth: 6,
                xAxisIndex: 2,
                yAxisIndex: 2,
                showBackground: true,
                backgroundStyle: {
                    color: '#011431',
                },
                label: {
                    normal: {
                        show: false,
                    },
                    emphasis: {
                        show: true,
                        position: 'right',
                        offset: [0, 0],
                        textStyle: {
                            color: '#666666',
                            fontSize: 14,
                        },
                    },
                },
                itemStyle: {
                    normal: {
                        barBorderRadius: [0, 10, 10, 0],
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {
                                offset: 0,
                                color: '#303e54',
                            },
                            {
                                offset: 1,
                                color: '#1093FA',
                            },
                        ]),
                    },
                },
                data: classifyInvestProportion,
            },
        ],
    });
    chart.on('click', function(params) {
        emit('click-call-back', { ...params, name: params.value })
    })
};
function chartSize(container, charts) {
  function getStyle(el, name) {
    if (window.getComputedStyle) {
      return window.getComputedStyle(el, null);
    } else {
      return el.currentStyle;
    }
  }
  const hi = getStyle(container, "height").height;
  charts.style.height = hi;
}
watchEffect(() => {});
onMounted(() => {
  initM();
});
</script>

<style lang="scss" scoped>
.asset_echart {
  width: 450px;
  height: 240px;
  // margin-left:-30px;
  &_echart {
    width: 100%;
    height: 100%;
  }
}
</style>