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