【无标题】

最新推荐文章于 2024-10-09 22:27:58 发布

weixin_42462721

最新推荐文章于 2024-10-09 22:27:58 发布

阅读量432

点赞数

分类专栏： JS 文章标签： jquery javascript echarts

本文链接：https://blog.csdn.net/weixin_42462721/article/details/121678041

版权

JS 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

本文详细介绍如何使用ECharts库创建一个包含未反馈和已反馈数据的堆叠双柱柱状图，展示实时与回溯数据的区别，通过实例代码详细讲解了tooltip和formatter配置，以及如何利用鼠标悬停触发数据高亮。

摘要由CSDN通过智能技术生成

echarts堆叠双柱柱状图

			let option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: "cross",
                            label: {
                                formatter: function (params) {
                                    if (params.seriesData.length === 0) {
                                        window.mouseCurValue = params.value;
                                    }
                                }
                            }
                        },
                        formatter: function (params) {
                            let res = "",
                                sum = 0;
                            for (let i = 0; i < params.length; i++) {
                                let series = params[i];
                                sum += Number(series.data);
                                if (sum >= window.mouseCurValue) {
                                    res = series.axisValue + "<br/>" + series.marker + series.seriesName + ":" + series.data + "<br/>";
                                    break;
                                }
                            }
                            return res;
                        },
                    },
                    legend: {
                        // y: 'top', //延Y轴居中
                        x: 'right', //居右显示
                    },
                    grid: {
                        left: '4%',
                        right: '4%',
                        bottom: '50',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: {
                            length: 30
                        },
                        position: 'bottom',
                        offset: 20,
                        data: xData
                    }, {
                        type: 'category',
                        data: xAxisData,
                        position: 'bottom',
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [{
                            name: '未反馈',
                            type: 'bar',
                            stack: 'realTime', //未反馈 实时
                            emphasis: {
                                focus: 'series'
                            },
                            barWidth: '25',
                            data: noRealTime
                        },
                        {
                            name: '已反馈',
                            type: 'bar',
                            stack: 'realTime', // 已反馈 实时
                            emphasis: {
                                focus: 'series'
                            },
                            barWidth: '25',
                            data: returnRealTime
                        },
                        {
                            name: '未反馈',
                            type: 'bar',
                            stack: 'back', // 未反馈 回溯
                            emphasis: {
                                focus: 'series'
                            },
                            data: noBack
                        },
                        {
                            name: '已反馈',
                            type: 'bar',
                            stack: 'back', //已反馈 回溯
                            emphasis: {
                                focus: 'series'
                            },
                            data: returnBack
                        }
                    ],
                    dataZoom: [{ //滑块
                        height: '20',
                        id: 'dataZoomX',
                        type: 'slider',
                        start: 1,
                        end: xData.length >= 8 ? Math.floor(8 / xData.length * 100) : 100,
                        filterMode: 'filter'
                    }]
                };