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

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

1. // 为保证正常绘图，代码格式与所选格式需保持一致;
   
2. // 请输入JS代码或前往官网复制示例代码;
   
3. // 复制完代码后，请先将代码中的数据列替换为绑定的数据列，绑定的数据列从上至下依次为column1、column2......，option部分请添加options.data以引用绑定列，chart绘制的DOM id会自动替换为变量$container
   
4. var weatherIcons = {
   
5. 'Sunny': './data/asset/img/weather/sunny_128.png',
   
6. 'Cloudy': './data/asset/img/weather/cloudy_128.png',
   
7. 'Showers': './data/asset/img/weather/showers_128.png'
   
8. };
   
9. 
   
10. //跳转代码
    
11. myChart.on('click', function (params) {
    
12. console.log(params.name);
    
13. 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))
    
14. // 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));
    
15. 
    
16. });
    
17. 
    
18. 
    
19. option = {
    
20. title: {
    
21. text: '天气情况统计',
    
22. subtext: '虚构数据',
    
23. left: 'center'
    
24. },
    
25. tooltip : {
    
26. trigger: 'item',
    
27. formatter: "{a} <br/>{b} : {c} ({d}%)"
    
28. },
    
29. legend: {
    
30. // orient: 'vertical',
    
31. // top: 'middle',
    
32. bottom: 10,
    
33. left: 'center',
    
34. data: ['西凉', '益州','兖州','荆州','幽州']
    
35. },
    
36. series : [
    
37. {
    
38. type: 'pie',
    
39. radius : '65%',
    
40. center: ['50%', '50%'],
    
41. selectedMode: 'single',
    
42. data:[
    
43. {
    
44. value:1548,
    
45. name: '幽州',
    
46. label: {
    
47. normal: {
    
48. formatter: [
    
49. '{title|{b}}{abg|}',
    
50. ' {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
    
51. '{hr|}',
    
52. ' {Sunny|}{value|202}{rate|55.3%}',
    
53. ' {Cloudy|}{value|142}{rate|38.9%}',
    
54. ' {Showers|}{value|21}{rate|5.8%}'
    
55. ].join('\n'),
    
56. backgroundColor: '#eee',
    
57. borderColor: '#777',
    
58. borderWidth: 1,
    
59. borderRadius: 4,
    
60. rich: {
    
61. title: {
    
62. color: '#eee',
    
63. align: 'center'
    
64. },
    
65. abg: {
    
66. backgroundColor: '#333',
    
67. width: '100%',
    
68. align: 'right',
    
69. height: 25,
    
70. borderRadius: [4, 4, 0, 0]
    
71. },
    
72. Sunny: {
    
73. height: 30,
    
74. align: 'left',
    
75. backgroundColor: {
    
76. image: weatherIcons.Sunny
    
77. }
    
78. },
    
79. Cloudy: {
    
80. height: 30,
    
81. align: 'left',
    
82. backgroundColor: {
    
83. image: weatherIcons.Cloudy
    
84. }
    
85. },
    
86. Showers: {
    
87. height: 30,
    
88. align: 'left',
    
89. backgroundColor: {
    
90. image: weatherIcons.Showers
    
91. }
    
92. },
    
93. weatherHead: {
    
94. color: '#333',
    
95. height: 24,
    
96. align: 'left'
    
97. },
    
98. hr: {
    
99. borderColor: '#777',
    
100. width: '100%',
     
101. borderWidth: 0.5,
     
102. height: 0
     
103. },
     
104. value: {
     
105. width: 20,
     
106. padding: [0, 20, 0, 30],
     
107. align: 'left'
     
108. },
     
109. valueHead: {
     
110. color: '#333',
     
111. width: 20,
     
112. padding: [0, 20, 0, 30],
     
113. align: 'center'
     
114. },
     
115. rate: {
     
116. width: 40,
     
117. align: 'right',
     
118. padding: [0, 10, 0, 0]
     
119. },
     
120. rateHead: {
     
121. color: '#333',
     
122. width: 40,
     
123. align: 'center',
     
124. padding: [0, 10, 0, 0]
     
125. }
     
126. }
     
127. }
     
128. }
     
129. },
     
130. {value:535, name: '荆州'},
     
131. {value:510, name: '兖州'},
     
132. {value:634, name: '益州'},
     
133. {value:735, name: '西凉'}
     
134. ],
     
135. itemStyle: {
     
136. emphasis: {
     
137. shadowBlur: 10,
     
138. shadowOffsetX: 0,
     
139. shadowColor: 'rgba(0, 0, 0, 0.5)'
     
140. }
     
141. }
     
142. }
     
143. ]
     
144. };

复制代码

其中您需要修改部分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参数传递给报告，进而您可以使用该参数对数据进行过滤。

点击益州后。

附件为上图报告样例

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