最近在学习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 type="text/javascript" src="${ctx}/static/echarts/macarons.js" charset="utf-8"></script>
</head>
<body>
<div class="larry-grid layui-anim layui-anim-upbit larryTheme-A" >
<div class="larry-personal" >
<div class="layui-tab" >
<div class="larry-separate"></div>
<!-- 菜单列表 -->
<div class="row">
<div class="sysNotice col">
<div class="layui-colla-item">
<h2 class="layui-colla-title" style="background-color: #ffffff;">图形展示</h2>
<div class="layui-colla-content layui-show" >
<div id="container" style="height: 380px; margin: 0 auto;width: 100%;"></div>
</div>
</div>
</div>
<div class="sysNotice col">
<div class="layui-colla-item">
<h2 class="layui-colla-title layui-inline" style="background-color: #ffffff;">数据展示</h2>
<shiro:hasPermission name="4JQVLmOd">
<div class="layui-inline" style="margin-bottom:auto;margin-left: auto;">
<a class="layui-btn layui-btn-sm layui-btn-normal announcementAdd_btn"> <i class="layui-icon larry-icon larry-xinzeng1"></i>新增来源</a>
</div>
</shiro:hasPermission>
<div class="layui-colla-content layui-show" style="height: 380px; margin: 0 auto;width: 100%;">
<table id="userTableList" lay-filter="userTableId"></table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>这块主要用到layui来进行布局，所以需要提前准备好layui和echarts的配置文件
<script type="text/javascript">
var $;
layui.config({
base : "${ctx}/static/js/"
}).use(['form','jquery','layer','common','element','table'],function() {
$ = layui.$;
var form = layui.form,
element = layui.element,
table = layui.table,
common = layui.common;
var loading = layer.load(0,{ shade: [0.3,'#000']});
/**用户表格加载*/
table.render({
elem: '#userTableList',
url: '${ctx}/chart/ajax_echarts_chart_list.do',
id:'userTableId',
method: 'post',
height:'full-140',
skin:'row',
even:'true',
size: 'sm',
cols: [[
{type:"numbers"},
//{type:"checkbox"},
{field:'loginFrom', title: '用户来源',align:'center' },
{field:'loginFromCount', title: '来源数量',align:'center',width: '17%'},
{title: '操作', align:'center', toolbar: '#messageBar'}
]],
page: true,
done: function (res, curr, count) {
common.resizeGrid();
layer.close(loading);
}
});
//首页卡片tab添加
$(".panel a").on("click",function(){
window.parent.addTab($(this));
});
//首页数据初始化
homeInit();
//图表
var psLineChar = echarts.init(document.getElementById('container'),'macarons');
//查询
function loadDrugs() {
psLineChar.clear();
psLineChar.showLoading({text: '正在努力的读取数据中...'});
$.post("${ctx}/chart/ajax_echarts_login_from.do", function(data) {
//因为下面的数据格式要求，所以提前声明一个list，并给他设置属性
var v = data.loginFromCount;
var n = data.loginFrom;
var list = [];
for(var i = 0; i < v.length; i++){
var row = {};
row.value = v[i];
row.name = n[i];
list.push(row);
}
var option = {
title : {
text: '本站点用户访问来源',
subtext: '2016~2017',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"//这个是固定写法，可以查看layui的API文档
},
legend: {
orient : 'vertical',
x : 'left',
/* data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'] */
data:data.loginFrom
},
calculable : true,
series : [
{
name:'访问来源',
type:'pie',
radius : '55%',//半径
center: ['50%', 225],//圆心坐标
//selectedMode:true,//选中模式
data:list
/* [
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
] */
}
]
};
psLineChar.setOption(option, true);
//鼠标移入
function eConsole(param) {
var i = param.dataIndex;// 获取当前点击索引，
//clickFunc(param.dataIndex);//执行点击效果
$("tbody tr").each(function(){
//alert($(this).index()); 获取数据表格每行的索引
var a = $(this).index();
if(a == i){
$("tbody tr").eq(a).css("background-color","yellow");
}
});
};
//鼠标移出
function zConsole(param) {
var i = param.dataIndex;// 获取当前点击索引，
$("tbody tr").each(function(){
//alert($(this).index()); 获取数据表格每行的索引
var a = $(this).index();
if(a == i){
$("tbody tr").eq(a).css("background-color","");
}
});
};
psLineChar.on("mouseover", eConsole);//鼠标移入
psLineChar.on("mouseout", zConsole);//鼠标移出
});
psLineChar.hideLoading();
}
//载入图表
loadDrugs();
//浏览器大小改变时重置大小
window.onresize = function () {
psLineChar.resize();
};
layer.close(loading);
//新增来源
$(".announcementAdd_btn").click(function(){
var url = "${ctx}/loginfrom/loginfrom_add.do";
common.cmsLayOpen('新增用户来源',url,'580px','300px');
});
/**监听工具条*/
table.on('tool(userTableId)', function(obj){
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值
//编辑来源信息
if(layEvent === 'role_edit') {
var loginFromId = data.loginFromId;
var url = "${ctx}/loginfrom/loginfrom_update.do?loginFromId="+loginFromId;
common.cmsLayOpen('编辑用户来源信息',url,'580px','300px');
//来源信息删除
}else if(layEvent === 'message_delete') {
var loginFromId = data.loginFromId;
var url = "${ctx}/loginfrom/ajax_del_loginfrom.do";
var param = {loginFromId:loginFromId};
common.ajaxCmsConfirm('系统提示', '确定要删除当前信息吗?',url,param);
}
});
});
/**页面赋值初始化*/
function homeInit() {
}
</script>
<!--工具条 操作-->
<script type="text/html" id="messageBar">
<div class="layui-btn-group">
<shiro:hasPermission name="moHbdnjz">
<a class="layui-btn layui-btn-xs role_edit" lay-event="role_edit"><i class="layui-icon larry-icon larry-bianji2"></i> 编辑</a>
</shiro:hasPermission>
<shiro:hasPermission name="eTDnjGAM">
<a class="layui-btn layui-btn-xs layui-btn-danger message_delete" lay-event="message_delete"><i class="layui-icon larry-icon larry-ttpodicon"></i>删除</a>
</shiro:hasPermission>
</div>
</script>代码如上~
思路大概为：当鼠标移入饼状图的时候，获取当前项的索引，然后将表单的每行索引遍历，如果一样，则给这一行增加一个背景色。鼠标离开的时候去掉背景色（找表单的索引找了半天，最后才发现layui会默认给所有的表单一个tbody tr，但问题来了，如果这个页面还有别的表单怎么办，希望有办法的同学可以留言告诉我--囧）
因为饼状图和表单用的是同一个数据库，所以当增删改完成的时候重新刷新一下页面饼图就自动更改了
4015
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
