diff --git a/src/components/charts/register.js b/src/components/charts/register.js
index c826f485..076be273 100644
--- a/src/components/charts/register.js
+++ b/src/components/charts/register.js
@@ -1,16 +1,16 @@
 import Vue from 'vue'
 
-Vue.component('G2AreaBase', () => import('@/components/charts/G2/components/Area/base.vue'))
+Vue.component('d2-chart-area-base', () => import('@/components/charts/G2/components/Area/base.vue'))
 
-Vue.component('G2BarBase', () => import('@/components/charts/G2/components/Bar/base.vue'))
+Vue.component('d2-chart-bar-base', () => import('@/components/charts/G2/components/Bar/base.vue'))
 
-Vue.component('G2ColumnBase', () => import('@/components/charts/G2/components/Column/base.vue'))
+Vue.component('d2-chart-column-base', () => import('@/components/charts/G2/components/Column/base.vue'))
 
-Vue.component('G2LineBase', () => import('@/components/charts/G2/components/Line/base.vue'))
-Vue.component('G2LineStep', () => import('@/components/charts/G2/components/Line/step.vue'))
+Vue.component('d2-chart-line-base', () => import('@/components/charts/G2/components/Line/base.vue'))
+Vue.component('d2-chart-line-step', () => import('@/components/charts/G2/components/Line/step.vue'))
 
-Vue.component('G2NightingaleRoseBase', () => import('@/components/charts/G2/components/NightingaleRose/base.vue'))
+Vue.component('d2-chart-nightingale-rose-base', () => import('@/components/charts/G2/components/NightingaleRose/base.vue'))
 
-Vue.component('G2PieBase', () => import('@/components/charts/G2/components/Pie/base.vue'))
+Vue.component('d2-chart-pie-base', () => import('@/components/charts/G2/components/Pie/base.vue'))
 
-Vue.component('G2RadarBase', () => import('@/components/charts/G2/components/Radar/base.vue'))
+Vue.component('d2-chart-radar-base', () => import('@/components/charts/G2/components/Radar/base.vue'))
diff --git a/src/pages/demo/chart/all/index.vue b/src/pages/demo/chart/all/index.vue
index 53a9a4c0..30674e3e 100644
--- a/src/pages/demo/chart/all/index.vue
+++ b/src/pages/demo/chart/all/index.vue
@@ -3,50 +3,50 @@
     <el-row :gutter="20">
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></ChartCardHeader>
+          <d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></ChartCardHeader>
+          <d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></ChartCardHeader>
+          <d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></ChartCardHeader>
+          <d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></ChartCardHeader>
+          <d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></ChartCardHeader>
+          <d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></ChartCardHeader>
+          <d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></ChartCardHeader>
+          <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
       </el-col>
     </el-row>
