push

lib/component/echarts/echarts.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="ns-chart">
+    <v-chart :id="id" ref="chart" />
+  </div>
+</template>
+
+<script lang="ts">
+  import * as echarts from 'echarts/core';
+  import { use } from 'echarts/core';
+  import { CanvasRenderer } from 'echarts/renderers';
+  import { LineChart } from 'echarts/charts';
+  import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
+  import VChart, { THEME_KEY } from 'vue-echarts';
+  import { defineComponent, onMounted, reactive, ref } from 'vue';
+  import { PieChart, BarChart, ScatterChart, RadarChart } from 'echarts/charts';
+  import 'echarts/lib/component/grid';
+  import { GridComponent } from 'echarts/components';
+
+  use([
+    CanvasRenderer,
+    LineChart,
+    PieChart,
+    BarChart,
+    ScatterChart,
+    RadarChart,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    GridComponent,
+  ]);
+
+  export default defineComponent({
+    components: {
+      VChart,
+    },
+    provide: {
+      [THEME_KEY]: 'light',
+    },
+    props: {
+      id: String,
+      option: {
+        type: Object,
+        default: () => ({}),
+      },
+    },
+
+    setup(props) {
+      // var id=ref<String>('');
+      onMounted(() => {
+        const getOptions = () => {
+          console.log('sdada');
+          console.log(props.id);
+          var chart = echarts.init(document.getElementById(props.id));
+          chart.showLoading();
+          setTimeout(() => {
+            console.log('loading');
+            chart.hideLoading();
+            chart.setOption(props.option);
+          }, 2000);
+        };
+        getOptions();
+      });
+
+      return {
+        props,
+      };
+    },
+  });
+</script>
+
+<style scoped>
+  .ns-chart {
+    height: 500px;
+    width: 450px;
+    border: 1px solid #dcdfe2;
+    margin: 5px;
+  }
+</style>