<script>
/**
 * vs-Bar-rhythm 2022-10-08
 *
 * width 图表宽度 330
 * height 图表高度 280
 * data 数据 []
 * dominantColor 主色 rgba(0, 216, 255, 1)
 * secondaryColor 辅助色 rgba(144,147,153,.7)
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 *  setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-bar-rhythm",
};
</script>
<script setup>
import {
    ref,
    reactive,
    inject,
    onMounted
} from "vue";
const echarts = inject("$echarts");

const props = defineProps({
    width: {
        type: Number,
        default: 330,
    },
    height: {
        type: Number,
        default: 280,
    },
    data: {
        type: Array,
        default: () => [
            { name: "事项一", value: 2233 },
            { name: "事项二", value: 6325 },
            { name: "事项三", value: 4096 },
            { name: "事项四", value: 5066 },
        ]
    },
    dominantColor: {
        type: String,
        default: 'rgba(0, 216, 255, 1)'
    },
    secondaryColor: {
        type: String,
        default: 'rgba(144,147,153,.7)'
    }
});


const style = reactive({
    width: props.width + 'px',
    height: props.height + 'px',
})

const emit = defineEmits(["chartClick"]);
const echartRef = ref(null)

let _echarts = null;
const init = function () {
    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }
    let xAxisData = [];
    let seriesData = [];
    let total = [];
    let sum = 0;
    props.data.map((item) => {
        xAxisData.push(item.name);
        seriesData.push(item.value);
        sum += item.value;
    });

    props.data.map((item) => {
        total.push(sum)
    });

    _echarts = echarts.init(echartRef.value);
    let option = {
        baseOption: {
            timeline: {
                show: false,
                top: 0,
                data: [],
            },

            grid: [
                {
                    show: false,
                    left: "-15%",
                    top: "5%",
                    bottom: "3%",
                    containLabel: true,
                    width: "110%",
                },
                {
                    show: false,
                    left: "11%",
                    top: "5%",
                    bottom: "3%",
                    width: "0%",
                },
                {
                    show: false,
                    left: "8%",
                    top: "5%",
                    bottom: "3%",
                    containLabel: true,
                    width: "100%",
                },
            ],
            xAxis: [
                {
                    type: "value",
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    position: "top",
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
                {
                    gridIndex: 1,
                    show: false,
                },
                {
                    gridIndex: 2,
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    position: "top",
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                },
            ],
            yAxis: [
                {
                    type: "category",
                    inverse: true,
                    position: "right",
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    data: xAxisData,
                },
                {
                    gridIndex: 1,
                    type: "category",
                    inverse: true,
                    position: "left",
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    data: xAxisData.map(function (value) {
                        return {
                            value: value,
                            textStyle: {
                                align: "center",
                            },
                        };
                    }),
                },
                {
                    gridIndex: 2,
                    type: "category",
                    inverse: true,
                    position: "left",
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    data: xAxisData,
                },
            ],
            series: [],
        },
        options: [],
    };

    option.options.push({
        series: [
            {
                xAxisIndex: 0,
                yAxisIndex: 0,
                name: "外框",
                type: "bar",
                barGap: "-120%", // 设置外框粗细
                data: total,
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: "transparent", // 填充色
                        barBorderColor: "rgba(255,255,255,.2)", // 边框色
                        barBorderWidth: 1, // 边框宽度
                        // barBorderRadius: 0, //圆角半径
                        label: {
                            // 标签显示位置
                            show: false,
                            position: "top", // insideTop 或者横向的 insideLeft
                        },
                    },
                },
                z: 0,
            },
            {
                type: "pictorialBar",
                xAxisIndex: 2,
                yAxisIndex: 2,
                symbol: "rect",
                itemStyle: {
                    normal: {
                        color: props.secondaryColor,
                    },
                },
                barWidth: 10,
                symbolRepeat: true,
                symbolSize: [5, 9],
                data: total,
                barGap: "100%",
                label: {
                    normal: {
                        show: true,
                        formatter: (series) => {
                            return (
                                "{normal|" +
                                series.name +
                                "}： {value|" +
                                ((seriesData[series.dataIndex] / sum) * 100).toFixed(1) +
                                "%" +
                                "}"
                            );
                        },
                        position: "insideTopLeft",
                        rich: {
                            normal: {
                                color: "#fff",
                                fontSize: 14,
                                fontWeight: "bold",
                            },
                            value: {
                                color: props.dominantColor,
                                fontFamily: "Microsoft YaHei",
                                fontSize: 14,
                                fontWeight: "bold",
                            },
                        },
                        offset: [10, -30],
                    },
                },
                z: -100,
                animationEasing: "elasticOut",
                animationDelay: function (dataIndex, params) {
                    if (params) {
                        return params.index * 30;
                    }
                },
            },
            {
                type: "pictorialBar",
                xAxisIndex: 2,
                yAxisIndex: 2,
                symbol: "roundRect",
                barWidth: 8,
                itemStyle: {
                    normal: {
                        barBorderRadius: 10,
                        color: props.dominantColor,
                    },
                },
                symbolRepeat: true,
                symbolSize: [5, 9],
                data: seriesData,
                animationEasing: "elasticOut",
                animationDelay: function (dataIndex, params) {
                    return params.index * 30 * 1.1;
                },
            },
        ],
    });
    _echarts.setOption(option);

    _echarts.on('click', (params) => {
        emit("chartClick", params);
    })
}

onMounted(() => {
    init()
})

//图表刷新
const setEchartsRefresh = function () {
    init()
};

defineExpose({
    setEchartsRefresh
});
</script>

<template>
    <div :style="style" class="vsBarRhythm" ref="echartRef"></div>
</template>

<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);

.vsBarRhythm {}
</style>
