diff --git a/src/components/capsuleChart/index.vue b/src/components/capsuleChart/index.vue
new file mode 100644
index 0000000..d969350
--- /dev/null
+++ b/src/components/capsuleChart/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="capsule-chart">
+    this is capsule chart
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CapsuleChart'
+}
+</script>
+
+<style lang="less">
+.capsule-chart {}
+</style>
diff --git a/src/components/ringChart/index.vue b/src/components/ringChart/index.vue
new file mode 100644
index 0000000..d65ffe7
--- /dev/null
+++ b/src/components/ringChart/index.vue
@@ -0,0 +1,15 @@
+<template>
+  <div class="ring-chart">
+    this is ring chart
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RingChart'
+}
+</script>
+
+<style lang="less">
+.ring-chart {}
+</style>