<script>
/**
 * vs-Bar-multiple 2022-10-08
 *
 * width 图表宽度 330
 * height 图表高度 280
 * barWidth 柱子宽度 10
 * data 数据 []
 * isRoll 是否横向滚动展示 false
 * surplus 滚动展示时默认展示柱子数量 从0开始  4
 * barColor 柱子渐变颜色,二维数组 //默认提供5组，超过请自定义 [['#1268f3', '#08a4fa', '#01ccfe'], ['#56444a', '#9f5052', '#c34c4c'], ['#bf7b15', '#e69419', '#faecd8'], ['#629b45', '#7ac257', '#e1f3d8'], ['#6a5a72', '#909399', '#e9e9eb']]
 * 
 * @chartClick 图表点击触发回调 返回params参数
 * 
 *  setEchartsRefresh echarts刷新 事件
 */
export default {
    name: "vs-bar-multiple",
};
</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: [
                    {
                        name: '2021',
                        value: 787
                    }, {
                        name: '2022',
                        value: 567
                    },
                ]
            },
            {
                name: "事项二", value: [
                    {
                        name: '2021',
                        value: 256
                    }, {
                        name: '2022',
                        value: 423
                    },
                ]
            },
            {
                name: "事项三", value: [
                    {
                        name: '2021',
                        value: 644
                    }, {
                        name: '2022',
                        value: 567
                    },
                ]
            },
            {
                name: "事项四", value: [
                    {
                        name: '2021',
                        value: 443
                    }, {
                        name: '2022',
                        value: 232
                    },
                ]
            },
        ]
    },
    isRoll: {
        type: Boolean,
        default: false,
    },
    surplus: {
        type: Number,
        default: 4,
    },
    barWidth: {
        type: Number,
        default: 10,
    },
    barColor: {
        type: Array,
        default: () => [['#1268f3', '#08a4fa', '#01ccfe'], ['#56444a', '#9f5052', '#c34c4c'], ['#bf7b15', '#e69419', '#faecd8'], ['#629b45', '#7ac257', '#e1f3d8'], ['#6a5a72', '#909399', '#e9e9eb']]
    },
});


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

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

let _echarts = null;
let interval = null;
const init = function () {
    if (_echarts !== null) {
        _echarts.dispose();
        _echarts = null
    }
    if (interval !== null) {
        clearInterval(interval);
        interval = null;
    }
    let xAxisData = [];
    let seriesData = [];
    props.data.map((item) => {
        xAxisData.push(item.name);
        item.value.forEach((element, index) => {
            if (!seriesData[index]) {
                seriesData[index] = {};
                seriesData[index].name = element.name;
                seriesData[index].value = []
            }
            seriesData[index].value.push(element.value)
        });
    });

    const series = [];
    const legend = [];
    seriesData.forEach((item, index) => {
        legend.push(item.name);
        series.push({
            name: item.name,
            itemStyle: {
                normal: {
                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    barBorderRadius: [5, 5, 0, 0],
                    color: new echarts.graphic.LinearGradient(
                        0,
                        1,
                        0,
                        0,
                        [
                            {
                                offset: 0,
                                color: props.barColor[index][0], // 0% 处的颜色
                            },
                            {
                                offset: 0.6,
                                color: props.barColor[index][1], // 60% 处的颜色
                            },
                            {
                                offset: 1,
                                color: props.barColor[index][2], // 100% 处的颜色
                            },
                        ],
                        false
                    ),
                },
            },
            type: "bar",
            data: item.value,
            barWidth: props.barWidth,
        },)
    });

    _echarts = echarts.init(echartRef.value);
    let option = {
        barWidth: 8,
        tooltip: {
            trigger: "axis",
            axisPointer: {
                type: "shadow",
            },
        },
        legend: {
            data: legend,
            itemWidth: 15,
            itemHeight: 8,
            width: '90%',
            type: 'scroll',
            pageTextStyle: {
                color: '#FFFFFF'
            },
            textStyle: {
                color: '#FFFFFF',
                width: 100,
                overflow: 'truncate'
            }
        },
        grid: {
            top: "15%",
            left: "5%",
            right: "8%",
            bottom: "5%",
            containLabel: true,
        },
        xAxis: {
            nameTextStyle: {
                color: "#fff", // 四个数字分别为上右下左与原位置距离
            },
            splitLine: {
                show: false,
            },
            type: "category",
            boundaryGap: [0, 0.01],
            data: xAxisData,
            axisTick: { show: false },
            axisLine: {
                show: true, // 不显示坐标轴线
            },
            axisLabel: {
                textStyle: {
                    color: "#FFFFFF", //坐标值得具体的颜色
                    fontSize: 13,
                },
            },
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false, // 不显示坐标轴刻度线
            },
            data: seriesData,
            axisLabel: {
                textStyle: {
                    color: "#FFFFFF", //坐标值得具体的颜色
                    fontSize: 13,
                },
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(255,255,255,.3)",
                },
            },
        },
        series: series,
    };

    if (props.isRoll) {
        option.dataZoom = [
            {
                type: "inside", // 内置在坐标系中
                startValue: 0,
                endValue: props.surplus,
            },
        ]

        //自动滚动
        interval = setInterval(() => {
            if (option.dataZoom[0].endValue == xAxisData.length) {
                option.dataZoom[0].endValue = props.surplus;
                option.dataZoom[0].startValue = 0;
            } else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
            }
            _echarts.setOption(option);
        }, 2000);

    }

    _echarts.setOption(option);

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

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

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

defineExpose({
    setEchartsRefresh
});
</script>

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

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

.vsBarMultiple {}
</style>
