首页k线图

package-lock.json

@@ -5924,6 +5924,317 @@
         "type": "^1.0.1"
       }
     },
+    "d3": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-7.3.0.tgz",
+      "integrity": "sha512-MDRLJCMK232OJQRqGljQ/gCxtB8k3/sLKFjftMjzPB3nKVUODpdW9Rb3vcq7U8Ka5YKoZkAmp++Ur6I+6iNWIw==",
+      "dev": true,
+      "requires": {
+        "d3-array": "3",
+        "d3-axis": "3",
+        "d3-brush": "3",
+        "d3-chord": "3",
+        "d3-color": "3",
+        "d3-contour": "3",
+        "d3-delaunay": "6",
+        "d3-dispatch": "3",
+        "d3-drag": "3",
+        "d3-dsv": "3",
+        "d3-ease": "3",
+        "d3-fetch": "3",
+        "d3-force": "3",
+        "d3-format": "3",
+        "d3-geo": "3",
+        "d3-hierarchy": "3",
+        "d3-interpolate": "3",
+        "d3-path": "3",
+        "d3-polygon": "3",
+        "d3-quadtree": "3",
+        "d3-random": "3",
+        "d3-scale": "4",
+        "d3-scale-chromatic": "3",
+        "d3-selection": "3",
+        "d3-shape": "3",
+        "d3-time": "3",
+        "d3-time-format": "4",
+        "d3-timer": "3",
+        "d3-transition": "3",
+        "d3-zoom": "3"
+      }
+    },
+    "d3-array": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.1.1.tgz",
+      "integrity": "sha512-33qQ+ZoZlli19IFiQx4QEpf2CBEayMRzhlisJHSCsSUbDXv6ZishqS1x7uFVClKG4Wr7rZVHvaAttoLow6GqdQ==",
+      "dev": true,
+      "requires": {
+        "internmap": "1 - 2"
+      }
+    },
+    "d3-axis": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
+      "integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
+      "dev": true
+    },
+    "d3-brush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
+      "integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
+      "dev": true,
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "3",
+        "d3-transition": "3"
+      }
+    },
+    "d3-chord": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
+      "integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
+      "dev": true,
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-color": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.0.1.tgz",
+      "integrity": "sha512-6/SlHkDOBLyQSJ1j1Ghs82OIUXpKWlR0hCsw0XrLSQhuUPuCSmLQ1QPH98vpnQxMUQM2/gfAkUEWsupVpd9JGw==",
+      "dev": true
+    },
+    "d3-contour": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-3.0.1.tgz",
+      "integrity": "sha512-0Oc4D0KyhwhM7ZL0RMnfGycLN7hxHB8CMmwZ3+H26PWAG0ozNuYG5hXSDNgmP1SgJkQMrlG6cP20HoaSbvcJTQ==",
+      "dev": true,
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-delaunay": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.2.tgz",
+      "integrity": "sha512-IMLNldruDQScrcfT+MWnazhHbDJhcRJyOEBAJfwQnHle1RPh6WDuLvxNArUju2VSMSUuKlY5BGHRJ2cYyoFLQQ==",
+      "dev": true,
+      "requires": {
+        "delaunator": "5"
+      }
+    },
+    "d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "dev": true
+    },
+    "d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "dev": true,
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      }
+    },
+    "d3-dsv": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
+      "integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
+      "dev": true,
+      "requires": {
+        "commander": "7",
+        "iconv-lite": "0.6",
+        "rw": "1"
+      },
+      "dependencies": {
+        "commander": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+          "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+          "dev": true
+        },
+        "iconv-lite": {
+          "version": "0.6.3",
+          "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+          "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+          "dev": true,
+          "requires": {
+            "safer-buffer": ">= 2.1.2 < 3.0.0"
+          }
+        }
+      }
+    },
+    "d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "dev": true
+    },
+    "d3-fetch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
+      "integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
+      "dev": true,
+      "requires": {
+        "d3-dsv": "1 - 3"
+      }
+    },
+    "d3-force": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
+      "integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
+      "dev": true,
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-quadtree": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-format": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
+      "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
+      "dev": true
+    },
+    "d3-geo": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.0.1.tgz",
+      "integrity": "sha512-Wt23xBych5tSy9IYAM1FR2rWIBFWa52B/oF/GYe5zbdHrg08FU8+BuI6X4PvTwPDdqdAdq04fuWJpELtsaEjeA==",
+      "dev": true,
+      "requires": {
+        "d3-array": "2.5.0 - 3"
+      }
+    },
+    "d3-hierarchy": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.1.tgz",
+      "integrity": "sha512-LtAIu54UctRmhGKllleflmHalttH3zkfSi4NlKrTAoFKjC+AFBJohsCAdgCBYQwH0F8hIOGY89X1pPqAchlMkA==",
+      "dev": true
+    },
+    "d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "dev": true,
+      "requires": {
+        "d3-color": "1 - 3"
+      }
+    },
+    "d3-path": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.0.1.tgz",
+      "integrity": "sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w==",
+      "dev": true
+    },
+    "d3-polygon": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
+      "integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
+      "dev": true
+    },
+    "d3-quadtree": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
+      "integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
+      "dev": true
+    },
+    "d3-random": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
+      "integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
+      "dev": true
+    },
+    "d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "dev": true,
+      "requires": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      }
+    },
+    "d3-scale-chromatic": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.0.0.tgz",
+      "integrity": "sha512-Lx9thtxAKrO2Pq6OO2Ua474opeziKr279P/TKZsMAhYyNDD3EnCffdbgeSYN5O7m2ByQsxtuP2CSDczNUIZ22g==",
+      "dev": true,
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-interpolate": "1 - 3"
+      }
+    },
+    "d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "dev": true
+    },
+    "d3-shape": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.1.0.tgz",
+      "integrity": "sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ==",
+      "dev": true,
+      "requires": {
+        "d3-path": "1 - 3"
+      }
+    },
+    "d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ==",
+      "dev": true,
+      "requires": {
+        "d3-array": "2 - 3"
+      }
+    },
+    "d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "dev": true,
+      "requires": {
+        "d3-time": "1 - 3"
+      }
+    },
+    "d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "dev": true
+    },
+    "d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "dev": true,
+      "requires": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      }
+    },
+    "d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "dev": true,
+      "requires": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      }
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -6097,6 +6408,15 @@
         }
       }
     },
