Newer
Older
KaiFengPC / src / views / floodSys / floodYP / riskChart.js
@zhangdeliang zhangdeliang on 23 May 12 KB 初始化项目
  1. import useUserStore from '@/store/modules/user';
  2. const pinias = useUserStore();
  3.  
  4. const chartOption = {
  5. option1: {
  6. color: pinias.$state.chartColor,
  7. tooltip: {
  8. trigger: 'axis',
  9. confine: true, //是否将 tooltip 框限制在图表的区域内
  10. },
  11. // 显示暂无数据
  12. graphic: {
  13. type: 'text', // 类型:文本
  14. left: 'center',
  15. top: 'middle',
  16. silent: true, // 不响应事件
  17. invisible: true, // 有数据就隐藏
  18. style: {
  19. fill: '#c6c6c6',
  20. fontWeight: 'bold',
  21. text: '暂无数据',
  22. fontFamily: 'Microsoft YaHei',
  23. fontSize: '18px',
  24. },
  25. },
  26. title: {
  27. left: 'left',
  28. text: '',
  29. top: 10,
  30. bottom: 10,
  31. left: 10,
  32. textStyle: {
  33. color: '#545E75', //字体颜色
  34. fontSize: 16, //字体大小
  35. },
  36. },
  37. grid: {
  38. left: '3%',
  39. right: '7%',
  40. top: '25%',
  41. bottom: '3%',
  42. containLabel: true,
  43. },
  44. legend: {
  45. top: '2%',
  46. orient: 'horizontal', //horizontal
  47. left: 'center', //left ,center
  48. textStyle: {
  49. color: 'inherit',
  50. },
  51. },
  52. xAxis: [
  53. {
  54. type: 'category',
  55. boundaryGap: false,
  56. data: [1, 2],
  57. axisLabel: {
  58. color: '#c6c6c6',
  59. },
  60. axisLine: {
  61. lineStyle: {
  62. color: '#066592',
  63. },
  64. },
  65. },
  66. ],
  67. yAxis: [
  68. {
  69. name: '',
  70. type: 'value',
  71. nameLocation: 'end', // 坐标轴名称显示位置
  72. nameGap: 15, // 坐标轴名称与轴线之间的距离
  73. nameTextStyle: {
  74. color: '#c6c6c6', //字体颜色
  75. fontSize: 12, //字体大小
  76. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  77. },
  78. axisLabel: {
  79. color: '#c6c6c6',
  80. },
  81. splitLine: {
  82. lineStyle: {
  83. type: 'dashed',
  84. color: '#066592',
  85. },
  86. },
  87. },
  88. ],
  89. series: [{ type: 'line', smooth: true, data: [12, 34] }],
  90. },
  91. option11: {
  92. color: pinias.$state.chartColor,
  93. tooltip: {
  94. trigger: 'axis',
  95. alwaysShowContent: true, //是否永远显示提示框
  96. confine: true, //是否将 tooltip 框限制在图表的区域内
  97. },
  98. // 显示暂无数据
  99. graphic: {
  100. type: 'text', // 类型:文本
  101. left: 'center',
  102. top: 'middle',
  103. silent: true, // 不响应事件
  104. invisible: true, // 有数据就隐藏
  105. style: {
  106. fill: '#c6c6c6',
  107. fontWeight: 'bold',
  108. text: '暂无风险',
  109. fontFamily: 'Microsoft YaHei',
  110. fontSize: '18px',
  111. },
  112. },
  113. title: {
  114. left: 'left',
  115. text: '',
  116. top: 10,
  117. bottom: 10,
  118. left: 10,
  119. textStyle: {
  120. color: '#545E75', //字体颜色
  121. fontSize: 16, //字体大小
  122. },
  123. },
  124. grid: {
  125. left: '3%',
  126. right: '7%',
  127. top: '25%',
  128. bottom: '3%',
  129. containLabel: true,
  130. },
  131. legend: {
  132. top: '2%',
  133. orient: 'horizontal', //horizontal
  134. left: 'center', //left ,center
  135. textStyle: {
  136. color: 'inherit',
  137. },
  138. },
  139. xAxis: [
  140. {
  141. type: 'category',
  142. boundaryGap: false,
  143. data: [1, 2],
  144. axisLabel: {
  145. color: '#c6c6c6',
  146. },
  147. axisLine: {
  148. lineStyle: {
  149. color: '#066592',
  150. },
  151. },
  152. },
  153. ],
  154. yAxis: [
  155. {
  156. name: '',
  157. type: 'value',
  158. nameLocation: 'end', // 坐标轴名称显示位置
  159. nameGap: 15, // 坐标轴名称与轴线之间的距离
  160. nameTextStyle: {
  161. color: '#c6c6c6', //字体颜色
  162. fontSize: 12, //字体大小
  163. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  164. },
  165. axisLabel: {
  166. color: '#c6c6c6',
  167. },
  168. splitLine: {
  169. lineStyle: {
  170. type: 'dashed',
  171. color: '#066592',
  172. },
  173. },
  174. },
  175. ],
  176. series: [{ type: 'line', smooth: true, data: [12, 34] }],
  177. },
  178. option2: {
  179. color: pinias.$state.chartColor,
  180. tooltip: {
  181. trigger: 'axis',
  182. confine: true, //是否将 tooltip 框限制在图表的区域内
  183. },
  184. // 显示暂无数据
  185. graphic: {
  186. type: 'text', // 类型:文本
  187. left: 'center',
  188. top: 'middle',
  189. silent: true, // 不响应事件
  190. invisible: true, // 有数据就隐藏
  191. style: {
  192. fill: '#c6c6c6',
  193. fontWeight: 'bold',
  194. text: '暂无数据',
  195. fontFamily: 'Microsoft YaHei',
  196. fontSize: '18px',
  197. },
  198. },
  199. title: {
  200. left: 'left',
  201. text: '',
  202. top: 10,
  203. bottom: 10,
  204. left: 10,
  205. textStyle: {
  206. color: '#545E75', //字体颜色
  207. fontSize: 16, //字体大小
  208. },
  209. },
  210. grid: {
  211. left: '3%',
  212. right: '7%',
  213. top: '25%',
  214. bottom: '3%',
  215. containLabel: true,
  216. },
  217. legend: {
  218. top: '2%',
  219. orient: 'horizontal', //horizontal
  220. left: 'center', //left ,center
  221. textStyle: {
  222. color: 'inherit',
  223. },
  224. },
  225. xAxis: [
  226. {
  227. type: 'category',
  228. data: ['1', '3'],
  229. axisLabel: {
  230. color: '#c6c6c6',
  231. },
  232. axisLine: {
  233. lineStyle: {
  234. color: '#066592',
  235. },
  236. },
  237. },
  238. ],
  239. yAxis: [
  240. {
  241. name: '小时降雨量(mm)',
  242. type: 'value',
  243. nameLocation: 'end', // 坐标轴名称显示位置
  244. nameGap: 15, // 坐标轴名称与轴线之间的距离
  245. nameTextStyle: {
  246. color: '#c6c6c6', //字体颜色
  247. fontSize: 12, //字体大小
  248. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  249. },
  250. splitLine: {
  251. lineStyle: {
  252. type: 'dashed',
  253. color: '#066592',
  254. },
  255. },
  256. axisLabel: {
  257. color: '#c6c6c6',
  258. },
  259. },
  260. {
  261. name: '累计降雨量(mm)',
  262. type: 'value',
  263. nameLocation: 'end', // 坐标轴名称显示位置
  264. nameGap: 15, // 坐标轴名称与轴线之间的距离
  265. nameTextStyle: {
  266. color: '#c6c6c6', //字体颜色
  267. fontSize: 12, //字体大小
  268. align: 'right', // 文字水平对齐方式,默认自动('left','center','right')
  269. },
  270. axisLabel: {
  271. color: '#c6c6c6',
  272. },
  273. splitLine: {
  274. lineStyle: {
  275. type: 'dashed',
  276. color: '#066592',
  277. },
  278. },
  279. },
  280. ],
  281. series: [
  282. {
  283. name: '小时降雨量',
  284. type: 'bar',
  285. barMaxWidth: 30, // 设置柱子的最大宽度为30
  286. yAxisIndex: 0,
  287. data: [12, 23],
  288. },
  289. {
  290. name: '累计降雨量',
  291. type: 'line',
  292. smooth: true,
  293. yAxisIndex: 1,
  294. symbolSize: 8,
  295. data: [13, 20],
  296. },
  297. ],
  298. },
  299. option22: {
  300. color: pinias.$state.chartColor,
  301. tooltip: {
  302. trigger: 'axis',
  303. confine: true, //是否将 tooltip 框限制在图表的区域内
  304. },
  305. // 显示暂无数据
  306. graphic: {
  307. type: 'text', // 类型:文本
  308. left: 'center',
  309. top: 'middle',
  310. silent: true, // 不响应事件
  311. invisible: true, // 有数据就隐藏
  312. style: {
  313. fill: '#c6c6c6',
  314. fontWeight: 'bold',
  315. text: '暂无数据',
  316. fontFamily: 'Microsoft YaHei',
  317. fontSize: '18px',
  318. },
  319. },
  320. title: {
  321. left: 'left',
  322. text: '',
  323. top: 10,
  324. bottom: 10,
  325. left: 10,
  326. textStyle: {
  327. color: '#545E75', //字体颜色
  328. fontSize: 16, //字体大小
  329. },
  330. },
  331. grid: {
  332. left: '3%',
  333. right: '7%',
  334. top: '25%',
  335. bottom: '3%',
  336. containLabel: true,
  337. },
  338. legend: {
  339. top: '2%',
  340. orient: 'horizontal', //horizontal
  341. left: 'center', //left ,center
  342. textStyle: {
  343. color: 'inherit',
  344. },
  345. },
  346. xAxis: [
  347. {
  348. type: 'category',
  349. data: ['1', '3'],
  350. axisLabel: {
  351. color: '#c6c6c6',
  352. },
  353. axisLine: {
  354. lineStyle: {
  355. color: '#066592',
  356. },
  357. },
  358. },
  359. ],
  360. yAxis: [
  361. {
  362. name: '预报雨量(mm)',
  363. type: 'value',
  364. nameLocation: 'end', // 坐标轴名称显示位置
  365. nameGap: 15, // 坐标轴名称与轴线之间的距离
  366. nameTextStyle: {
  367. color: '#c6c6c6', //字体颜色
  368. fontSize: 12, //字体大小
  369. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  370. },
  371. splitLine: {
  372. lineStyle: {
  373. type: 'dashed',
  374. color: '#066592',
  375. },
  376. },
  377. axisLabel: {
  378. color: '#c6c6c6',
  379. },
  380. },
  381. {
  382. name: '预计累计雨量(mm)',
  383. type: 'value',
  384. nameLocation: 'end', // 坐标轴名称显示位置
  385. nameGap: 15, // 坐标轴名称与轴线之间的距离
  386. nameTextStyle: {
  387. color: '#c6c6c6', //字体颜色
  388. fontSize: 12, //字体大小
  389. align: 'right', // 文字水平对齐方式,默认自动('left','center','right')
  390. },
  391. axisLabel: {
  392. color: '#c6c6c6',
  393. },
  394. splitLine: {
  395. lineStyle: {
  396. type: 'dashed',
  397. color: '#066592',
  398. },
  399. },
  400. },
  401. ],
  402. series: [
  403. {
  404. name: '预报雨量',
  405. type: 'bar',
  406. barMaxWidth: 30, // 设置柱子的最大宽度为30
  407. yAxisIndex: 0,
  408. data: [12, 23],
  409. },
  410. {
  411. name: '预计累计雨量',
  412. type: 'line',
  413. smooth: true,
  414. yAxisIndex: 1,
  415. symbolSize: 8,
  416. data: [13, 20],
  417. },
  418. ],
  419. },
  420. option3: {
  421. color: pinias.$state.chartColor,
  422. grid: {
  423. bottom: 0,
  424. },
  425. tooltip: {
  426. trigger: 'item',
  427. formatter: '{b} : {c}处 ({d}%)',
  428. },
  429. legend: {
  430. orient: 'vertical',
  431. right: 10,
  432. y: 'center',
  433. icon: 'circle',
  434. textStyle: {
  435. color: '#c6c6c6',
  436. },
  437. formatter: name => {
  438. let v;
  439. chartOption.option3.series.data.forEach(item => {
  440. if (item.name === name) {
  441. v = item.value;
  442. }
  443. });
  444. return name + ' ' + v + ' 处';
  445. },
  446. },
  447. series: {
  448. type: 'pie',
  449. radius: ['55%', '75%'],
  450. center: ['30%', '50%'],
  451. label: {
  452. show: false,
  453. position: 'outer',
  454. },
  455. labelLine: {
  456. length: 30,
  457. show: false,
  458. },
  459. data: [
  460. { value: 135.6, name: '低风险区域' },
  461. { value: 73.5, name: '中风险区域' },
  462. { value: 12.5, name: '高风险区域' },
  463. ],
  464. },
  465. },
  466. option4: {
  467. color: pinias.$state.chartColor,
  468. // 显示暂无数据
  469. graphic: {
  470. type: 'text', // 类型:文本
  471. left: 'center',
  472. top: 'middle',
  473. silent: true, // 不响应事件
  474. invisible: true, // 有数据就隐藏
  475. style: {
  476. fill: '#c6c6c6',
  477. fontWeight: 'bold',
  478. text: '暂无数据',
  479. fontFamily: 'Microsoft YaHei',
  480. fontSize: '18px',
  481. },
  482. },
  483. tooltip: {
  484. trigger: 'axis',
  485. confine: true, //是否将 tooltip 框限制在图表的区域内
  486. },
  487. title: {
  488. left: 'center',
  489. text: '降雨过程线',
  490. textStyle: {
  491. color: '#333', //字体颜色
  492. fontSize: 16, //字体大小
  493. },
  494. },
  495. grid: {
  496. left: '3%',
  497. right: '7%',
  498. top: '15%',
  499. bottom: '3%',
  500. containLabel: true,
  501. },
  502. legend: {
  503. top: '8%',
  504. orient: 'horizontal', //horizontal
  505. left: 'center', //left ,center
  506. textStyle: {
  507. color: '#333',
  508. },
  509. data: [],
  510. },
  511. xAxis: {
  512. type: 'category',
  513. data: ['1', '2'],
  514. axisLabel: {
  515. color: '#333',
  516. },
  517. axisLine: {
  518. lineStyle: {
  519. color: '#066592',
  520. },
  521. },
  522. },
  523. yAxis: [
  524. {
  525. name: 'mm',
  526. type: 'value',
  527. nameLocation: 'end', // 坐标轴名称显示位置
  528. nameGap: 15, // 坐标轴名称与轴线之间的距离
  529. nameTextStyle: {
  530. color: '#333', //字体颜色
  531. fontSize: 12, //字体大小
  532. align: 'left', // 文字水平对齐方式,默认自动('left','center','right')
  533. },
  534. axisLabel: {
  535. color: '#333',
  536. },
  537. splitLine: {
  538. lineStyle: {
  539. type: 'dashed',
  540. color: '#066592',
  541. },
  542. },
  543. },
  544. ],
  545. series: [{ name: '降雨量', type: 'bar', barMaxWidth: 30, data: [12, 34] }],
  546. },
  547. };
  548. export default chartOption;