init dev-push code ui base design

components/common/ColumnChart.vue

@@ -0,0 +1,84 @@
+<template>
+  <v-chart class="chart" :option="option" autoresize style="width: 400px; height: 300px;" />
+</template>
+
+<script>
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { PieChart } from 'echarts/charts';
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components';
+import VChart, { THEME_KEY } from 'vue-echarts';
+import { ref } from 'vue';
+
+import { defineComponent } from '@vue/composition-api';
+
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+]);
+
+export default defineComponent({
+  name: 'ColumnChart',
+  components: {
+    VChart,
+  },
+  provide: {
+    [THEME_KEY]: 'dark',
+  },
+  setup() {
+    const option = ref({
+      title: {
+        text: 'Traffic Sources',
+        left: 'center',
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: '{a} <br/>{b} : {c} ({d}%)',
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+        data: ['Direct', 'Email', 'Ad Networks', 'Video Ads', 'Search Engines'],
+      },
+      series: [
+        {
+          name: 'Traffic Sources',
+          type: 'pie',
+          radius: '55%',
+          center: ['50%', '60%'],
+          data: [
+            { value: 335, name: 'Direct' },
+            { value: 310, name: 'Email' },
+            { value: 234, name: 'Ad Networks' },
+            { value: 135, name: 'Video Ads' },
+            { value: 1548, name: 'Search Engines' },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    });
+
+    return { option };
+  },
+});
+</script>
+
+<style scoped>
+.chart {
+  height: 100vh;
+}
+</style>