经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Echarts » 查看文章
如何利用echarts画雷达图和折柱混合
来源:jb51  时间:2022/4/7 12:49:23  对本文有异议

导语

通常在根据设计图写echarts的时候,很多效果是官方实例里没有的,我在代码里加上了一些常用的效果,并做了注释。

雷达图

  1. var option = {
  2. radar: [{
  3. //数据名称
  4. indicator: [{
  5. text: 'AIS未登记'
  6. },
  7. {
  8. text: '巡逻发现'
  9. },
  10. {
  11. text: '群众举报'
  12. },
  13. {
  14. text: '其他'
  15. },
  16. {
  17. text: '雷达发现'
  18. }
  19. ],
  20. center: ['50%', '50%'],
  21. radius: 120,
  22. startAngle: 90,
  23. splitNumber: 4,
  24. shape: 'circle',
  25. axisName: {
  26. formatter: '【{value}】',
  27. color: '#428BD4'//颜色
  28. },
  29. splitArea: {
  30. areaStyle: {
  31. color: ['#7BD685', '#34B54B', '#70DEB3', '#4FC7A0'], //内部圈圈的颜色
  32. shadowColor: 'rgba(0, 0, 0, 0.1)', //内部线的颜色
  33. shadowBlur: 10
  34. }
  35. },
  36. //线颜色
  37. axisLine: {
  38. lineStyle: {
  39. color: '#428BD4'
  40. }
  41. },
  42. splitLine: {
  43. lineStyle: {
  44. color: 'rgba(211, 253, 250, 0.8)'
  45. }
  46. }
  47.  
  48. }],
  49. //鼠标放上悬浮展示的内容
  50. tooltip: {
  51. trigger: 'item'
  52. },
  53. series: [{
  54. name: '表特征分布',
  55. type: 'radar',
  56. symbol: 'circle', //拐点样式
  57. symbolSize: 6, // 拐点的大小
  58. emphasis: {
  59. lineStyle: {
  60. width: 4
  61. }
  62. },
  63. data: [{
  64. value: [60, 5, 1, 1, 1500],
  65. name: '',
  66. areaStyle: {
  67. color: '#C1BFA1'
  68. }
  69. }
  70. ]
  71. }]
  72. };
  73. var myChartecharts = echarts.init(document.getElementById('btzfb'));
  74. myChartecharts.setOption(option);

效果

