Newer
Older
KaiFengPC / src / views / spongePerformance / longTerm / chartOption.js
@zhangdeliang zhangdeliang on 23 May 7 KB 初始化项目
  1. import useUserStore from '@/store/modules/user';
  2. const pinias = useUserStore();
  3.  
  4. let optionChart = {
  5. // 柱状图+折线图
  6. option1: {
  7. color: pinias.$state.chartColor,
  8. // 显示暂无数据
  9. graphic: {
  10. type: 'text', // 类型:文本
  11. left: 'center',
  12. top: 'middle',
  13. silent: true, // 不响应事件
  14. invisible: false, // 有数据就隐藏
  15. style: {
  16. fill: '#c6c6c6',
  17. fontWeight: 'bold',
  18. text: '暂无数据',
  19. fontFamily: 'Microsoft YaHei',
  20. fontSize: '18px',
  21. },
  22. },
  23. tooltip: {
  24. trigger: 'axis',
  25. confine: true, //是否将 tooltip 框限制在图表的区域内
  26. },
  27. title: {
  28. left: 'left',
  29. text: '',
  30. top: 10,
  31. bottom: 10,
  32. left: 10,
  33. textStyle: {
  34. color: '#545E75', //字体颜色
  35. fontSize: 16, //字体大小
  36. },
  37. },
  38. grid: {
  39. left: '3%',
  40. right: '7%',
  41. top: '20%',
  42. bottom: '3%',
  43. containLabel: true,
  44. },
  45. legend: {
  46. top: '2%',
  47. orient: 'horizontal', //horizontal
  48. left: 'center', //left ,center
  49. textStyle: {
  50. color: 'inherit',
  51. },
  52. },
  53. xAxis: {
  54. type: 'category',
  55. data: ['2023', '2024', '2025'],
  56. axisLabel: {
  57. color: '#c6c6c6',
  58. },
  59. axisLine: {
  60. lineStyle: {
  61. color: '#066592',
  62. },
  63. },
  64. },
  65. yAxis: [
  66. {
  67. name: 'k㎡',
  68. type: 'value',
  69. nameLocation: 'end', // 坐标轴名称显示位置
  70. nameGap: 15, // 坐标轴名称与轴线之间的距离
  71. nameTextStyle: {
  72. color: '#c6c6c6', //字体颜色
  73. fontSize: 12, //字体大小
  74. align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
  75. },
  76. splitLine: {
  77. lineStyle: {
  78. type: 'dashed',
  79. color: '#066592',
  80. },
  81. },
  82. axisLabel: {
  83. color: '#c6c6c6',
  84. },
  85. },
  86. {
  87. name: '%',
  88. type: 'value',
  89. nameLocation: 'end', // 坐标轴名称显示位置
  90. nameGap: 15, // 坐标轴名称与轴线之间的距离
  91. nameTextStyle: {
  92. color: '#c6c6c6', //字体颜色
  93. fontSize: 12, //字体大小
  94. align: 'center', // 文字水平对齐方式,默认自动('left','center','right')
  95. },
  96. axisLabel: {
  97. color: '#c6c6c6',
  98. },
  99. splitLine: {
  100. lineStyle: {
  101. type: 'dashed',
  102. color: '#066592',
  103. },
  104. },
  105. },
  106. ],
  107. series: [
  108. {
  109. name: '面积',
  110. type: 'bar',
  111. barWidth: 16,
  112. yAxisIndex: 0,
  113. data: [24, 12, 9],
  114. },
  115. {
  116. name: '占建成区比例',
  117. type: 'line',
  118. smooth: true,
  119. yAxisIndex: 1,
  120. symbolSize: 8,
  121. data: [14, 8, 5],
  122. },
  123. ],
  124. },
  125. // 双Y轴柱状图
  126. option2: {
  127. color: pinias.$state.chartColor,
  128. // 显示暂无数据
  129. graphic: {
  130. type: 'text', // 类型:文本
  131. left: 'center',
  132. top: 'middle',
  133. silent: true, // 不响应事件
  134. invisible: false, // 有数据就隐藏
  135. style: {
  136. fill: '#c6c6c6',
  137. fontWeight: 'bold',
  138. text: '暂无数据',
  139. fontFamily: 'Microsoft YaHei',
  140. fontSize: '18px',
  141. },
  142. },
  143. tooltip: {
  144. trigger: 'axis',
  145. confine: true, //是否将 tooltip 框限制在图表的区域内
  146. axisPointer: {
  147. type: 'shadow',
  148. },
  149. },
  150. grid: {
  151. left: '3%',
  152. right: '7%',
  153. top: '20%',
  154. bottom: '3%',
  155. containLabel: true,
  156. },
  157. legend: {
  158. top: '2%',
  159. orient: 'horizontal', //horizontal
  160. left: 'center', //left ,center
  161. textStyle: {
  162. color: 'inherit',
  163. },
  164. },
  165. xAxis: {
  166. type: 'category',
  167. data: ['2023', '2024', '2025'],
  168. axisLabel: {
  169. color: '#c6c6c6',
  170. },
  171. axisLine: {
  172. lineStyle: {
  173. color: '#066592',
  174. },
  175. },
  176. },
  177. yAxis: [
  178. {
  179. name: 'kg',
  180. type: 'value',
  181. nameLocation: 'end', // 坐标轴名称显示位置
  182. nameGap: 15, // 坐标轴名称与轴线之间的距离
  183. nameTextStyle: {
  184. color: '#c6c6c6', //字体颜色
  185. fontSize: 12, //字体大小
  186. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  187. },
  188. splitLine: {
  189. lineStyle: {
  190. type: 'dashed',
  191. color: '#066592',
  192. },
  193. },
  194. axisLabel: {
  195. color: '#c6c6c6',
  196. },
  197. },
  198. {
  199. name: 'm³',
  200. type: 'value',
  201. nameLocation: 'end', // 坐标轴名称显示位置
  202. nameGap: 15, // 坐标轴名称与轴线之间的距离
  203. nameTextStyle: {
  204. color: '#c6c6c6', //字体颜色
  205. fontSize: 12, //字体大小
  206. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  207. },
  208. axisLabel: {
  209. color: '#c6c6c6',
  210. },
  211. splitLine: {
  212. lineStyle: {
  213. type: 'dashed',
  214. color: '#066592',
  215. },
  216. },
  217. },
  218. ],
  219. series: [
  220. {
  221. name: '溢流污染物总量(COD)',
  222. type: 'bar',
  223. barWidth: 20,
  224. yAxisIndex: 0,
  225. data: [12, 2, 9],
  226. },
  227. {
  228. name: '溢流量',
  229. type: 'bar',
  230. barWidth: 20,
  231. yAxisIndex: 1,
  232. data: [11, 23, 60],
  233. },
  234. ],
  235. },
  236. // 柱状图
  237. option3: {
  238. color: pinias.$state.chartColor,
  239. // 显示暂无数据
  240. graphic: {
  241. type: 'text', // 类型:文本
  242. left: 'center',
  243. top: 'middle',
  244. silent: true, // 不响应事件
  245. invisible: false, // 有数据就隐藏
  246. style: {
  247. fill: '#c6c6c6',
  248. fontWeight: 'bold',
  249. text: '暂无数据',
  250. fontFamily: 'Microsoft YaHei',
  251. fontSize: '18px',
  252. },
  253. },
  254. tooltip: {
  255. trigger: 'axis',
  256. confine: true, //是否将 tooltip 框限制在图表的区域内
  257. axisPointer: {
  258. type: 'shadow',
  259. },
  260. },
  261. grid: {
  262. left: '3%',
  263. right: '7%',
  264. top: '20%',
  265. bottom: '3%',
  266. containLabel: true,
  267. },
  268. legend: {
  269. top: '2%',
  270. orient: 'horizontal', //horizontal
  271. left: 'center', //left ,center
  272. textStyle: {
  273. color: 'inherit',
  274. },
  275. },
  276. xAxis: {
  277. type: 'category',
  278. data: ['2023', '2024'],
  279. axisLabel: {
  280. color: '#c6c6c6',
  281. },
  282. axisLine: {
  283. lineStyle: {
  284. color: '#066592',
  285. },
  286. },
  287. },
  288. yAxis: {
  289. name: 't',
  290. type: 'value',
  291. nameLocation: 'end', // 坐标轴名称显示位置
  292. nameGap: 15, // 坐标轴名称与轴线之间的距离
  293. nameTextStyle: {
  294. color: '#c6c6c6', //字体颜色
  295. fontSize: 12, //字体大小
  296. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  297. },
  298. splitLine: {
  299. lineStyle: {
  300. type: 'dashed',
  301. color: '#066592',
  302. },
  303. },
  304. axisLabel: {
  305. color: '#c6c6c6',
  306. },
  307. },
  308. series: [
  309. {
  310. name: '雨水资源利用量',
  311. type: 'bar',
  312. barWidth: 20,
  313. data: [12, 20],
  314. },
  315. ],
  316. },
  317. };
  318. export default optionChart;