echarts饼图与表单联动

最新推荐文章于 2024-07-20 10:10:38 发布
最新推荐文章于 2024-07-20 10:10:38 发布
阅读量7.5k 收藏 26
点赞数 1
分类专栏： echarts 文章标签： echarts与饼图联动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gxl___/article/details/78973850
版权


最近在学习echarts，做了一个饼图和表单数据联动的案例。


当鼠标移入饼图的时候，表单对应的区域会变色，离开变回原样。并且表单增加、删除或修改数据之后饼状图对应变化。


先放效果图~



无操作的样子






鼠标移入的样子






当右边进行编辑删除，或者新增来源的时候饼状图响应的变化



下面上代码



<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>GXL</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="GXL">
    <meta name="description" content="GXL">

    <link rel="shortcut icon" href="${ctx}/static/img/favicon.ico">
    <link rel="stylesheet" href="${ctx}/static/layui_v2/css/layui.css">

    <link rel="stylesheet" href="${ctx}/static/css/global.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/common.css" media="all">
    <link rel="stylesheet" type="text/css" href="${ctx}/static/css/personal.css" media="all">
    <link rel="stylesheet" href="${ctx}/static/css/main.css">

    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_9h680jcse4620529.css">

    <script src="${ctx}/static/layui_v2/layui.js"></script>

    <script src="${ctx}/static/js/jquery-1.8.3.js"></script>
 

    <script type="text/javascript" src="${ctx}/static/echarts/echarts.min.js" charset="utf-8"></script>
    <script