折柱图

  1. //
  2. var optionbdtj = {
  3. tooltip: {
  4. trigger: 'axis',
  5. axisPointer: {
  6. type: 'cross',
  7. crossStyle: {
  8. color: '#999'
  9. }
  10. }
  11. },
  12. title: {},
  13. legend: {
  14. data: ['系统预警', '线下发现', '数量变动'],
  15. textStyle: {
  16. color: '#7A7A7A'
  17. },
  18. },
  19. xAxis: [{
  20. type: 'category',
  21. data: ['1月', '2月', '3月', '4月'],
  22. axisPointer: {
  23. type: 'shadow'
  24. },
  25. axisLine: {
  26. lineStyle: { //改变xy轴线条的颜色
  27. color: "#C3DCEA",
  28. width: 1 //这里是为了突出显示加上的
  29. }
  30. },
  31. axisLabel: {
  32. textStyle: { //改变xy轴上文字的颜色
  33. color: "#75B4FC"
  34. }
  35. }
  36.  
  37. }],
  38.  
  39. yAxis: [{
  40. type: 'value',
  41. name: '单位(艘)',
  42. min: 0,
  43. max: 1000,
  44. interval: 200,
  45. axisLine: {
  46. lineStyle: { //改变xy轴线条的颜色
  47. color: "#E5F0F6",
  48. width: 1 //这里是为了突出显示加上的
  49. }
  50. },
  51. axisLabel: {
  52. formatter: '{value} ',
  53. color: '#B7B7B7'
  54. },
  55. splitLine: {
  56. lineStyle: { //改变xy轴线条的颜色
  57. color: "#E5F0F6",
  58. width: 1 //这里是为了突出显示加上的
  59. }
  60. },
  61. nameTextStyle: {
  62. color: '#B7B7B7'
  63. }
  64. },
  65. {
  66. type: 'value',
  67. name: '单位(%)',
  68. min: 0,
  69. max: 100,
  70. interval: 20, //间隔数
  71. axisLine: {
  72. lineStyle: { //改变xy轴线条的颜色
  73. color: "#E5F0F6",
  74. width: 1 //这里是为了突出显示加上的
  75. }
  76. },
  77. axisLabel: {
  78. formatter: '{value} ',
  79. color: '#B7B7B7'
  80. },
  81. splitLine: {
  82. lineStyle: { //改变xy轴线条的颜色
  83. color: "#E5F0F6",
  84. width: 1 //这里是为了突出显示加上的
  85. }
  86. },
  87. nameTextStyle: {
  88. color: '#B7B7B7'
  89. }
  90. }
  91. ],
  92. series: [{
  93. name: '系统预警',
  94. type: 'bar',
  95. barWidth: 15, // 柱子宽度
  96. tooltip: {
  97. valueFormatter: function(value) {
  98. return value + ' ';
  99. }
  100. },
  101. itemStyle: {
  102. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  103. offset: 0,
  104. color: '#96DBCA'
  105. },
  106. {
  107. offset: 0.5,
  108. color: '#6EC9C6'
  109. },
  110. {
  111. offset: 1,
  112. color: '#43B6C3'
  113. }
  114. ])
  115. },
  116. emphasis: {
  117. itemStyle: {
  118. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  119. offset: 0,
  120. color: '#96DBCA'
  121. },
  122. {
  123. offset: 0.7,
  124. color: '#6EC9C6'
  125. },
  126. {
  127. offset: 1,
  128. color: '#43B6C3'
  129. }
  130. ])
  131. }
  132. },
  133. data: [600, 400, 700, 230, 250, 760, 135, 162, 320, 200, 600, 300]
  134. },
  135. {
  136. name: '线下发现',
  137. type: 'bar',
  138. barWidth: 15, // 柱子宽度
  139. tooltip: {
  140. valueFormatter: function(value) {
  141. return value + ' ';
  142. }
  143. },
  144.  
  145. itemStyle: {
  146. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  147. offset: 0,
  148. color: '#FEC52F'
  149. },
  150. {
  151. offset: 0.5,
  152. color: '#FEB32C'
  153. },
  154. {
  155. offset: 1,
  156. color: '#FE9F29'
  157. }
  158. ])
  159. },
  160. emphasis: {
  161. itemStyle: {
  162. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  163. offset: 0,
  164. color: '#FEC52F'
  165. },
  166. {
  167. offset: 0.7,
  168. color: '#FEB32C'
  169. },
  170. {
  171. offset: 1,
  172. color: '#FE9F29'
  173. }
  174. ])
  175. }
  176. },
  177. data: [200, 200, 300, 400, 600, 100, 200, 230, 230, 160, 120, 610]
  178. },
  179. {
  180. name: '数量变动',
  181. type: 'line',
  182. symbolSize: 8, //实心大小
  183. symbol: 'circle', //实心
  184. yAxisIndex: 1,
  185. lineStyle: {
  186. width: 3,
  187. shadowColor: 'rgba(0, 216, 255, 1)', //阴影
  188. shadowBlur: 8,
  189. shadowOffsetY: 2
  190. },
  191. tooltip: {
  192. valueFormatter: function(value) {
  193. return value + ' ';
  194. }
  195. },
  196. itemStyle: {
  197. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  198. offset: 0,
  199. color: '#14D8FD'
  200. },
  201. {
  202. offset: 0.5,
  203. color: '#14D8FD'
  204. },
  205. {
  206. offset: 1,
  207. color: '#14D8FD'
  208. }
  209. ])
  210. },
  211. data: [65, 46, 83, 57]
  212. }
  213. ]
  214. };
  215. var myChartbdtj = echarts.init(document.getElementById('bdtj'));
  216. myChartbdtj.setOption(optionbdtj);

效果

总结

到此这篇关于如何利用echarts画雷达图和折柱混合的文章就介绍到这了,更多相关echarts雷达图和折柱混合内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号