【前端echarts】echarts双饼图与easyui列表联动

最新推荐文章于 2024-09-09 21:14:24 发布
最新推荐文章于 2024-09-09 21:14:24 发布
阅读量773 收藏 13
点赞数 11
分类专栏： EasyUI 文章标签： 前端 echarts easyui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/New_hl/article/details/142068164
版权

echarts双饼图与easyui列表联动

包括饼图与列表页联动，基本上无bug

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>echarts双饼图与easyui列表联动</title>
    <base>
    <!-- 引入jQuery -->
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
    <!-- 引入ECharts -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.2/dist/echarts.min.js"></script> -->
    <script src="./echarts.min.js"></script>
    <!-- 下载EasyUI的文件 -->
    <!-- https://www.jeasyui.cn/jeasyui/download/v16.php -->
    <script type="text/javascript" src="./jquery-easyui/jquery.min.js"></script>
    <script type="text/javascript" src="./jquery-easyui/jquery.easyui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="./jquery-easyui/themes/default/easyui.css">
</head>

<body>
    <div class="layout" style="width:100%;height:100%;">
        <div data-options="region:'center'" style="padding:10px;width: 100%; height: 100%;">
            <div id="pieChart" style="width:100%;height:500px;bottom: 15px;"></div>
            <table class="easyui-datagrid" id="datagrid" data-options="singleSelect:true,collapsible:true"></table>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            // 定义参数
            var pieOptionDataList = [
                {
                    titleText: "用户",
                    seriesId: "user",
                    seriesDataValue: "userRatio",
                    seriesDataName: "userName",
                },
                {
                    titleText: "系统",
                    seriesId: "system",
                    seriesDataValue: "systemRatio",
                    seriesDataName: "systemName",
                },
                {
                    titleText: "测试系统",
                    seriesId: "system2",
                    seriesDataValue: "recycleBinSize",
                    seriesDataName: "recycleBinSize",
                },
            ];
            // 原始数据（保存使用）
            var rawData;
            // 当前显示数据（保存使用）
            var dataGrid;

            var pieChart = echarts.init(document.getElementById('pieChart'));

            // 初始 option
            var pieOption = {
                title: [
                    {
                        text: '大标题',
                        left: 'center',
                        top: '1%'
                    }
                ],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                },
                legend: [],
                series: [],
            };
            // 饼图数量
            var pieNum = pieOptionDataList.length;
            pieOptionDataList.forEach(function (pieOptionData, index) {
                pieOption.title[index + 1] = {
                    text: pieOptionData.titleText,
                    left: 100 / pieNum / 2 * (1 + 2 * index) + '%',
                    top: '5%',
                    textAlign: 'center'
                }
                pieOption.legend[index] = {
                    orient: 'vertical',
                    left: (2 + 100 / pieNum) * index + '%',
                    top: '5%',
                    data: []
                }
                pieOption.series[index] = {
                    id: pieOptionData.seriesId,
                    name: pieOptionData.titleText,
                    type: 'pie',
                    radius: '50%',
                    center: [100 / pieNum / 2 * (1 + 2 * index) + '%', '60%'],
                    data: [],
                    selectedMode: 'single', // 允许单个扇区被选中
                    selectedOffset: 10, // 选中时偏移的距离
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            });
            pieChart.showLoading();
            pieChart.setOption(pieOption);

            // 加载数据
            function pieData(cb) {
                var data = {
                    "dataGrid": [
                        {
                            "beginDate": "20240903",
                            "systemName": "A系统",
                            "userName": "A",
                            "totalSize": "330.46",
                            "recycleBinSize": "0.32",
                            "userRatio": "21.42",
                            "systemRatio": "45.34"
                        },
                        {
                            "beginDate": "20240903",
                            "systemName": "A系统",
                            "userName": "A_2",
                            "totalSize": "210.69",
                            "recycleBinSize": "4.39",
                            "userRatio": "13.65",
                            "systemRatio": "13.65"
                        },
                        {
                            "beginDate": "20240903",
                            "systemName": "B系统",
                            "userName": "B",
                            "totalSize": "73.34",
                            "recycleBinSize": "4.03",
                            "userRatio": "4.75",
                            "systemRatio": "4.75"
                        },
                        {
                            "beginDate": "20240903",
                            "systemName": "C系统",
                            "userName": "C",
                            "totalSize": "47.97",
                            "recycleBinSize": "0.00",
                            "userRatio": "3.11",
                            "systemRatio": "3.11"
                        },
                        {
                            "beginDate": "20240903",
                            "systemName": "D系统",
                            "userName": "D",
                            "totalSize": "26.59",
                            "recycleBinSize": "0.00",
                            "userRatio": "1.72",
                            "systemRatio": "1.72"
                        },
                        {
                            "beginDate": "20240903",
                            "systemName": "E系统",
                            "userName": "E",
                            "totalSize": "24.13",
                            "recycleBinSize": "0.01",
                            "userRatio": "1.56",
                            "systemRatio": "1.56"
                        },
                    ],
                }
                cb(data);
                dataGrid = data.dataGrid;
                rawData = data.dataGrid;
                $('#datagrid').datagrid({
                    columns: [[
                        { field: 'beginDate', title: '日期', width: 100 },
                        { field: 'systemName', title: '系统', width: 100 },
                        { field: 'userName', title: '用户', width: 120 },
                        { field: 'totalSize', title: '占用空间(G)', width: 100 },
                        { field: 'recycleBinSize', title: '垃圾回收(G)', width: 100 },
                        { field: 'userRatio', title: '用户占比(%)', width: 100 },
                        { field: 'systemRatio', title: '系统占比(%)', width: 100 },
                    ]],
                    data: dataGrid
                });
            }

            // 加载数据并赋值
            pieData(function (data) {
                pieChart.hideLoading();
                pieOptionDataList.forEach(function (pieOptionData, index) {
                    // 截取数据当扇形和标签的数据
                    pieOption.legend[index].data = data.dataGrid.map(function (item) {
                        return item[pieOptionData.seriesDataName];
                    });
                    // 使用一个对象来累计,避免出现重复的 key
                    var aggregatedData = data.dataGrid.reduce(function (acc, item) {
                        if (acc[item[pieOptionData.seriesDataName]]) {
                            acc[item[pieOptionData.seriesDataName]] += parseFloat(item[pieOptionData.seriesDataValue]);
                        } else {
                            acc[item[pieOptionData.seriesDataName]] = parseFloat(item[pieOptionData.seriesDataValue]);
                        }
                        return acc;
                    }, {});
                    pieOption.series[index].data = Object.keys(aggregatedData).map(function (key) {
                        return {
                            value: aggregatedData[key],
                            name: key,
                            selected: false
                        };
                    });
                });
                pieChart.setOption(pieOption);
            });

            // 监听 ECharts 饼图的点击事件，扇区选中及筛选数据
            pieChart.on('click', function (params) {
                if (params.seriesType === 'pie') {
                    // 防止取消的数据在点击后重新出现
                    var legend = pieChart.getOption().legend;

                    pieOption.legend.forEach(function (legendSelected, index) {
                        legendSelected.selected = legend[index].selected;
                    });

                    // 切换选中状态
                    //第n个饼图，从0开始
                    var seriesIndex = params.seriesIndex;
                    //第n个扇区，从0开始
                    var dataIndex = params.dataIndex;
                    var series = pieOption.series[seriesIndex];
                    var selected = series.data[dataIndex].selected;

                    // 取消所有扇区的选中状态
                    pieOption.series.forEach(function (series) {
                        series.data.forEach(function (data) {
                            data.selected = false;
                        });
                    });

                    // 切换当前点击的扇区的选中状态
                    series.data[dataIndex].selected = !selected;

                    // 更新 EasyUI datagrid 数据
                    var dataGridNew = dataGrid;
                    // 取的是上一次状态，点击展开时，状态为false，点击收起时，状态为true
                    if (!selected) {
                        dataGridNew = rawData.filter(function (row) {
                            return row[pieOptionDataList[seriesIndex].seriesDataName] == params.name;
                        });
                    }

                    // 更新 datagrid
                    $('#datagrid').datagrid('loadData', dataGridNew);
                    // 更新 ECharts 图表
                    pieChart.setOption(pieOption, true);
                }
            });

            // 监听 ECharts 饼图的图例选择事件，更新数据
            pieChart.on('legendselectchanged', function (params) {
                // 数据隐藏删除基础跟随
                dataGrid = rawData;
                if (params.selected) {
                    Object.keys(params.selected).forEach(key => {
                        if (params.selected[key] === false) {
                            const pieIndex = pieChart.getOption().legend.findIndex((legendData) => {
                                return legendData.data.includes(key);
                            })
                            if (pieIndex !== -1) {
                                dataGrid = dataGrid.filter(function (row) {
                                    return row[pieOptionDataList[pieIndex].seriesDataName] !== key;
                                });
                            }
                        }
                    });
                }
                var dataGridNew = dataGrid;
                // 扇区选中时，能自动筛选出扇区
                var series = pieChart.getOption().series;
                series.forEach(function (series, dataIndex) {
                    series.data.forEach(function (data) {
                        // 扇区选中状态为true，且扇区存在于 params.selected 中
                        if (data.selected == true && params.selected[data.name]) {
                            dataGridNew = rawData.filter(function (row) {
                                return row[pieOptionDataList[dataIndex].seriesDataName] === data.name;
                            });
                        }
                    });
                });
                // 更新 datagrid
                $('#datagrid').datagrid('loadData', dataGridNew);
            });
        });
    </script>
