永洪社区

标题: 如何点击自定义JS绘图中数据联动表格数据 [打印本页]
作者: yhdata_P8HODy1m    时间: 2024-7-6 18:05
标题: 如何点击自定义JS绘图中数据联动表格数据
请教如何通过点击自定义绘图中的图形数据来联动表格中的数据，点击表格中的数据可以把参数暴露出来让表格接收么，谢谢~
作者: 永洪tech_xh    时间: 2024-7-6 18:05
  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. };

  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));

  16. });


  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参数传递给报告，进而您可以使用该参数对数据进行过滤。
(, 下载次数: 322)