使用图例注册事件,传参,实现对echart图的切换

时间:2022-08-23 20:22:30

业务需求,需要做一个好看的portal,经过讨论,决定使用现在比较火的echart,这样作出的图跟好看,但是由于之前没接触过,所以用起来比较困难,不过经过努力,现在也慢慢的实现了业务需求,当然也总结出了一些好的解决问题的办法,
一:
由于要从数据列表中读取两个字段的值,展示到两张图中,实现一下效果:
使用图例注册事件,传参,实现对echart图的切换

刚开始不太会使用echart,走了很多弯路,不过现在已经解决了;
series : [
{
name:’设备台数统计’,
type:’pie’,
radius : [‘0%’, ‘40%’],
center : [‘27%’, ‘50%’],
width: ‘40%’,
max: 40,
data:objList1
},
{
name:’设备价值统计’,
type:’pie’,
radius : [‘0%’, ‘40%’],
center : [‘73%’, ‘50%’],
width:’40%’,
x: ‘50%’,
max: 40,
sort : ‘ascending’,
data:objList2
}
]
像这样在series里面配置一下即可。
二:
也是比较困难的问题,需要在这张图的左上方自定义几个按钮或者什么的,可以实现传参,切换统计图的效果,研究很久,也没实现做成几个自定义按钮,最后的解决思路是做成几个自定义的图例,然后在自定义图例上注册事件,传参,最后实现刷新chart的目的:首先要配置:selectedMode:’single’,(图例单选)
var myChart = panel.chart;
myChart.on(“legendSelected”, function (param){
var selected = param.selected;
if (selected[‘类别’]) {
par.whereSql = ” AND SBTJ_TJLX = ‘2’ AND SY_PARENT = ‘ROOT’ AND SY_JTGSID=’0EIqZSXykuYyfnFTWiR’”;
par.orderSql = ” ORDER BY SY_TREEORDERINDEX”;
par.typeInfo = “type”;
//var fn = JE.eval(cfg.echart.iditOption, JE.getLocalLang(“core.jechartview”).echartCfgError);
//debugger;
panel.load(par);
//option = fn(option, panel, cfg);
// myChart.hideLoading();
// myChart.setOption(option,true);
}
最终实现了效果。大概描述一下实现过程,提供一个解决问题的思路