+    "delaunator": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.0.0.tgz",
+      "integrity": "sha512-AyLvtyJdbv/U1GkiS6gUUzclRoAY4Gs75qkMygJJhU75LW4DNuSF2RMzpxs9jw9Oz1BobHjTdkG3zdP55VxAqw==",
+      "dev": true,
+      "requires": {
+        "robust-predicates": "^3.0.0"
+      }
+    },
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -9061,6 +9381,12 @@
         "meow": "^3.3.0"
       }
     },
+    "internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "dev": true
+    },
     "interpret": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.2.0.tgz",
@@ -14127,6 +14453,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
     },
+    "resize-detector": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/resize-detector/-/resize-detector-0.3.0.tgz",
+      "integrity": "sha512-R/tCuvuOHQ8o2boRP6vgx8hXCCy87H1eY9V5imBYeVNyNVpuL9ciReSccLj2gDcax9+2weXy3bc8Vv+NRXeEvQ=="
+    },
     "resize-observer-polyfill": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
@@ -14246,6 +14577,12 @@
         "inherits": "^2.0.1"
       }
     },
+    "robust-predicates": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.1.tgz",
+      "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==",
+      "dev": true
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
@@ -14263,6 +14600,12 @@
         "aproba": "^1.1.1"
       }
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha1-P4Yt+pGrdmsUiF700BEkv9oHT7Q=",
+      "dev": true
+    },
     "rx-lite": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/rx-lite/-/rx-lite-4.0.8.tgz",
@@ -16265,6 +16608,20 @@
         "clipboard": "^2.0.0"
       }
     },
+    "vue-demi": {
+      "version": "0.12.1",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.12.1.tgz",
+      "integrity": "sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw=="
+    },
+    "vue-echarts": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/vue-echarts/-/vue-echarts-6.0.2.tgz",
+      "integrity": "sha512-9xDokauJtAc389MNKbwi1I0VDmp4Y6ndAJTQ8T9K7H0ffosTe1OJSJbUtkT7/fVLDFzlCcmg2TfAKaMzbpg5yQ==",
+      "requires": {
+        "resize-detector": "^0.3.0",
+        "vue-demi": "^0.12.1"
+      }
+    },
     "vue-eslint-parser": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",

package.json

@@ -34,6 +34,7 @@
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^3.1.3",
     "vue-clipboard2": "^0.3.1",
+    "vue-echarts": "^6.0.2",
     "vue-qr": "^2.2.1",
     "vue-router": "^3.0.1",
     "vuex": "^3.5.1"
@@ -53,6 +54,7 @@
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.11",
+    "d3": "^7.3.0",
     "eslint": "^4.15.0",
     "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^3.0.0",

src/main.js

@@ -19,6 +19,7 @@ Object.keys(utils).forEach(key => {
     });
 });
 
+
 // 复制
 VueClipboard.config.autoSetContainer = true;
 Vue.use(VueClipboard)
@@ -54,4 +55,4 @@ new Vue({
         App
     },
     template: '<App />'
-});
+});

