<template>
    <div ref="bar_echart"  class="chart_width" :style="{height: `${height}px`}">

    </div>
</template>
<script>
import _ from 'lodash'
import * as echarts from 'echarts'; 

  export default{

    name: "barChart",//单个柱状图组件
    data(){
      return {
        echart:null,//图标实例
        colorList:[],//       
        // datax:[1,2,3,4,5,6,7],//x轴数据
        // datay:[50, 60, 70, 80, 70, 70, 100],//y轴数据
        // color:'#5470C6'
      }
    },

    props:{
      datax:{
        type:Array,
        default:function(){
          return [];
        }
      },//x轴数据
      datay:{
        type:Array,
        default:()=>[]
      },//y轴数据
      color:{
        type:String,
        default:function(){
          return '#5470C6';
        }
      },//柱状图颜色
      height:{
        type:Number,
        default:380
      },
      unit:{
        type:String,
        default:'%'
      },//单位  默认%

      showNuitY:{
        type:Boolean,
        default:true
      },//y轴单位是否显示

      showSplitArea:{
        type:Boolean,
        default:false
      },//y轴单位是否显示

      showTooltip:{
        type:Boolean,
        default:true
      },//是否显示浮窗

      tooltipData:{
        type:Array,
        default:()=>[],
      },//悬浮弹窗的数据

      tooltipFormater:{
        type:Function,
      },
      
      typeName:{
        type:String,
        default:''
      },//标题

      average:{
        type:[String, Number,Array],
        default:'0'
      },//平均分辅助线
      markLineData:{
        type:Array,
        default:()=>[]
      },//平均分辅助线
      isShowMarkLine:{
        type:Boolean,
        default:true
      },//是否显示辅助线

      showMarkPoint:{
        type:Boolean,
        default:false
      },//是否显示气泡  默认不显示气泡

      isClick:{
        type:Boolean,
        default:false
      },//是否需要可以点击柱子事件
      answerValue:{
        type:String,
        default:''
      },//正确答案  与其他柱子显示颜色不同
      unitX:{
        type:String,
        default:''
      },//x轴单位
      fullMark:{
        type:[String,Number],
        default:''
      },//满分
      gridLeft:{
        type:Number,
        default:40
      },
      gridRight:{
        type:Number,
        default:60
      },
      gridTop:{
        type:Number,
        default:20
      },
      fontSize:{//字体大小
        type:[Number,String],
        default:''
      },
      fontColor:{
        type:String,
        default:''
      },
      showDataZoom:{//是否显示滚动条
        type:Boolean,
        default:true
      },
      barMaxWidth:{
        type:Number,
        default:50
      },
      barMinWidth:{
        type:Number,
        default:20
      }
    },
    watch:{
        datay:{
            handler:'LoadEchart',
            deep:true,
        },//数值变化时重新加载图表
        markLineData:{
            handler:'LoadEchart',
            deep:true,
        },//数值变化时重新加载图表
    },
    computed:{
        getCompareAnalysis(){
            return this.$global.getCompareAnalysis()
        },
    },
    created(){
        window.addEventListener('resize', this.handleResize);//创建时增加监听窗口变化事件
    },
    beforeDestroy() {
        // 组件销毁移除监听 防止内存泄漏
        window.removeEventListener('resize', this.handleResize);
    },
    mounted(){
      this.LoadEchart();//初始化图表
    },
    methods:{
        //加载echarts
        LoadEchart() 
        {
            
            if(this.echart)
            {
                this.echart.dispose(); // 销毁之前的实例
            }
            // 定义每个柱子的颜色

            const colors = [];
            const xColors=[];
            // console.log("打印x轴数据",this.datax);
            const rightAnswerValue = this.answerValue || '';//正确答案
            for (let i = 0; i < this.datax.length; i++) {
                if(this.color){
                    colors.push(this.color);
                }else{
                    const colorArr= this.$global.getScorePerformanceAnalysis()
                    colors.push(colorArr[i]);
                }
                xColors.push('#666666');
            }

            // 初始化 xAxisLabels 数组
            // this.xAxisLabels = this.datax.map((label, index) => ({
            //     value: label,
            //     textStyle: {
            //         color: xColors[index],
            //         fontSize: 14
            //     }
            // }));
            const markPointColor=this.color;
            //devicePixelRatio: 2  2表示每个逻辑像素对应 2个物理像素。这会进一步提高图表的清晰度，适用于更高分辨率的屏幕  解决高分辨率显示器文字模糊的问题
            this.echart=echarts.init(this.$refs.bar_echart,{devicePixelRatio: 2});//获取echarts容器  如果组件同一个页面多处使用 这里不能用id获取实例
            // 图表宽度
            let totalWidth = this.$refs.bar_echart.clientWidth;
            // console.log(totalWidth, '>>>>>>>>>>>totalWidth')
            //计算每个柱的宽度 （图表宽度-左右边距）/ x轴数据长度
            let singleSeriesWidth = Math.ceil((totalWidth - 140) / this.datax.length);
            // console.log(singleSeriesWidth, '>>>>>>>>>>>singleSeriesWidth')

            const unit = this.unit;
            // console.log("打印datax", this.datax);
            // console.log("打印datay", this.datay);

            //计算最大值和最小值
            const datay = this.datay.filter(num => !isNaN(num))
            const maxValue=Math.max(...datay);
            const minValue=Math.min(...datay);
            let average = 0, markLineData = [],maxAverage = [];
            if(Object.prototype.toString.call(this.average) === '[object Array]'){
                average = this.average;
                this.average.forEach(item=>{
                    const itemAverage = parseFloat(item) || 0
                    if(item > 0) {
                        markLineData.push({symbol:'circle',type: 'value', name: '', yAxis: itemAverage})
                    }
                })
                maxAverage = average.length ? Math.max(...average) : 0;
            }else if(this.markLineData && this.markLineData.length){
                average = [];
                this.markLineData.forEach((item,index)=>{
                    const itemAverage = parseFloat(item.value) || 0
                    average.push(itemAverage)
                    if(item.isShow){
                        markLineData.push({symbol:'circle',type: 'value', name: '', yAxis: itemAverage,lineStyle: {color: this.getCompareAnalysis[index]},label:{color:this.getCompareAnalysis[index]}})
                    }
                })
                maxAverage = average.length ? Math.max(...average) : 0;
            }else{
                average=parseFloat(this.average) || 0;
                maxAverage = parseFloat(this.average) || 0;
                markLineData = average!=0?[{symbol:'circle',type: 'value', name: '', yAxis: average}]:[];
            }
            
            // console.log("打印最大值", maxValue);
            // console.log("打印最小值", minValue);
            // console.log("打印平均分", average);
            const nearestValue = this.GetMaxValue(maxValue);//向上取整为最接近10的数字
            // console.log("打印最大值的",nearestValue)
            let yAxisUnit=this.showNuitY && this.unit == '%' ? this.unit : '';
            let splitArea=this.showSplitArea?{ "show": true, areaStyle: {"color": ["#fafafa", "#ffffff"]}}:{}
            // 交替颜色
            const typeName=this.typeName || "";
            const fullMark = this.fullMark;
            // console.log("打印正确答案的",rightAnswerValue);
            // console.log("打印满分",fullMark);

            const barMinWidth = 30; // 最小柱子宽度 加上两边间距的宽度
            const dataZoomNum = Math.floor((totalWidth - 140) / (barMinWidth * 1));// 当前区域内可显示的柱子的数量
            const dataZoomEnd = Math.floor((100 / this.datax.length) * dataZoomNum); // 当前区域内可显示柱子的占比
            let dataZoom = {
                start: 0, //默认为0
                end: dataZoomEnd, //  默认为100（重点）
                type: 'slider',
                show: true,
                // borderColor: 'red', // 滑动条边框颜色
                borderColor: 'transparent',// 滑动条背景颜色
                borderCap: 'round',
                xAxisIndex: [0],
                height: 8, //组件高度
                left: 20, //左边的距离
                right: 20, //右边的距离
                bottom: 0, //右边的距离
                fillerColor: 'transparent',// 滑动条选中区域颜色
                zoomLock: true,//是否锁定选择区域（或叫做数据窗口）的大小。
                handleSize: '0',
                handleStyle: {
                    color: '#b8b8b8',// 滑动条手柄颜色
                    borderWidth: 2
                },
                backgroundColor: 'transparent', //两边未选中的滑动条区域的颜色
                showDataShadow: false, //是否显示数据阴影 默认auto
                showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
                filterMode: 'filter'

            };//设置滚动条的样式
          //网格线设置隔行背景色
            let option= {
                tooltip: {
                    // trigger: 'axis',
                    // axisPointer: {
                    //     type: 'cross',
                    //     crossStyle: {
                    //         color: '#999'
                    //     }
                    // },
                    show: this.showTooltip,
                    trigger: this.showTooltip?'item':'axis',
                    triggerOn: "mousemove",
                    renderModel:'html',//使用html渲染模式
                    confine:true,//是否将 tooltip 框限制在图表的区域内。
                    // extraCssText: 'border-radius: 4px;padding:5px 0px 5px 5px;white-space:normal;word-warp:break-word;max-width: 400px;', // 设置最大宽度和高度
                    borderColor: "#fff",

                    formatter:this.tooltipFormater ? this.tooltipFormater : function (params) {
                        const {name,seriesName,value,marker} = params
                        return name + '<br/>' + marker + seriesName + `<span style=\"margin-left:10px;\">${value}</span>` ;
                    },

                    /*
                    formatter: (params)=>{
                        let tooltip=`<div class='tooltip_content'>`;
                        let title=params?.name || params[0]?.name;
                        let value=params?.value || params[0]?.value;//得分率
                        let unit=this.unit;
                        tooltip += `<div class='tooltip_title'>${title}</div>`;
                        tooltip += `<div class='tooltip_student'>${typeName}：${value}${unit}</div>`;
                        // console.log("打印this.tooltipData",this.tooltipData);
                        if(this.tooltipData.length>0)
                        {
                            let list=this.tooltipData[params[0].dataIndex].list;
                      
                            for(let i=0;i<list.length;i++)
                            {
                                let item = list[i];
                                tooltip += `<div class='tooltip_student'>${item.name}：${item.value}</div>`;
                            }
                        }
                        tooltip+=`</div>`;
                        return tooltip;
                    }
                    */
                },
                // graphic:{
                //     id: 'highlight-box',
                //     type: 'rect',
                //     shape: {
                //         x: 2, // 根据需要调整X坐标
                //         y: 60,
                //         width: 100, // 根据需要调整宽度
                //         height: containerHeight,  // 高度为图表的高度
                //     },
                //     style: {
                //         fill:'red' // 设置背景色
                //     },
                // },
               
                grid: {
                    left: this.gridLeft,
                    right: this.gridRight,
                    top: this.gridTop,
                    bottom: 0,
                    containLabel: true, //用于控制网格区域是否包含坐标轴的标签  true 可以确保所有标签都能完整显示，不会被裁剪。
                },
                dataZoom: this.showDataZoom ?  (singleSeriesWidth < barMinWidth ?  dataZoom : null) :  null,
                xAxis: [
                    {
                        type: 'category',
                        data: this.datax,

                        axisPointer: {
                            show:true,
                            label:{
                                show:false
                            },
                            type: 'shadow',
                            shadowStyle:{
                                color:'rgba(46, 100, 250,0.05)'
                            },
                        },
                        axisLabel: {
                            interval: 0, // 确保所有刻度标签都显示
                            fontWeight: 400,
                            rotate: singleSeriesWidth < 80 ? 45 : 0,
                            formatter:function(value) {
                                // console.log(value)
                                
                                // 文字大小设置为14px  按14算
                                const valueWidth = value.length * 14;
                                // console.log("文字宽度",valueWidth);
                                // console.log("单系列宽度",singleSeriesWidth);
                                if(valueWidth > singleSeriesWidth) {
                                    if (singleSeriesWidth < 100) {
                                        if(valueWidth > 80) {
                                            // let maxLength = Math.floor(80 / 14) - 1;
                                            return value.slice(0, 2) + '...' + value.slice(-3)
                                        } else {
                                            return value;
                                        }
                                    } else {
                                        let maxLength = Math.floor(singleSeriesWidth / 14) - 1;
                                        return value.slice(0, maxLength) + '...';
                                    }
                                } else {
                                    return value;
                                }
                            },
                            color: this.fontColor || '#666666',//y轴文字颜色
                            // width: 80, // 控制每个标签最大宽度，超出则截断
                            // overflow: 'truncate', // 超出宽度显示省略号
                            // ellipsis: '...', // 自定义省略符号
                            // margin: 20,
                            fontSize: this.fontSize?this.fontSize:14,
                            // rich: {
                            //     // 定义省略样式（可选）
                            //     text: {
                            //         whiteSpace: 'nowrap',
                            //         overflow: 'hidden',
                            //         textOverflow: 'ellipsis',
                            //         display: 'inline-block',
                            //         width: 80, // 与上面 width 一致
                            //         fontSize:14,
                            //     },
                            // },
                            // formatter: '{text|{value}}' + this.unitX, // 使用 rich 样式渲染
                        }
                       
                    }
                ],
                yAxis:{
                    type: 'value',
                    // name: '进度(%)',
                    axisLabel: {
                        color: this.fontColor || '#666666',//y轴文字颜色
                        fontSize: this.fontSize?this.fontSize:14,
                        formatter: '{value}'+yAxisUnit, // 添加 % 符号
                    },
                    max: maxAverage > nearestValue ? maxAverage : nearestValue,//固定y轴最高值为最大值的向上取整
                    // splitNumber: 10, // 设置刻度线分段数
                    // interval: 0, // 确保所有刻度标签都显示
                    // splitLine: {
                    //     show: true,
                    //         lineStyle: {
                    //         color: "#E4E7ED",
                    //         type: "solid",
                    //     },
                    //     interval: (index, value) => {
                    //         // 隐藏最大的刻度线对应的网格线
                    //         return value !== nearestValue;
                    //     }
                    // }, // 横向刻度线样式设置
                    splitArea: {
                        show: true,
                        areaStyle: {
                            color: ["#fafafa", "#ffffff"], // 交替颜色
                        },
                    }, //网格线设置隔行背景色
                },
                series: [
                    {
                        name: '阅卷进度',
                        type: 'bar',
                        // showBackground: true,
                        
                        backgroundStyle: {

                            color: 'red'
                        },//柱子的背景色
                        // barMinHeight:this.isClick?30:0,//柱子最小高度
                        barMaxWidth: this.barMaxWidth, // 设置柱状图的最大宽度
                        barMinWidth: this.barMinWidth,
                        // barWidth: '44px', // 设置柱状图的宽度，可以是百分比或具体数值
                        itemStyle: {
                            color: function(params) {
                                // console.log(params)
                                if(params.name == rightAnswerValue || params.name == fullMark){//正确答案 或主观题满分
                                    return '#3BA272';
                                }if(params.name == '0'){//主观题0分
                                    return '#EE6666';//0分显示红色
                                }else{
                                    // 使用颜色数组中的颜色
                                    return colors[params.dataIndex];
                                }
                            },
                            // color: (params) => {
                            //     const value = params.value;
                            //     if (value === maxValue) {
                            //         return 'red'; // 最大值颜色
                            //     } else if (value === minValue) {
                            //         return 'green'; // 最小值颜色
                            //     } else {
                            //         return 'red'; // 默认颜色
                            //     }
                            // },
                            

                        },
                        // tooltip: {
                        //     valueFormatter: function (value) {
                        //         // console.log(value);
                        //         return value +  unit;
                        //     }
                        // },
                        // label: { // 显示柱子内部的数值
                        //     show: true,
                        //     position: 'top', // 柱子内部显示
                            
                        //     formatter: '{c}'+this.unit, // 显示的格式
                        //     color:'#666666',
                            
                        //     fontSize: 14
                        // },
                        // emphasis: {
                        //     itemStyle: {
                        //         color: '#2E64FA' // 设置选中时的颜色
                        //     }
                        // },
                        data: this.datay.map(value => ({
                            value: value,
                            label: {
                                // show: this.showMarkPoint ? (value === 0 || value === maxValue || value === minValue) : singleSeriesWidth > 26,//数值为0不显示
                                show: true,//数值为0不显示
                                position: "top",
                                fontSize: this.fontSize?this.fontSize:14,
                                formatter: '{c}'+this.unit, // 显示的格式
                                color:"#666"
                                // color: (value == maxValue)? "#3BA272": (value == minValue)? "#EE6666": "#666"
                            },
                        })),
                        markLine: {
                            // symbol:average==0?['none', 'none']:['circle','arrow'],//设置标记线样式  圆形'circle', 矩形'rect', 圆角矩形'roundRect', 三角形'triangle', 菱形'diamond', 图钉行'pin', 箭头行'arrow', 'none'
                            symbolSize:[8,8],//设置标记线样式大小 宽高
                            symbolOffset: [
                                [0, 0],    // 起始标记偏移
                                [0, 0]  // 结束标记偏移
                            ],//偏移量设置
                            label:{
                                // formatter: '{b}: {c}',
                                color:'#F56C6C',
                                fontSize: this.fontSize?this.fontSize:15,
                                formatter: '{c}'+this.unit,
                                position: 'end',//'start', 'middle', 'end', 'insideStartTop', 'insideStartBottom', 'insideMiddleTop', 'insideMiddleBottom', 'insideEndTop', 'insideEndBottom'
                                // distance:[-10,-40],//标签与线之间的间距。如果是数组，第一项为横向间距，第二项为纵向间距。如果是数字，则表示横向纵向使用相同的间距
                            },
                            tooltip: {
                               formatter:{},
                            },
                            data: markLineData,
                            lineStyle: this?.markLineData?.length?null:{
                                color: '#F56C6C'
                            },//辅助线的颜色
                        
                        },//辅助线
                        // markPoint: this.showMarkPoint?{
                        //     symbolSize:55,//气泡大小
                        //     data: [
                        //         {
                        //             type: "max",
                        //             name: "最大值",
                        //             label: { color: "#fff" },
                        //         },
                        //         {
                        //             type: "min",
                        //             name: "最小值",
                        //             label: { color: "#fff" },
                        //         },
                        //     ],
                        //     label: {
                        //         show: true,
                        //         fontSize:8,
                        //         formatter: '{c}'+this.unit, // 显示的格式
                        //     },
                        //     itemStyle: {
                        //         color: markPointColor,
                        //     }
                        // }:undefined,//是否显示气泡  
                        markPoint: this.showMarkPoint ? {
                            data: this.datay.map((value, index) => {
                                // console.log("index",index);
                                if (value == maxValue || value == minValue) {
                                    return {
                                        name: value == maxValue ? '最大值' : '最小值',
                                        coord: [this.datax[index], value],
                                        symbolSize: 65,
                                        label: {
                                            show: true,
                                            position: 'inside',
                                            color: '#fff',
                                            formatter: value + this.unit
                                        },
                                        itemStyle: {
                                            color: value === maxValue ?markPointColor : markPointColor
                                        }
                                    };
                                }
                                return null;
                            }).filter(item => item !== null), // 过滤掉非 max/min 的 null 值
                            label: {
                                show: true,
                                fontSize: 10,
                                fontWeight: 'bold',
                                // formatter: '{c}' + this.unit
                            }
                        } : undefined    
                    },
                ]
            };
            // 设置 rich 样式
            // this.xAxisLabels.forEach((label, index) => {
            //     option.xAxis[0].axisLabel.rich[`a${index}`] = label.textStyle;
            // });
            this.echart.setOption(option);

            //是否可以点击
            if(this.isClick)
            {
               
                const xAxisDataLength = this.datax.length;//柱子的数量
                // 获取grid区域偏移量
                const gridRect = this.echart.getModel().getComponent('grid').coordinateSystem.getRect();
                let singleLabelWidth = gridRect.width / xAxisDataLength;//单个x轴系列的宽度
                if(singleSeriesWidth < barMinWidth)
                {
                    singleLabelWidth=barMinWidth;
                }
                this.echart.on('click',(params)=>{
                    // console.log("打印params",params);
                    if (params.seriesType === 'bar') 
                    {
                        
                        // 更新 xAxisLabels 数组
                        // this.xAxisLabels = this.datax.map((label, index) => ({
                        //     value: label,
                        //     textStyle: {
                        //         color: index === params.dataIndex ? '#2E64FA' : xColors[index],
                        //         fontSize: 14
                        //     }
                        // }));
                        // 设置 rich 样式
                        // this.xAxisLabels.forEach((label, index) => {
                        //     this.echart.setOption({
                        //         xAxis: [
                        //             {
                        //                 axisLabel: {
                        //                     rich: {
                        //                         [`a${index}`]: label.textStyle
                        //                     }
                        //                 }
                        //             }
                        //         ]
                        //     });
                        // });
                        this.echart.setOption({
                            series: [
                                {
                                    itemStyle: {
                                        color: function(params) {
                                            if(params.name == rightAnswerValue || params.name == fullMark){//正确答案
                                                return '#3BA272';
                                            }
                                            else if(params.name == '0'){//主观题0分
                                                return '#EE6666';//0分显示红色
                                            }
                                            else{
                                                return colors[params.dataIndex];
                                            }
                                        }
                                    }
                                }
                            ]
                        });
                        
                        let pixelPosition= this.echart.convertToPixel({ xAxisIndex: 0 }, params.name);
                        // console.log("pixelPosition",pixelPosition);
                        this.echart.setOption({
                            graphic:{
                                id: 'highlight-box',
                                type: 'rect',
                                shape: {
                                    x: pixelPosition - singleLabelWidth/2, // 根据需要调整X坐标
                                    y: gridRect.y,//
                                    width: singleLabelWidth, // 根据需要调整宽度
                                    height: gridRect.height // 
                                },
                                style: {
                                    fill:params.color+'30' // 设置背景色 柱子颜色的30%
                                },
                            },
                        });
                        // console.log(params);
                        let index=params.dataIndex;
                        let xName=params.name;
                        this.$emit('HandleChartClick',index,xName);
                        // 处理点击事件的逻辑
                        // this.HandleBarClick(paintingId);
                    }
                        
                })
                let defaultPixelPosition= this.echart.convertToPixel({ xAxisIndex: 0 }, this.datax[0]);
                this.echart.setOption({
                    graphic: {
                        id: "highlight-box",
                        type: "rect",
                        shape: {
                            x: defaultPixelPosition - singleLabelWidth/2, // 根据需要调整X坐标 40 是 left 的偏移量
                            y: gridRect.y, //20是top的偏移量
                            width:singleLabelWidth, // 根据需要调整宽度 80是x上面减去的2倍
                            height: gridRect.height, // 40 是 top 和 bottom 的偏移量
                        },
                        style: {
                            fill: "rgba(84,112,198,0.1)", // 设置背景色
                        },
                    },
                });
            }

            this.echart.on('dataZoom',(event)=>{
                console.log('触发渲染了---')
                 this.echart.setOption(
                    {
                        ...option,
                        dataZoom: this.showDataZoom ? 
                            (singleSeriesWidth < barMinWidth ? 
                                {
                                    ...dataZoom,
                                    start: event?.batch ? event?.batch[0].start : event?.start,
                                    end:  event?.batch ? event?.batch[0].end : event?.end,

                                } : 
                                null) : 
                            null,
                    }
                );
            })
        },

        //获取最大值  计算规则  
        GetMaxValue(value)
        {
            const thresholdMap =[
                {
                    maxThreshold:0.3,//最大阈值0-0.6
                    bound:0.3,//边界值
                },
                {
                    maxThreshold:0.6,//最大阈值0-0.6
                    bound:0.6,//边界值
                },
                {
                    maxThreshold:1,//最大阈值 0.6 - 1
                    bound:1,//边界值
                },
                {
                    maxThreshold:1.5,//最大阈值 0.6 - 1
                    bound:1.5,//边界值
                },
                {
                    maxThreshold:2,//最大阈值 
                    bound:2,//边界值
                },
                {
                    maxThreshold:4,//最大阈值
                    bound:4,//边界值
                },
                {
                    maxThreshold:8,//最大阈值
                    bound:8,//边界值
                },
                {
                    maxThreshold:10,//最大阈值
                    bound:10,//边界值
                },
                {
                    maxThreshold:40,//最大阈值
                    bound:40,//边界值
                },
                {
                    maxThreshold:50,//最大阈值
                    bound:50,//边界值
                },
                {
                    maxThreshold:60,//最大阈值
                    bound:60,//边界值
                },
                {
                    maxThreshold:70,//最大阈值
                    bound:70,//边界值
                },
                {
                    maxThreshold:80,//最大阈值
                    bound:80,//边界值
                },
                {
                    maxThreshold:90,//最大阈值
                    bound:90,//边界值
                },
                {
                    maxThreshold:100,//最大阈值
                    bound:100,//边界值
                },
                {
                    maxThreshold:120,//最大阈值
                    bound:120,//边界值
                },
                {
                    maxThreshold:150,//最大阈值
                    bound:150,//边界值
                },
                {
                    maxThreshold:180,//最大阈值
                    bound:180,//边界值
                },
                {
                    maxThreshold:200,//最大阈值
                    bound:200,//边界值
                },
                {
                    maxThreshold:250,//最大阈值
                    bound:250,//边界值
                },
                {
                    maxThreshold:200,//最大阈值
                    bound:200,//边界值
                },
                {
                    maxThreshold:300,//最大阈值
                    bound:300,//边界值
                },
                {
                    maxThreshold:350,//最大阈值
                    bound:350,//边界值
                },
                {
                    maxThreshold:400,//最大阈值
                    bound:400,//边界值
                },
                {
                    maxThreshold:450,//最大阈值
                    bound:450,//边界值
                },
                {
                    maxThreshold:500,//最大阈值
                    bound:500,//边界值
                },
                {
                    maxThreshold:600,//最大阈值
                    bound:600,//边界值
                },
                {
                    maxThreshold:700,//最大阈值
                    bound:700,//边界值
                },
            ];//配置区间规则
            //查找匹配的边界值
            const matchedRule = thresholdMap.find(({ maxThreshold }) => value == maxThreshold || value < maxThreshold);

            // 处理超过阈值的情况（≥5）
            const bound = matchedRule 
            ? matchedRule.bound 
            : Math.ceil((value) / 10) * 10;
            return  bound;

        },
        // 处理点击事件
        HandleBarClick(paintingId)
        {
            // console.log("点击了柱状图",paintingId);
            this.$emit('HandleBarClick',paintingId);
        },



        //更新颜色
        UpdateColors()
        {
            const newColors = ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0', '#9966FF', '#FF9F40', '#FF6384'];
             // 更新 series 中的 itemStyle.color
            this.echart.setOption({
                series: [
                    {
                        itemStyle: {
                            color: function(params) {
                                return newColors[params.dataIndex];
                            }
                        }
                    }
                ]
            });
        },

        // 监听窗口大小变化，重新计算表格高度 使用节流防止频繁改变窗口大小导致计算量过大而页面卡顿
        handleResize: _.throttle(function() {
            
            this.$nextTick(() => {
               
                this.LoadEchart();
                
            });
            
        }, 500), // 节流 500 毫秒内最多执行一次
    }
  }
  </script>
<style lang="scss" scoped>
.chart_width {
  width: 100%;
  height: 380px; // 设置图表高度
}
</style>