index.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730
  1. // 柱状图1模块
  2. (function () {
  3. // 实例化对象
  4. var myChart = echarts.init(document.querySelector(".bar .chart"));
  5. // 指定配置和数据
  6. var option = {
  7. color: ["#2f89cf"],
  8. tooltip: {
  9. trigger: "axis",
  10. axisPointer: {
  11. // 坐标轴指示器,坐标轴触发有效
  12. type: "shadow" // 默认为直线,可选为:'line' | 'shadow'
  13. }
  14. },
  15. grid: {
  16. left: "0%",
  17. top: "10px",
  18. right: "0%",
  19. bottom: "4%",
  20. containLabel: true
  21. },
  22. xAxis: [
  23. {
  24. type: "category",
  25. data: [
  26. "旅游行业",
  27. "教育培训",
  28. "游戏行业",
  29. "医疗行业",
  30. "电商行业",
  31. "社交行业",
  32. "金融行业"
  33. ],
  34. axisTick: {
  35. alignWithLabel: true
  36. },
  37. axisLabel: {
  38. textStyle: {
  39. color: "rgba(255,255,255,.6)",
  40. fontSize: "12"
  41. }
  42. },
  43. axisLine: {
  44. show: false
  45. }
  46. }
  47. ],
  48. yAxis: [
  49. {
  50. type: "value",
  51. axisLabel: {
  52. textStyle: {
  53. color: "rgba(255,255,255,.6)",
  54. fontSize: "12"
  55. }
  56. },
  57. axisLine: {
  58. lineStyle: {
  59. color: "rgba(255,255,255,.1)"
  60. // width: 1,
  61. // type: "solid"
  62. }
  63. },
  64. splitLine: {
  65. lineStyle: {
  66. color: "rgba(255,255,255,.1)"
  67. }
  68. }
  69. }
  70. ],
  71. series: [
  72. {
  73. name: "直接访问",
  74. type: "bar",
  75. barWidth: "35%",
  76. data: [200, 300, 300, 900, 1500, 1200, 600],
  77. itemStyle: {
  78. barBorderRadius: 5
  79. }
  80. }
  81. ]
  82. };
  83. // 把配置给实例对象
  84. myChart.setOption(option);
  85. window.addEventListener("resize", function () {
  86. myChart.resize();
  87. });
  88. // 数据变化
  89. var dataAll = [
  90. { year: "2019", data: [200, 300, 300, 900, 1500, 1200, 600] },
  91. { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
  92. ];
  93. document.querySelector(".bar h2").addEventListener("click", function (e) {
  94. var i = e.target == this.children[0] ? 0 : 1;
  95. option.series[0].data = dataAll[i].data;
  96. myChart.setOption(option);
  97. });
  98. })();
  99. // 折线图定制
  100. (function () {
  101. // 基于准备好的dom,初始化echarts实例
  102. var myChart = echarts.init(document.querySelector(".line .chart"));
  103. // (1)准备数据
  104. var data = {
  105. year: [
  106. [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
  107. [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
  108. ]
  109. };
  110. // 2. 指定配置和数据
  111. var option = {
  112. color: ["#00f2f1", "#ed3f35"],
  113. tooltip: {
  114. // 通过坐标轴来触发
  115. trigger: "axis"
  116. },
  117. legend: {
  118. // 距离容器10%
  119. right: "10%",
  120. // 修饰图例文字的颜色
  121. textStyle: {
  122. color: "#4c9bfd"
  123. }
  124. // 如果series 里面设置了name,此时图例组件的data可以省略
  125. // data: ["邮件营销", "联盟广告"]
  126. },
  127. grid: {
  128. top: "20%",
  129. left: "3%",
  130. right: "4%",
  131. bottom: "3%",
  132. show: true,
  133. borderColor: "#012f4a",
  134. containLabel: true
  135. },
  136. xAxis: {
  137. type: "category",
  138. boundaryGap: false,
  139. data: [
  140. "1月",
  141. "2月",
  142. "3月",
  143. "4月",
  144. "5月",
  145. "6月",
  146. "7月",
  147. "8月",
  148. "9月",
  149. "10月",
  150. "11月",
  151. "12月"
  152. ],
  153. // 去除刻度
  154. axisTick: {
  155. show: false
  156. },
  157. // 修饰刻度标签的颜色
  158. axisLabel: {
  159. color: "rgba(255,255,255,.7)"
  160. },
  161. // 去除x坐标轴的颜色
  162. axisLine: {
  163. show: false
  164. }
  165. },
  166. yAxis: {
  167. type: "value",
  168. // 去除刻度
  169. axisTick: {
  170. show: false
  171. },
  172. // 修饰刻度标签的颜色
  173. axisLabel: {
  174. color: "rgba(255,255,255,.7)"
  175. },
  176. // 修改y轴分割线的颜色
  177. splitLine: {
  178. lineStyle: {
  179. color: "#012f4a"
  180. }
  181. }
  182. },
  183. series: [
  184. {
  185. name: "新增项目",
  186. type: "line",
  187. stack: "总量",
  188. // 是否让线条圆滑显示
  189. smooth: true,
  190. data: data.year[0]
  191. },
  192. {
  193. name: "新增技能",
  194. type: "line",
  195. stack: "总量",
  196. smooth: true,
  197. data: data.year[1]
  198. }
  199. ]
  200. };
  201. // 3. 把配置和数据给实例对象
  202. myChart.setOption(option);
  203. // 重新把配置好的新数据给实例对象
  204. myChart.setOption(option);
  205. window.addEventListener("resize", function () {
  206. myChart.resize();
  207. });
  208. })();
  209. // 饼形图定制
  210. // 折线图定制
  211. (function () {
  212. // 基于准备好的dom,初始化echarts实例
  213. var myChart = echarts.init(document.querySelector(".pie .chart"));
  214. option = {
  215. tooltip: {
  216. trigger: "item",
  217. formatter: "{a} <br/>{b}: {c} ({d}%)",
  218. position: function (p) {
  219. //其中p为当前鼠标的位置
  220. return [p[0] + 10, p[1] - 10];
  221. }
  222. },
  223. legend: {
  224. top: "90%",
  225. itemWidth: 10,
  226. itemHeight: 10,
  227. data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
  228. textStyle: {
  229. color: "rgba(255,255,255,.5)",
  230. fontSize: "12"
  231. }
  232. },
  233. series: [
  234. {
  235. name: "年龄分布",
  236. type: "pie",
  237. center: ["50%", "42%"],
  238. radius: ["40%", "60%"],
  239. color: [
  240. "#065aab",
  241. "#066eab",
  242. "#0682ab",
  243. "#0696ab",
  244. "#06a0ab",
  245. "#06b4ab",
  246. "#06c8ab",
  247. "#06dcab",
  248. "#06f0ab"
  249. ],
  250. label: { show: false },
  251. labelLine: { show: false },
  252. data: [
  253. { value: 1, name: "0岁以下" },
  254. { value: 4, name: "20-29岁" },
  255. { value: 2, name: "30-39岁" },
  256. { value: 2, name: "40-49岁" },
  257. { value: 1, name: "50岁以上" }
  258. ]
  259. }
  260. ]
  261. };
  262. // 使用刚指定的配置项和数据显示图表。
  263. myChart.setOption(option);
  264. window.addEventListener("resize", function () {
  265. myChart.resize();
  266. });
  267. })();
  268. // 学习进度柱状图模块
  269. (function () {
  270. // 基于准备好的dom,初始化echarts实例
  271. var myChart = echarts.init(document.querySelector(".bar1 .chart"));
  272. var data = [90, 80, 75, 65, 65];
  273. var titlename = ["javascript", "VUE", "jQuery", "HTML5", "CSS3"];
  274. var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
  275. var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"];
  276. option = {
  277. //图标位置
  278. grid: {
  279. top: "10%",
  280. left: "22%",
  281. bottom: "10%"
  282. },
  283. xAxis: {
  284. show: false
  285. },
  286. yAxis: [
  287. {
  288. show: true,
  289. data: titlename,
  290. inverse: true,
  291. axisLine: {
  292. show: false
  293. },
  294. splitLine: {
  295. show: false
  296. },
  297. axisTick: {
  298. show: false
  299. },
  300. axisLabel: {
  301. color: "#fff",
  302. rich: {
  303. lg: {
  304. backgroundColor: "#339911",
  305. color: "#fff",
  306. borderRadius: 15,
  307. // padding: 5,
  308. align: "center",
  309. width: 15,
  310. height: 15
  311. }
  312. }
  313. }
  314. },
  315. {
  316. show: true,
  317. inverse: true,
  318. data: valdata,
  319. axisLabel: {
  320. textStyle: {
  321. fontSize: 12,
  322. color: "#fff"
  323. }
  324. }
  325. }
  326. ],
  327. series: [
  328. {
  329. name: "条",
  330. type: "bar",
  331. yAxisIndex: 0,
  332. data: data,
  333. barCategoryGap: 50,
  334. barWidth: 10,
  335. itemStyle: {
  336. normal: {
  337. barBorderRadius: 20,
  338. color: function (params) {
  339. var num = myColor.length;
  340. return myColor[params.dataIndex % num];
  341. }
  342. }
  343. },
  344. label: {
  345. normal: {
  346. show: true,
  347. position: "inside",
  348. formatter: "{c}%"
  349. }
  350. }
  351. },
  352. {
  353. name: "框",
  354. type: "bar",
  355. yAxisIndex: 1,
  356. barCategoryGap: 50,
  357. data: [100, 100, 100, 100, 100],
  358. barWidth: 15,
  359. itemStyle: {
  360. normal: {
  361. color: "none",
  362. borderColor: "#00c1de",
  363. borderWidth: 3,
  364. barBorderRadius: 15
  365. }
  366. }
  367. }
  368. ]
  369. };
  370. // 使用刚指定的配置项和数据显示图表。
  371. myChart.setOption(option);
  372. window.addEventListener("resize", function () {
  373. myChart.resize();
  374. });
  375. })();
  376. // 折线图 优秀作品
  377. (function () {
  378. // 基于准备好的dom,初始化echarts实例
  379. var myChart = echarts.init(document.querySelector(".line1 .chart"));
  380. option = {
  381. tooltip: {
  382. trigger: "axis",
  383. axisPointer: {
  384. lineStyle: {
  385. color: "#dddc6b"
  386. }
  387. }
  388. },
  389. legend: {
  390. top: "0%",
  391. textStyle: {
  392. color: "rgba(255,255,255,.5)",
  393. fontSize: "12"
  394. }
  395. },
  396. grid: {
  397. left: "10",
  398. top: "30",
  399. right: "10",
  400. bottom: "10",
  401. containLabel: true
  402. },
  403. xAxis: [
  404. {
  405. type: "category",
  406. boundaryGap: false,
  407. axisLabel: {
  408. textStyle: {
  409. color: "rgba(255,255,255,.6)",
  410. fontSize: 12
  411. }
  412. },
  413. axisLine: {
  414. lineStyle: {
  415. color: "rgba(255,255,255,.2)"
  416. }
  417. },
  418. data: [
  419. "01",
  420. "02",
  421. "03",
  422. "04",
  423. "05",
  424. "06",
  425. "07",
  426. "08",
  427. "09",
  428. "11",
  429. "12",
  430. "13",
  431. "14",
  432. "15",
  433. "16",
  434. "17",
  435. "18",
  436. "19",
  437. "20",
  438. "21",
  439. "22",
  440. "23",
  441. "24",
  442. "25",
  443. "26",
  444. "27",
  445. "28",
  446. "29",
  447. "30"
  448. ]
  449. },
  450. {
  451. axisPointer: { show: false },
  452. axisLine: { show: false },
  453. position: "bottom",
  454. offset: 20
  455. }
  456. ],
  457. yAxis: [
  458. {
  459. type: "value",
  460. axisTick: { show: false },
  461. axisLine: {
  462. lineStyle: {
  463. color: "rgba(255,255,255,.1)"
  464. }
  465. },
  466. axisLabel: {
  467. textStyle: {
  468. color: "rgba(255,255,255,.6)",
  469. fontSize: 12
  470. }
  471. },
  472. splitLine: {
  473. lineStyle: {
  474. color: "rgba(255,255,255,.1)"
  475. }
  476. }
  477. }
  478. ],
  479. series: [
  480. {
  481. name: "流入",
  482. type: "line",
  483. smooth: true,
  484. symbol: "circle",
  485. symbolSize: 5,
  486. showSymbol: false,
  487. lineStyle: {
  488. normal: {
  489. color: "#0184d5",
  490. width: 2
  491. }
  492. },
  493. areaStyle: {
  494. normal: {
  495. color: new echarts.graphic.LinearGradient(
  496. 0,
  497. 0,
  498. 0,
  499. 1,
  500. [
  501. {
  502. offset: 0,
  503. color: "rgba(1, 132, 213, 0.4)"
  504. },
  505. {
  506. offset: 0.8,
  507. color: "rgba(1, 132, 213, 0.1)"
  508. }
  509. ],
  510. false
  511. ),
  512. shadowColor: "rgba(0, 0, 0, 0.1)"
  513. }
  514. },
  515. itemStyle: {
  516. normal: {
  517. color: "#0184d5",
  518. borderColor: "rgba(221, 220, 107, .1)",
  519. borderWidth: 12
  520. }
  521. },
  522. data: [
  523. 30,
  524. 40,
  525. 30,
  526. 40,
  527. 30,
  528. 40,
  529. 30,
  530. 60,
  531. 20,
  532. 40,
  533. 20,
  534. 40,
  535. 30,
  536. 40,
  537. 30,
  538. 40,
  539. 30,
  540. 40,
  541. 30,
  542. 60,
  543. 20,
  544. 40,
  545. 20,
  546. 40,
  547. 30,
  548. 60,
  549. 20,
  550. 40,
  551. 20,
  552. 40
  553. ]
  554. },
  555. {
  556. name: "流出",
  557. type: "line",
  558. smooth: true,
  559. symbol: "circle",
  560. symbolSize: 5,
  561. showSymbol: false,
  562. lineStyle: {
  563. normal: {
  564. color: "#00d887",
  565. width: 2
  566. }
  567. },
  568. areaStyle: {
  569. normal: {
  570. color: new echarts.graphic.LinearGradient(
  571. 0,
  572. 0,
  573. 0,
  574. 1,
  575. [
  576. {
  577. offset: 0,
  578. color: "rgba(0, 216, 135, 0.4)"
  579. },
  580. {
  581. offset: 0.8,
  582. color: "rgba(0, 216, 135, 0.1)"
  583. }
  584. ],
  585. false
  586. ),
  587. shadowColor: "rgba(0, 0, 0, 0.1)"
  588. }
  589. },
  590. itemStyle: {
  591. normal: {
  592. color: "#00d887",
  593. borderColor: "rgba(221, 220, 107, .1)",
  594. borderWidth: 12
  595. }
  596. },
  597. data: [
  598. 50,
  599. 30,
  600. 50,
  601. 60,
  602. 10,
  603. 50,
  604. 30,
  605. 50,
  606. 60,
  607. 40,
  608. 60,
  609. 40,
  610. 80,
  611. 30,
  612. 50,
  613. 60,
  614. 10,
  615. 50,
  616. 30,
  617. 70,
  618. 20,
  619. 50,
  620. 10,
  621. 40,
  622. 50,
  623. 30,
  624. 70,
  625. 20,
  626. 50,
  627. 10,
  628. 40
  629. ]
  630. }
  631. ]
  632. };
  633. // 使用刚指定的配置项和数据显示图表。
  634. myChart.setOption(option);
  635. window.addEventListener("resize", function () {
  636. myChart.resize();
  637. });
  638. })();
  639. // 点位分布统计模块
  640. (function () {
  641. // 1. 实例化对象
  642. var myChart = echarts.init(document.querySelector(".pie1 .chart"));
  643. // 2. 指定配置项和数据
  644. var option = {
  645. legend: {
  646. top: "90%",
  647. itemWidth: 10,
  648. itemHeight: 10,
  649. textStyle: {
  650. color: "rgba(255,255,255,.5)",
  651. fontSize: "12"
  652. }
  653. },
  654. tooltip: {
  655. trigger: "item",
  656. formatter: "{a} <br/>{b} : {c} ({d}%)"
  657. },
  658. // 注意颜色写的位置
  659. color: [
  660. "#006cff",
  661. "#60cda0",
  662. "#ed8884",
  663. "#ff9f7f",
  664. "#0096ff",
  665. "#9fe6b8",
  666. "#32c5e9",
  667. "#1d9dff"
  668. ],
  669. series: [
  670. {
  671. name: "点位统计",
  672. type: "pie",
  673. // 如果radius是百分比则必须加引号
  674. radius: ["10%", "70%"],
  675. center: ["50%", "42%"],
  676. roseType: "radius",
  677. data: [
  678. { value: 20, name: "西安" },
  679. { value: 26, name: "北京" },
  680. { value: 24, name: "上海" },
  681. { value: 25, name: "其他" },
  682. { value: 20, name: "武汉" },
  683. { value: 25, name: "杭州" },
  684. { value: 30, name: "深圳" },
  685. { value: 42, name: "广州" }
  686. ],
  687. // 修饰饼形图文字相关的样式 label对象
  688. label: {
  689. fontSize: 10
  690. },
  691. // 修饰引导线样式
  692. labelLine: {
  693. // 连接到图形的线长度
  694. length: 10,
  695. // 连接到文字的线长度
  696. length2: 10
  697. }
  698. }
  699. ]
  700. };
  701. // 3. 配置项和数据给我们的实例化对象
  702. myChart.setOption(option);
  703. // 4. 当我们浏览器缩放的时候,图表也等比例缩放
  704. window.addEventListener("resize", function () {
  705. // 让我们的图表调用 resize这个方法
  706. myChart.resize();
  707. });
  708. })();