echarts2 地图点击legend 让右侧 easyUi 的表头实现联动

最新推荐文章于 2024-01-18 15:19:35 发布

空了虾摸索

最新推荐文章于 2024-01-18 15:19:35 发布

阅读量393

点赞数

本文链接：https://blog.csdn.net/qq_18730505/article/details/80074777

版权

jquery 同时被 3 个专栏收录

3 篇文章 0 订阅

订阅专栏

easyui

2 篇文章 0 订阅

订阅专栏

echarts

1 篇文章 0 订阅

订阅专栏

var echart = echarts.init(dom);

echart.setOption(option);

当 setOption 触发后页面即被渲染

以下方法是翻阅 echarts官网提供的api 版本为2.7 即 echarts2

因人而异，网上大部分方法都是 var ecConfig = require('echarts/config');

我的工程里总是报错 require 这个东西不存在

而官方是使用全局方法获得 config 如下所示

//定义一个全局变量

var showColumn =1

var ecConfig = echarts.config;

echart.on(ecConfig.EVENT.LEGEND_SELECTED,function(data){

console.log(data);

//这个就是点击图例返回的图例名称。总之data . 可以看到你想要的。。

var legendName = data.target;

if(legendName.indexOf("张三")!=-1){

showColumn=1

}else if(legendName.indexOf("李四")!=-1){

showColumn=2

}else{

showColumn=3

}

})

上面的代码就完成了图例的选择事件

调用如下的代码对右侧的 table 列进行隐藏展现。。

不过这个前提需要从后台把 table 数据全部查出来并展现出来

showColumn 为1 这里需要加一个逻辑控制 start 和 end 值。。原因是因为 datagrid 里的columns 循环遍历是按顺序的。。

var dgColumn = $("#jqcpjzgjTable").datagrid("options").columns[0];
for (var i = 1; i < dgColumn.length; i++) {
    var field = dgColumn[i].field;
    if (i >= start && i <= end) {
        $("#jqcpjzgjTable").datagrid('showColumn', field);
    } else {
        $("#jqcpjzgjTable").datagrid('hideColumn', field);
    }
}