如何点击自定义JS绘图中数据联动表格数据

显示全部楼层 · 2024-07-06 18:05:42

请教如何通过点击自定义绘图中的图形数据来联动表格中的数据，点击表格中的数据可以把参数暴露出来让表格接收么，谢谢~

显示全部楼层

// 为保证正常绘图，代码格式与所选格式需保持一致;
// 请输入JS代码或前往官网复制示例代码;
// 复制完代码后，请先将代码中的数据列替换为绑定的数据列，绑定的数据列从上至下依次为column1、column2......，option部分请添加options.data以引用绑定列，chart绘制的DOM id会自动替换为变量$container
var weatherIcons = {
'Sunny': './data/asset/img/weather/sunny_128.png',
'Cloudy': './data/asset/img/weather/cloudy_128.png',
'Showers': './data/asset/img/weather/showers_128.png'
};
//跳转代码
myChart.on('click', function (params) {
console.log(params.name);
window.location.replace('/bi/Viewer?proc=1&action=viewer&hback=true&db=公共/echarts/echarts!8d85!!94fe!!63a5!.db&platform=PC&browserType=chrome&wd=' + encodeURIComponent(params.name))
// window.open('http://localhost:8080/bi/Viewer?proc=1&action=viewer&hback=true&db=echarts!8d85!!94fe!!63a5!.db&platform=PC&browserType=chrome&wd=' + encodeURIComponent(params.name));
});
option = {
title: {
text: '天气情况统计',
subtext: '虚构数据',
left: 'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
// orient: 'vertical',
// top: 'middle',
bottom: 10,
left: 'center',
data: ['西凉', '益州','兖州','荆州','幽州']
},
series : [
{
type: 'pie',
radius : '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data:[
{
value:1548,
name: '幽州',
label: {
normal: {
formatter: [
'{title|{b}}{abg|}',
' {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
}
}
},
{value:535, name: '荆州'},
{value:510, name: '兖州'},
{value:634, name: '益州'},
{value:735, name: '西凉'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};

复制代码

其中您需要修改部分window.location.replace('/bi/Viewer?proc=1&action=viewer&hback=true&db=公共/echarts/echarts!8d85!!94fe!!63a5!.db&platform=PC&browserType=chrome&wd=' + encodeURIComponent(params.name))为您对应的地址。

效果点击饼图，会将饼图所对应的地址通过wd参数传递给报告，进而您可以使用该参数对数据进行过滤。
图片1.png

点击益州后。

附件为上图报告样例

显示全部楼层

产品无法将echarts组件的数据或值传递到报告中，但echart可以实现点击绘图中的某一部分进行页面跳转，您可以在echart代码编辑中，设置图片上的分块跳转到当前的报告，并传递参数。以此来达到数据联动的效果。

[可视化] 如何点击自定义JS绘图中数据联动表格数据

【可视化】如何点击自定义JS绘图中数据联动表格数据

最佳答案

永洪tech_xh 关注Ta

精彩评论2

热门产品

社区资源

关于永洪