<template>
    <div id="barChartId" style="width:100vw;height:900px;margin: 0 auto"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { defineProps, reactive, watch, nextTick, onUnmounted } from 'vue';
const props = defineProps({
    tableData: []
})

const state = reactive({
    exportLoading: false,
    dataSource: [],
    echartInstance: undefined
})
watch(() => props.tableData,
    (val) => {
        state.dataSource = val
        nextTick(() => {
            renderEchartBar()
        })
    }, {
    deep: true,
    immediate: true
})
function renderEchartBar() {
    // 基于准备好的dom，初始化echarts实例
    const domInstance=document.getElementById('barChartId')
    if(domInstance){
        domInstance.removeAttribute('_echarts_instance_')
    }
    else{
        return 
    }
    const myChart = echarts.init(domInstance);
    const option = {
        title: {
            text: 'csdn 质量分柱状图 点击跳转到对应的文章'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter'
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            
        },
        xAxis: {
            type: 'category',
            data: state.dataSource.map(item => item.postTime)
        },
        yAxis: {
            type: 'value'
        },
        grid: {
            x: 60,
            x2: 100
        },
        tooltip: {
            formatter: function (params) {
                let findItem = state.dataSource.find(item => {
                    return item.postTime == params.name
                })
                if (!findItem) {

                    return ''
                }
                return `<span style='color:blue'>-<span> 博客标题：${findItem.title}  <br>
                <span style='color:green'>-<span> 博客质量：${params.value} <br>
                <span style='color:red'>-<span> 博客建议：${findItem.message}<br>
                <span style='color:blue'>-<span> 博客地址：${findItem.url}<br>
                <span style='color:blue'>-<span> 发文时间：${params.name}<br>
               `
            },
        },
        series: [
            {
                data: state.dataSource.map(item => item.score),
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                label: { //柱体上显示数值
                    show: true,//开启显示
                    position: 'center',//在上方显示
                    textStyle: {//数值样式
                        fontSize: '2px',
                        color: 'blue'
                    }
                },
                markPoint: {
                    data: [
                        { type: 'max', name: '最高分' },
                        { type: 'min', name: '最低分' }
                    ]
                },
                markLine: {
                    itemStyle: {
                        normal: {
                            lineStyle:
                            {
                                type: 'dotted',
                            },
                            label:
                            {
                                show: true,
                                position: 'middle',
                                color: 'red',
                                lineHeight: 35,
                                backgroundColor: 'rgba(255,255,255.7)',
                                formatter: (params) => {
                                    return params.name + ":" + params.value
                                }
                            }
                        }
                    },
                    data: [
                        {
                            type: 'average',
                            name: '平均分'
                        }]
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    myChart.on('click', function (params) {
        const findItem = state.dataSource.find(item => {
            return item.postTime == params.name
        })
        if (params.name) {
            window.open(findItem.url, '_blank')
        }
    });
    window.onresize = myChart.resize;
}

onUnmounted(() => {
    window.onresize = null
})
</script>