chartsOption.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. // 模块方法
  2. function basicLine () {
  3. return {
  4. color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'],
  5. title: {},
  6. tooltip: {
  7. trigger: 'axis'
  8. },
  9. xAxis: {
  10. type: 'category',
  11. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  12. },
  13. yAxis: {
  14. type: 'value'
  15. },
  16. series: [{
  17. data: [820, 932, 901, 934, 1290, 1330, 1320],
  18. type: 'line'
  19. }]
  20. }
  21. }
  22. // 带有区域阴影的线形图
  23. function areaLine () {
  24. return {
  25. color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'],
  26. title: {},
  27. tooltip: {
  28. trigger: 'axis'
  29. },
  30. xAxis: {
  31. name: '日期',
  32. type: 'category',
  33. boundaryGap: false,
  34. data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  35. axisTick: {
  36. show: false
  37. }
  38. },
  39. yAxis: {
  40. type: 'value',
  41. boundaryGap: [0, '100%']
  42. },
  43. series: [{
  44. type: 'line',
  45. smooth: true,
  46. symbol: 'none',
  47. sampling: 'average',
  48. itemStyle: {
  49. normal: {
  50. color: 'rgb(255, 70, 131)'
  51. }
  52. },
  53. areaStyle: {},
  54. data: [820, 932, 901, 934, 1290, 1330, 1320]
  55. }]
  56. }
  57. }
  58. // 环形饼图
  59. function ringPie () {
  60. return {
  61. color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'],
  62. title: {
  63. text: '',
  64. x: 'center'
  65. },
  66. tooltip: {
  67. trigger: 'item',
  68. formatter: '{a} <br/>{b}: {c} ({d}%)'
  69. },
  70. legend: {
  71. orient: 'vertical',
  72. x: 'left',
  73. data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  74. },
  75. series: [
  76. {
  77. name: '访问来源',
  78. type: 'pie',
  79. radius: ['50%', '70%'],
  80. avoidLabelOverlap: false,
  81. label: {
  82. normal: {
  83. show: false,
  84. position: 'center'
  85. },
  86. emphasis: {
  87. show: true,
  88. textStyle: {
  89. fontSize: '30',
  90. fontWeight: 'bold'
  91. }
  92. }
  93. },
  94. labelLine: {
  95. normal: {
  96. show: false
  97. }
  98. },
  99. data: [
  100. { value: 335, name: '直接访问' },
  101. { value: 310, name: '邮件营销' },
  102. { value: 234, name: '联盟广告' },
  103. { value: 135, name: '视频广告' },
  104. { value: 1548, name: '搜索引擎' }
  105. ]
  106. }
  107. ]
  108. }
  109. }
  110. // 一般饼图
  111. function simplePie (text) {
  112. return {
  113. color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'],
  114. title: {
  115. text: text || '饼图',
  116. x: 'center'
  117. },
  118. tooltip: {
  119. trigger: 'item',
  120. formatter: '{a} <br/>{b} : {c} ({d}%)'
  121. },
  122. legend: {
  123. orient: 'vertical',
  124. left: 'left',
  125. data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
  126. },
  127. series: [{
  128. name: '访问来源',
  129. type: 'pie',
  130. radius: '55%',
  131. center: ['50%', '50%'],
  132. data: [
  133. { value: 335, name: '直接访问' },
  134. { value: 310, name: '邮件营销' },
  135. { value: 234, name: '联盟广告' },
  136. { value: 135, name: '视频广告' },
  137. { value: 1548, name: '搜索引擎' }
  138. ],
  139. itemStyle: {
  140. emphasis: {
  141. shadowBlur: 10,
  142. shadowOffsetX: 0,
  143. shadowColor: 'rgba(0, 0, 0, 0.5)'
  144. }
  145. }
  146. }]
  147. }
  148. }
  149. // 一般柱形图
  150. function simpleBar (text) {
  151. return {
  152. backgroundColor: '#FFF',
  153. color: ['#487EC1', '#48B9C1', '#A27DE2', '#32C0D6'],
  154. title: {
  155. text: text || '柱形图',
  156. top: 0,
  157. left: '0',
  158. textStyle: {
  159. color: '#487EC1',
  160. fontSize: 14
  161. }
  162. },
  163. tooltip: {
  164. trigger: 'axis',
  165. axisPointer: {
  166. type: 'shadow'
  167. }
  168. },
  169. legend: {
  170. data: [],
  171. top: '18'
  172. },
  173. grid: {
  174. left: '3%',
  175. right: '5%',
  176. bottom: '3%',
  177. containLabel: true,
  178. show: false
  179. },
  180. toolbox: {
  181. feature: {
  182. dataView: { show: false, readOnly: false }
  183. }
  184. },
  185. xAxis: {
  186. type: 'category',
  187. boundaryGap: true,
  188. splitLine: {
  189. show: false
  190. },
  191. data: [],
  192. axisLine: {
  193. lineStyle: {
  194. color: '#333'
  195. }
  196. }
  197. },
  198. yAxis: {
  199. type: 'value',
  200. splitLine: {
  201. lineStyle: {
  202. type: 'dashed',
  203. color: '#DDD'
  204. }
  205. },
  206. axisLine: {
  207. show: false,
  208. lineStyle: {
  209. color: '#333'
  210. }
  211. },
  212. nameTextStyle: {
  213. color: '#999'
  214. },
  215. splitArea: {
  216. show: false
  217. }
  218. },
  219. series: [{
  220. type: 'bar',
  221. data: []
  222. }]
  223. }
  224. }
  225. export { basicLine, areaLine, ringPie, simplePie, simpleBar }