最低0.47元/天 解锁文章
郭大仁
关注
  • 1
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ECharts 报表事件联动系列三：柱状图，饼状图实现联动
dianmie4090的博客
05-19 311
源码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ECharts</title> <script ...
Echarts饼状图和数据列表联动
shenzhou_yh的博客
04-22 4339
实现效果 即点击饼状图的具体区域，实现对数据列表的筛选展示（筛选条件不进行叠加） 因为在表单中存在饼状图的筛选字段，所以说只需要通过点击事件将筛选值填充到表单中，进行提交即可 myChart1.on('click', function (params) { var showName = params.name; ...
vue 使用Echarts实现一个折线图，或者饼状图，视图表格
weixin_56718509的博客
04-08 1406
先看官方文档 ，地址：Examples - Apache ECharts 一定要会看文档，下面咱们实现一个为例子： 看文档：第一步先下载依赖 npm install echarts --save 看文档：第二步引入 额(⊙o⊙)…我说一下需要注意的点吧，请看重点： 先引入，不建议在全局引用， <!--HTML的代码--><!--宽高自己改的哈，这是我写好的代码 我需要600 × 260的 你们看着改--> <div ref="Ref...
C#+layui+echarts实现动态生成折线图
最新发布
路飞船长的博客
07-20 1274
C#+layui+echarts实现动态生成折线图。
echarts的饼图和地图的联动实现代码
08-03
echarts的饼图和地图联动实现代码，自己手动写的
echarts嵌套饼图联动实现
PinkCoder
04-03 7329
echarts嵌套饼图联动实现 效果解释：当点击内部饼图时，外环饼图会跟随内部选择的饼图变化 效果图： 代码： &lt;html&gt; &lt;head&gt; &lt;title&gt;嵌套饼图联动&lt;/title&gt; &lt;/head&gt; &lt;script type="text/javascript" src="js/echarts.min.j
Echarts饼图 & Table数据联动
weixin_52281567的博客
11-11 2358
<template> <div> <div id="myChart":style="{width: '1000px', height: '400px'}"></div> <el-table :data="chartData"style="width:420px; margin-left: 300px"class="jk-table":row-style="TableRowStyle"> ...
echarts中的饼状图与vue中的table表格两者结合，实现数据的展示
weixin_46659028的博客
06-12 2598
vue中el-table表格和echarts饼状图两者结合，实现数据的渲染 <template> <div class="all" display:flex;align-items:center;> <h4>问题来源</h4> <el-table :data="projectNum" style="width:300px" class="jk-table"> <el-table-column prop="prj
echarts饼状图表
weixin_43353869的博客
11-16 246
$(function () { $("#jqGrid").jqGrid('clearGridData'); //清空表格 $("#jqGrid").jqGrid({ // url: '/gdjt/yw/revueneExpenditure/list', url:'/gdjt/operCost/getListPage?limit=10&page=1', datatype: "json", postData:{
实现中国-市-县联动地图echartsChinaMap
11-08
EasyUI提供了各种组件，如对话框、表单、菜单等，可以方便地与ECharts地图进行集成，创建出功能完善的Web应用。 为了实现这样的地图，开发者需要掌握JavaScript、HTML和CSS的基础知识，同时对ECharts API有一定的...
echarts折线图+饼图双图联动示例
07-15
echarts折线图+饼图双图联动示例
Echarts地图与图表联动
10-20
使用Echarts实现地图与图表的联动。这里的效果为点击美国的某个州，下面就会对应的刷新该州与其他州人口的对比饼图。全网首发，独此一家。
react-antd-echarts-master.zip
09-11
6. 集成Ant Design：利用Ant Design的表单组件收集用户输入，或展示复杂的数据表格，与ECharts图表形成数据联动。 通过这个项目，开发者可以学习到如何将React的灵活性、Ant Design的UI一致性以及ECharts的可视化...
Echarts作图之饼状图联动
weixin_30364325的博客
10-27 337
Echarts版本：2.2.7 具体思路，通过对饼状图对象注册ecConfig.EVENT.PIE_SELECTED事件，对饼状图点击的块进行判断，根据需求改变series中的对象以及对象中的数据，从而进行改变饼状图的层的展示，如下图所示（数据来自官方网站），点击同心圆最里层的不同部分会显示不同的数据 代码如下： <!DOCTYPE html> <html>...
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表)
wqqstudy的博客
05-22 2426
ECharts的多图表联动(柱状图联动图表,饼图与柱状图的联动图表) 利用某学院2019年和2020年的专业招生情况绘制柱状图联动图表； 利用某大学各专业2016-2020年的招生情况绘制饼图与柱状图的联动图表；
Echarts绘制图表
weixin_44541467的博客
05-08 1195
在碰到需要分析数据并展现的项目的时候，用图表是一个非常好的方法。而Echarts就是一个专业制图的插件，能够轻松的制作出优质的图表。 这里我用学生成绩来制作三种常用的图表（饼状图、柱状图、折线图）。 例： 上图主要由A：提示框组件、B：图例组件、C：标题组件、D：系列列表四个组成。 1、提示框组件：tooltip: { trigger: ...
vue3 | 数据可视化实战echarts图表柱状图和饼图的联动
weixin_42974827的博客
09-22 6616
echarts图表在大数据可视化中间非常实用，图表之间联动效果更具直观性，同时需要掌握echarts的配置，属性，熟练应用功能，要具备抽象思维，封装组件思维，数据驱动页面思维，把基础的功能组件做好，后续的维护和扩展性才会更加方便。
echarts中饼图的异步数据加载绘制
流星
09-07 4194
ECharts 中异步获取数据并动态填充数据并绘制饼图
echarts饼图与柱状图联动
05-26
ECharts支持图表之间的联动，可以通过设置事件来实现饼图和柱状图的联动。 具体实现步骤如下： 1. 在ECharts中设置两个图表，一个是饼图，一个是柱状图。 2. 给饼图和柱状图分别绑定相应的事件。 3. 在事件回调函数中，获取当前图表选中的数据，并将其传递给另一个图表。 示例代码如下： ```javascript // 饼图配置 var pieOption = { ... // 添加事件 series: [{ type: 'pie', data: [...], // 点击事件 emphasis: { itemStyle: { // 高亮效果 } }, // 饼图选中事件 selectedMode: 'single', selected: {...} }], ... }; // 柱状图配置 var barOption = { ... // 添加事件 series: [{ type: 'bar', data: [...], // 柱状图选中事件 emphasis: { itemStyle: { // 高亮效果 } } }], ... }; // 饼图绑定选中事件 myChart1.on('pieselectchanged', function (params) { // 获取选中的数据 var selectedData = params.selected; // 将选中的数据传递给柱状图 myChart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: selectedData[0].dataIndex }); }); // 柱状图绑定选中事件 myChart2.on('highlight', function (params) { // 获取选中的数据 var selectedData = params.highlighted; // 将选中的数据传递给饼图 myChart1.dispatchAction({ type: 'pieSelect', seriesIndex: 0, dataIndex: selectedData[0].dataIndex }); }); // 渲染图表 myChart1.setOption(pieOption); myChart2.setOption(barOption); ``` 需要注意的是，柱状图和饼图的数据要保持一致，否则无法实现联动效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值