echarts饼图与表单联动


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


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


先放效果图~



无操作的样子


echarts饼图与表单联动_第1张图片




鼠标移入的样子


echarts饼图与表单联动_第2张图片




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



下面上代码




    
    GXL
    
    
    

    
    

    
    
    
    

    

    

    
 

    
    



图形展示

数据展示



这块主要用到layui来进行布局,所以需要提前准备好layui和echarts的配置文件










代码如上~

思路大概为:当鼠标移入饼状图的时候,获取当前项的索引,然后将表单的每行索引遍历,如果一样,则给这一行增加一个背景色。鼠标离开的时候去掉背景色(找表单的索引找了半天,最后才发现layui会默认给所有的表单一个tbody tr,但问题来了,如果这个页面还有别的表单怎么办,希望有办法的同学可以留言告诉我--囧)


因为饼状图和表单用的是同一个数据库,所以当增删改完成的时候重新刷新一下页面饼图就自动更改了




你可能感兴趣的:(echarts)