</body>
时光匆匆岁月荏苒,转眼我们已不是当年
关注
  • 11
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3Echarts实用的双层饼图
m0_56164131的博客
07-01 245
【代码】Vue3Echarts实用的双层饼图。
echarts双饼图
qq_58280734的博客
01-28 3405
option = { tooltip: { trigger: 'item', formatter: '{a} <br/>{b}: {c} ({d}%)' }, legend: { orient: 'vertical', left: 10, data: ['22℃以上', '18-22℃', '18℃以下', '数据异常', '阀开', '强开', '阀关...
Echarts饼图1.0（双层饼图圆环）
努力的nana
01-19 2720
代码： const sourceData = [ // 内层的数据 { name: '小学', value: 210 }, { name: '初中', value: 240 }, { name: '高中', value: 330 }, { name: '大学', value: 580 } ] const arr =
vue3.0+echarts 嵌套数据的饼图并有联动效果
iphonepl的博客
03-13 620
监听浏览器的大小，动态的改变echarts。2、点击外层的饼图，里层的饼图实时变动。3、始终保持外层饼图有选中的状态。是使echarts不具有响应式。1、默认选中外层的第一个。
echarts饼图怎么在饼图内部显示百分比
m0_72663698的博客
11-20 6205
要在echarts饼图内部显示百分比，您可以通过设置。，我们将标签显示在饼图的内部。，我们定义了标签的显示格式，在上面的示例中，我们在。
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
echarts 3d饼图资源
05-12
总之，这个 "echarts 3d饼图资源" 包含了构建 ECharts 3D 饼图所需的数据和配置，是进行数据可视化的有力工具。通过深入理解和灵活运用这些资源，开发者可以创建出既美观又实用的 3D 数据展示效果，提升数据分析和...
echarts实现3D环装饼图带引导线效果
01-25
**ECharts实现3D环状饼图带引导线效果** ECharts是一款由百度开发的开源JavaScript图表库，它提供丰富的可视化图表类型，适用于各种数据可视化需求。在本项目中，我们将探讨如何使用ECharts实现一个3D环状饼图，并...
echarts 3D饼图组件
09-26
直接引入传入数据即可使用。 import PieChart3D from "@/components/PieChart3D" values={[ { name: "整租", value: 3, color: [5, 140, 198, 1] }, { name: "散租", value: 2, color: [255, 137, 0, 1] } ...
echarts复合饼图，堆叠柱状图
12-08
echarts复合饼图（没有边线），堆叠柱状图，柱状图
Webpack学习笔记
m0_74375748的博客
09-09 882
定义静态模块：指的是编写代码过程中的,html,css,js,图片等固定内容的文件打包：把静态模块内容，压缩，整合，转译等（前端工程化）less/sass转成css代码把ES6+降级成ES5支持多种模块标准语法使用：webpack打包默认出口是dist下的main.js。
TinyWebSever源码逐行注释(五)_ http_conn.cpp
最新发布
qq_39969848的博客
09-09 505
根据状态转移,通过主从状态机封装了http连接类。其中,主状态机在内部调用从状态机,从状态机将处理状态和数据传给主状态机。http_conn.cpp利用一个主从状态机来处理客户端的htttp连接并生成相应的响应。Linux下C++轻量级Web服务器，助力初学者快速实践网络编程，搭建属于自己的服务器.
GoFly企业版里的阿里图标如何增加自定义图标到后台
GoFLy开发者的博客
09-04 553
（3）将生成好的图标复制.js文件放到项目index.html文件中。（1）配置 FontClass/Symbol 前缀为：svgfont-（2）配置 Font Family 为 iconfont。在使用位置的组件，返回图标名称。
Web日志分析工具GoAccess
墨痕诉清风的博客
09-09 1021
GoAccess是一个开源的实时网络日志分析器和交互式查看器，它可以在 *nix系统的终端上运行，也可以通过浏览器运行。它为系统管理员提供了快速而有价值的HTTP统计数据，这些统计数据需要动态的可视化服务器报告。中文网站GoAccess - 中文站 - 可视化 Web 日志分析工具。
标签中的ref属性
qq_40792800的博客
09-04 779
可能存在的情况是，在挂载之前，ref() 函数已经执行，此时获取的引用则是undefined，在挂载之后，Vue 底层会自动找到对应的 ref() 与 经过ref 标记的DOM或组件，并赋值给 Value属性。1、在标签中添加 ref 属性的同时，需要在 脚本中 通过 ref() 函数定义一个容器来放置 给ref属性打上标签的DOM或组件实例，且接收的变量需要 与 标签中的ref 属性值相同。按照Vue2 的情况，此时在父组件中是可以访问到子组件中的数据的，但是通过打印，我们发现什么都没拿到。
JS中const有没有变量提升
ggq53219的博客
09-05 337
在JavaScript中，const关键字用于声明一个只读的常量，其值在初始化后不能被重新赋值。关于变量提升（Hoisting），它是JavaScript中一个重要的概念，指的是无论变量或函数声明在何处，它们都会被“提升”到其所在作用域的最顶部。但是，这个规则不完全适用于const和let声明的变量。
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 664
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
2024年最新微短剧系统重构版，短剧小程序源码开源源码搭建部署
sqq1072的博客
09-09 715
短剧系统的设计旨在提供一个全面、高效和用户友好的平台，以支持短剧内容的创作、分发和盈利。
el-popover弹框自定义位置
weixin_47218354的博客
09-05 339
【代码】el-popover弹框自定义位置。
前端echarts好看的3d立体饼图
01-22
echarts是一款可以轻松创建漂亮可视化图表的前端库，其中的3D立体饼图是一种非常吸引人的图表类型。3D立体饼图通过立体的效果，能够更加直观地呈现数据的占比关系，让数据更具有立体感，更加生动和形象。 echarts中的3D立体饼图不仅可以展示数据的占比情况，还可以通过旋转、缩放等操作，使用户可以更加灵活地查看数据的细节和变化趋势。而且echarts提供了丰富的配色方案和样式配置，用户可以根据自己的需求自定义立体饼图的外观，使其看起来更加美观、清晰。 通过echarts前端库，用户可以轻松地使用JavaScript语言创建3D立体饼图，无需深入学习复杂的图表绘制原理，只需简单的几行代码就可以实现立体饼图的绘制，并且可以在网页上实时展示。这样的便利性和实时性使得echarts的3D立体饼图在数据展示和分析方面有着广泛的应用价值。 总之，echarts的3D立体饼图不仅外观漂亮、直观，而且使用简单、灵活性强，适用于各种数据可视化场景，可以帮助用户更好地展示和理解数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值