SaaS-lib/lib/component/echarts/echarts.vue

<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>