src/views/home/index.vue

@@ -235,8 +235,13 @@
                               "
                               >{{ item.increaseStr }}</span
                             > -->
-                            <img src="../../assets/img/increace.png" class="td_img" alt="" v-show="item.increase * 1 >= 0">
-                            <img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0">
+                            <!-- <img src="../../assets/img/increace.png" class="td_img" alt="" v-show="item.increase * 1 >= 0">
+                            <img src="../../assets/img/decreace.png" class="td_img" alt="" v-show="item.increase * 1 < 0"> -->
+                            <svg width="109" height="39">
+                                <g style="transform: translate(0, 10px)">
+                                    <path :d="item.line" />
+                                </g>
+                            </svg>
                           </td>
                           <td>
                             <router-link :to="`/exchange/${item.symbol}`">
@@ -256,7 +261,9 @@
               </div>
             </div>
           </div>
-
+          
+          
+            
           <div class="text-center">
             <!-- tag="button"
               type="button" -->
@@ -412,6 +419,7 @@ import Home from "@/api/home";
 import Socket from "@/api/server/Socket.js";
 import College from "@/api/college";
 import Member from "@/api/member";
+import * as d3 from 'd3';
 // Vue.use(VueAwesomeSwiper);
 export default {
   components: {
@@ -479,31 +487,53 @@ export default {
       ];
     },
   },
+  
   data() {
     return {
-      swiperOptions: {
-        pagination: {
-          el: ".swiper-pagination",
+        swiperOptions: {
+            pagination: {
+            el: ".swiper-pagination",
+            },
         },
-      },
-      bannerList: [],
-      articleList: [],
-      homeList: [],
-      iconList: [],
-      marketList: [],
-      tab: "Optional",
-      searchTxt: "",
-      skro: new Skroll(),
-      collect: [],
-      ws: null,
-      pcBannerList:[],
-      noticeList:[]
-
+        bannerList: [],
+        articleList: [],
+        homeList: [],
+        iconList: [],
+        marketList: [],
+        tab: "Optional",
+        searchTxt: "",
+        skro: new Skroll(),
+        collect: [],
+        ws: null,
+        pcBannerList:[],
+        noticeList:[],
+        data: [99, 71, 78, 25, 36, 92],
+        line: '',
     };
   },
   methods: {
+    
+    getScales(data) {
+        const x = d3.scaleTime().range([0, 100]);
+        const y = d3.scaleLinear().range([39, 0]);
+        d3.axisLeft().scale(x);
+        d3.axisBottom().scale(y);
+        x.domain(d3.extent(data, (d, i) => i));
+        y.domain([0, d3.max(data, d => d)]);
+        return { x, y };
+        },
+    calculatePath() {
+        this.marketList[0].marketInfoList.map(item=>{
+            const scale = this.getScales(item.prices);
+            const path = d3.line()
+            .x((d, i) => scale.x(i))
+            .y(d => scale.y(d));
+            // this.calculatePath(item.prices)
+            item.line = path(item.prices);
+        })
+    },
     truncate(str, length) {
-      return _.truncate(str, { length });
+        return _.truncate(str, { length });
     },
     isShow(str) {
       let reg = new RegExp(this.searchTxt, "ig");
@@ -523,16 +553,18 @@ export default {
     indexList() {
       Home.indexList()
         .then((res) => {
-          this.bannerList = res.bannerList;
-
-          this.homeList = res.homeList;
-          this.marketList = res.marketList;
-          this.iconList = res.iconList;
-          this.pcBannerList = res.pcBannerList
-          this.tab = this.marketList[0].coin_name;
-          setTimeout(() => {
-            this.skroll();
-          }, 100);
+            console.info(res)
+            this.bannerList = res.bannerList;
+
+            this.homeList = res.homeList;
+            this.marketList = res.marketList;
+            this.calculatePath()
+            this.iconList = res.iconList;
+            this.pcBannerList = res.pcBannerList
+            this.tab = this.marketList[0].coin_name;
+            setTimeout(() => {
+                this.skroll();
+            }, 100);
         })
         .catch((res) => {});
     },
@@ -673,11 +705,14 @@ export default {
       return (_time.getMonth()+1)+'-'+_time.getDate()
     }
   },
-  mounted() {
+created(){
     this.indexList();
+},
+mounted() {
+    // this.calculatePath();
     this.article()
     if (this.isLogin) {
-      this.getCollect();
+        this.getCollect();
     }
     this.indexMarketList();
     this.getArticleList()
@@ -728,6 +763,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+svg{
+    margin: 25px;
+}
+path{
+    fill: none;
+    stroke: #76BF8A;
+    stroke-width: 3px;
+}
 // .view-more {
 //     background: #fd5b2c !important;
 // }