0


echarts实现x轴不等间距,间隔大小不一致

在echarts官网贴入以下代码即可实现如下效果,有需要的可自行修改,思路:利用markLine画间隔线

  1. option = {
  2. "title": {
  3. "text": "X轴不等间距分布",
  4. "left": "center",
  5. "textStyle": {
  6. "fontSize": 14
  7. }
  8. },
  9. "tooltip": {
  10. "trigger": "axis",
  11. "axisPointer": {
  12. "type": "cross"
  13. }
  14. },
  15. "xAxis": [
  16. {
  17. "type": "value",
  18. "axisTick": {
  19. "show": false
  20. },
  21. "splitLine": {
  22. "show": false
  23. },
  24. "axisLabel": {
  25. "show": false
  26. }
  27. },
  28. {
  29. "nameTextStyle": {
  30. "padding": [
  31. -35,
  32. 0,
  33. 0,
  34. -250
  35. ]
  36. },
  37. "nameLocation": "start",
  38. "type": "value",
  39. "inverse": true
  40. }
  41. ],
  42. "yAxis": [
  43. {
  44. "nameLocation": "middle",
  45. "nameGap": 35,
  46. "splitLine": {
  47. "show": true
  48. },
  49. "axisLabel": {
  50. "show": true
  51. },
  52. "type": "value"
  53. },
  54. {
  55. "nameLocation": "start",
  56. "type": "value",
  57. "inverse": true
  58. }
  59. ],
  60. "series": [
  61. {
  62. "name": "经验值",
  63. "type": "scatter",
  64. "itemStyle": {
  65. "color": "blue"
  66. },
  67. "emphasis": {
  68. "label": {
  69. "show": true,
  70. "position": "left",
  71. "color": "blue",
  72. "fontSize": 16
  73. }
  74. },
  75. "data": [
  76. [
  77. null,
  78. 15300
  79. ],
  80. [
  81. 1.1429328502439424,
  82. 13900
  83. ],
  84. [
  85. 1.4347968100380402,
  86. 13900
  87. ],
  88. [
  89. 1.6221355390003298,
  90. 13200
  91. ],
  92. [
  93. 1.7644233769418265,
  94. 13200
  95. ],
  96. [
  97. 1.8811715123771802,
  98. 12900
  99. ],
  100. [
  101. 1.981355015871236,
  102. 12600
  103. ],
  104. [
  105. 2.069886383728865,
  106. 12300
  107. ],
  108. [
  109. 2.1497629919468118,
  110. 12000
  111. ],
  112. [
  113. 2.2229562064656267,
  114. 11400
  115. ],
  116. [
  117. 2.29083624407835,
  118. 11400
  119. ],
  120. [
  121. 2.3543969073934443,
  122. 11000
  123. ],
  124. [
  125. 2.4143838828500006,
  126. 10700
  127. ],
  128. [
  129. 2.4713724812784648,
  130. 10500
  131. ],
  132. [
  133. 2.525817058464733,
  134. 10400
  135. ],
  136. [
  137. 2.578083699436545,
  138. 10300
  139. ],
  140. [
  141. 2.6284725646028573,
  142. 10200
  143. ],
  144. [
  145. 2.677233607920999,
  146. 9680
  147. ],
  148. [
  149. 2.724577908936702,
  150. 9600
  151. ],
  152. [
  153. 2.7706860219938676,
  154. 9340
  155. ],
  156. [
  157. 2.815714248387783,
  158. 9250
  159. ],
  160. [
  161. 2.8597994320969007,
  162. 9070
  163. ],
  164. [
  165. 2.9030626870680827,
  166. 8800
  167. ],
  168. [
  169. 2.9456123392346854,
  170. 8600
  171. ],
  172. [
  173. 2.987546283762394,
  174. 8500
  175. ],
  176. [
  177. 3.0289539021314544,
  178. 8400
  179. ],
  180. [
  181. 3.0699176452281014,
  182. 8400
  183. ],
  184. [
  185. 3.1105143617908624,
  186. 8380
  187. ],
  188. [
  189. 3.1508164326117134,
  190. 8060
  191. ],
  192. [
  193. 3.190892757407068,
  194. 7910
  195. ],
  196. [
  197. 3.230809631654015,
  198. 7490
  199. ],
  200. [
  201. 3.2706315438719678,
  202. 7290
  203. ],
  204. [
  205. 3.3104219191118918,
  206. 7200
  207. ],
  208. [
  209. 3.350243831329845,
  210. 7110
  211. ],
  212. [
  213. 3.390160705576792,
  214. 6990
  215. ],
  216. [
  217. 3.4302370303721466,
  218. 6930
  219. ],
  220. [
  221. 3.4705391011929976,
  222. 6820
  223. ],
  224. [
  225. 3.5111358177557586,
  226. 6800
  227. ],
  228. [
  229. 3.5520995608524055,
  230. 6770
  231. ],
  232. [
  233. 3.593507179221466,
  234. 6680
  235. ],
  236. [
  237. 3.6354411237491746,
  238. 6610
  239. ],
  240. [
  241. 3.6779907759157773,
  242. 6330
  243. ],
  244. [
  245. 3.7212540308869593,
  246. 6260
  247. ],
  248. [
  249. 3.765339214596077,
  250. 6250
  251. ],
  252. [
  253. 3.810367440989992,
  254. 6090
  255. ],
  256. [
  257. 3.856475554047158,
  258. 5960
  259. ],
  260. [
  261. 3.903819855062861,
  262. 5890
  263. ],
  264. [
  265. 3.9525808983810027,
  266. 5820
  267. ],
  268. [
  269. 4.0029697635473145,
  270. 5770
  271. ],
  272. [
  273. 4.0552364045191265,
  274. 5470
  275. ],
  276. [
  277. 4.109680981705394,
  278. 5420
  279. ],
  280. [
  281. 4.16666958013386,
  282. 5390
  283. ],
  284. [
  285. 4.226656555590415,
  286. 5380
  287. ],
  288. [
  289. 4.29021721890551,
  290. 5220
  291. ],
  292. [
  293. 4.358097256518232,
  294. 5120
  295. ],
  296. [
  297. 4.431290471037048,
  298. 4960
  299. ],
  300. [
  301. 4.511167079254993,
  302. 4800
  303. ],
  304. [
  305. 4.599698447112624,
  306. 4360
  307. ],
  308. [
  309. 4.699881950606685,
  310. 4080
  311. ],
  312. [
  313. 4.816630086042034,
  314. 3150
  315. ],
  316. [
  317. 4.958917923983593,
  318. 3020
  319. ],
  320. [
  321. 5.146256652945819,
  322. 2540
  323. ]
  324. ]
  325. },
  326. {
  327. "name": "设计值",
  328. "type": "line",
  329. "showSymbol": false,
  330. "smooth": true,
  331. "itemStyle": {
  332. "color": "red"
  333. },
  334. "data": [
  335. [
  336. 0.20029442678252973,
  337. 23219.472952339886
  338. ],
  339. [
  340. 0.41236499138250915,
  341. 21684.913875904447
  342. ],
  343. [
  344. 0.7146974250480067,
  345. 19619.937810403346
  346. ],
  347. [
  348. 0.9641788571039065,
  349. 18023.243756888867
  350. ],
  351. [
  352. 1.2367778224888983,
  353. 16387.887170408965
  354. ],
  355. [
  356. 1.6456731063587138,
  357. 14144.8231541636
  358. ],
  359. [
  360. 2.008975167351858,
  361. 12358.130070431354
  362. ],
  363. [
  364. 2.44890549876532,
  365. 10445.844348715784
  366. ],
  367. [
  368. 2.766126218212636,
  369. 9231.592896947384
  370. ],
  371. [
  372. 3.0371796286319315,
  373. 8299.149275466443
  374. ],
  375. [
  376. 3.29052673149193,
  377. 7511.95157310009
  378. ],
  379. [
  380. 3.5438738343519285,
  381. 6803.103843502999
  382. ],
  383. [
  384. 3.814927244771224,
  385. 6127.704087078571
  386. ],
  387. [
  388. 4.1321479642185395,
  389. 5440.3794010882375
  390. ],
  391. [
  392. 4.572078295632002,
  393. 4657.3505765376085
  394. ],
  395. [
  396. 4.9353803566250924,
  397. 4145.39576065588
  398. ],
  399. [
  400. 5.344275640494961,
  401. 3696.8328177394874
  402. ],
  403. [
  404. 5.6168746058799535,
  405. 3463.2094589500425
  406. ],
  407. [
  408. 5.866356037935853,
  409. 3289.2522982673645
  410. ],
  411. [
  412. 6.168688471601351,
  413. 3122.386384899139
  414. ],
  415. [
  416. 6.581053459750787,
  417. 2958.9552944488523
  418. ]
  419. ],
  420. "markLine": {
  421. "symbol": [
  422. "none",
  423. "none"
  424. ],
  425. "silent": true,
  426. "label": {
  427. "show": true,
  428. "position": "start",
  429. "formatter": "{b}",
  430. "color": "#000000"
  431. },
  432. "lineStyle": {
  433. "type": "solid",
  434. "color": "#cccccc"
  435. },
  436. "data": [
  437. {
  438. "name": "0.1",
  439. "xAxis": 0.20029442678252973
  440. },
  441. {
  442. "name": "0.2",
  443. "xAxis": 0.41236499138250915
  444. },
  445. {
  446. "name": "0.5",
  447. "xAxis": 0.7146974250480067
  448. },
  449. {
  450. "name": "1",
  451. "xAxis": 0.9641788571039065
  452. },
  453. {
  454. "name": "2",
  455. "xAxis": 1.2367778224888983
  456. },
  457. {
  458. "name": "5",
  459. "xAxis": 1.6456731063587138
  460. },
  461. {
  462. "name": "10",
  463. "xAxis": 2.008975167351858
  464. },
  465. {
  466. "name": "20",
  467. "xAxis": 2.44890549876532
  468. },
  469. {
  470. "name": "30",
  471. "xAxis": 2.766126218212636
  472. },
  473. {
  474. "name": "40",
  475. "xAxis": 3.0371796286319315
  476. },
  477. {
  478. "name": "50",
  479. "xAxis": 3.29052673149193
  480. },
  481. {
  482. "name": "60",
  483. "xAxis": 3.5438738343519285
  484. },
  485. {
  486. "name": "70",
  487. "xAxis": 3.814927244771224
  488. },
  489. {
  490. "name": "80",
  491. "xAxis": 4.1321479642185395
  492. },
  493. {
  494. "name": "90",
  495. "xAxis": 4.572078295632002
  496. },
  497. {
  498. "name": "95",
  499. "xAxis": 4.9353803566250924
  500. },
  501. {
  502. "name": "98",
  503. "xAxis": 5.344275640494961
  504. },
  505. {
  506. "name": "99",
  507. "xAxis": 5.6168746058799535
  508. },
  509. {
  510. "name": "99.5",
  511. "xAxis": 5.866356037935853
  512. },
  513. {
  514. "name": "99.8",
  515. "xAxis": 6.168688471601351
  516. },
  517. {
  518. "name": "99.95",
  519. "xAxis": 6.581053459750787
  520. }
  521. ]
  522. }
  523. }
  524. ]
  525. }
标签: echarts javascript html

本文转载自: https://blog.csdn.net/qq_39548550/article/details/130132438
版权归原作者 华北周黑鸭 所有, 如有侵权,请联系我们删除。

“echarts实现x轴不等间距,间隔大小不一致”的评论:

还没有评论