@@ -63,49 +63,49 @@ export default {
       chart: [
         {
           api: {url: '/api/chart/G2Line', data: {type: 'base'}},
-          refName: 'G2LineBase',
+          refName: 'd2-chart-line-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
-          refName: 'G2LineStep',
+          refName: 'd2-chart-line-step',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Column', data: {type: 'base'}},
-          refName: 'G2ColumnBase',
+          refName: 'd2-chart-column-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
-          refName: 'G2BarBase',
+          refName: 'd2-chart-bar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
-          refName: 'G2PieBase',
+          refName: 'd2-chart-pie-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
-          refName: 'G2NightingaleRoseBase',
+          refName: 'd2-chart-nightingale-rose-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
-          refName: 'G2RadarBase',
+          refName: 'd2-chart-radar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Area', data: {type: 'base'}},
-          refName: 'G2AreaBase',
+          refName: 'd2-chart-area-base',
           ready: false,
           data: []
         }
diff --git a/src/pages/demo/chart/demo/PieBase.vue b/src/pages/demo/chart/demo/PieBase.vue
index 069afdec..73e67aab 100644
--- a/src/pages/demo/chart/demo/PieBase.vue
+++ b/src/pages/demo/chart/demo/PieBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2PieBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2PieBase>
+      <d2-chart-pie-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-pie-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index 37993242..e13c2606 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2AreaBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2AreaBase>
+      <d2-chart-area-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-area-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/barBase.vue b/src/pages/demo/chart/demo/barBase.vue
index 9d7162a1..a257df0d 100644
--- a/src/pages/demo/chart/demo/barBase.vue
+++ b/src/pages/demo/chart/demo/barBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2BarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2BarBase>
+      <d2-chart-bar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-bar-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/columnBase.vue b/src/pages/demo/chart/demo/columnBase.vue
index fe1c7ca5..c6da31a0 100644
--- a/src/pages/demo/chart/demo/columnBase.vue
+++ b/src/pages/demo/chart/demo/columnBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2ColumnBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2ColumnBase>
+      <d2-chart-column-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-column-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/lineBase.vue b/src/pages/demo/chart/demo/lineBase.vue
index 7517609b..b01286e3 100644
--- a/src/pages/demo/chart/demo/lineBase.vue
+++ b/src/pages/demo/chart/demo/lineBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2LineBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineBase>
+      <d2-chart-line-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/lineStep.vue b/src/pages/demo/chart/demo/lineStep.vue
index bb832b78..802fcbc9 100644
--- a/src/pages/demo/chart/demo/lineStep.vue
+++ b/src/pages/demo/chart/demo/lineStep.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2LineStep slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineStep>
+      <d2-chart-line-step slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-step>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/nightingaleRoseBase.vue b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
index 91211dff..e7e4f1f6 100644
--- a/src/pages/demo/chart/demo/nightingaleRoseBase.vue
+++ b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2NightingaleRoseBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2NightingaleRoseBase>
+      <d2-chart-nightingale-rose-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-nightingale-rose-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/demo/radarBase.vue b/src/pages/demo/chart/demo/radarBase.vue
index 9e25897d..6451b317 100644
--- a/src/pages/demo/chart/demo/radarBase.vue
+++ b/src/pages/demo/chart/demo/radarBase.vue
@@ -1,7 +1,7 @@
 <template>
   <d2-container type="ghost" :responsive="true">
     <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2RadarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2RadarBase>
+      <d2-chart-radar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-radar-base>
     </ChartDemoCard>
     <el-card>
       <d2-markdown url="/static/md/组件 - 图表.md"/>
diff --git a/src/pages/demo/chart/dynamicSize/index.vue b/src/pages/demo/chart/dynamicSize/index.vue
index 7dd32fd6..29ba5b13 100644
--- a/src/pages/demo/chart/dynamicSize/index.vue
+++ b/src/pages/demo/chart/dynamicSize/index.vue
@@ -4,57 +4,57 @@
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></ChartCardHeader>
+          <d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></ChartCardHeader>
+          <d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></ChartCardHeader>
+          <d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></ChartCardHeader>
+          <d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></ChartCardHeader>
+          <d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></ChartCardHeader>
+          <d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></ChartCardHeader>
+          <d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
         <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></ChartCardHeader>
+          <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
       </d2-grid-item>
     </d2-grid-layout>
@@ -71,49 +71,49 @@ export default {
       chart: [
         {
           api: {url: '/api/chart/G2Line', data: {type: 'base'}},
-          refName: 'G2LineBase',
+          refName: 'd2-chart-line-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
-          refName: 'G2LineStep',
+          refName: 'd2-chart-line-step',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Column', data: {type: 'base'}},
-          refName: 'G2ColumnBase',
+          refName: 'd2-chart-column-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
-          refName: 'G2BarBase',
+          refName: 'd2-chart-bar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
-          refName: 'G2PieBase',
+          refName: 'd2-chart-pie-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
-          refName: 'G2NightingaleRoseBase',
+          refName: 'd2-chart-nightingale-rose-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
-          refName: 'G2RadarBase',
+          refName: 'd2-chart-radar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Area', data: {type: 'base'}},
-          refName: 'G2AreaBase',
+          refName: 'd2-chart-area-base',
           ready: false,
           data: []
         }