<template> <div ref="scEcharts" :style="{height:height, width:width}"></div> </template> <script> import * as echarts from 'echarts'; import T from './echarts-theme-T.js'; echarts.registerTheme('T', T); const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj); export default { ...echarts, name: "scEcharts", props: { height: {type: String, default: "100%"}, width: {type: String, default: "100%"}, nodata: {type: Boolean, default: false}, option: { type: Object, default: () => { } } }, data() { return { isActivat: false, myChart: null } }, watch: { option: { deep: true, handler(v) { unwarp(this.myChart).setOption(v); } } }, computed: { myOptions: function () { return this.option || {}; } }, activated() { if (!this.isActivat) { this.$nextTick(() => { this.myChart.resize() }) } }, deactivated() { this.isActivat = false; }, mounted() { this.isActivat = true; this.$nextTick(() => { this.draw(); }) }, methods: { draw() { var myChart = echarts.init(this.$refs.scEcharts, 'T'); myChart.setOption(this.myOptions); this.myChart = myChart; window.addEventListener('resize', () => myChart.resize()); } } } </script>

这是一个Vue组件，用于在Vue项目中使用ECharts图表。具体解释如下：

1. <template>和</template>标签中是组件的模板，这里使用了一个div元素作为ECharts的容器，并设置了其高度和宽度。

2. <script>和</script>标签中是组件的JavaScript代码，使用了ES6语法，导入了ECharts库和自定义的主题T，并注册了主题T。

3. props属性是组件的属性，height和width分别表示图表容器的高度和宽度，nodata表示是否显示无数据提示，option表示图表的配置项和数据，类型为对象，默认值为空对象。

4. data属性是组件的数据，isActivat表示组件是否激活，myChart表示ECharts实例对象。

5. watch属性是组件的监听器，当option属性发生变化时，更新ECharts图表。

6. computed属性是组件的计算属性，返回option属性的值，确保option属性的值始终为对象。

7. activated和deactivated是组件的生命周期钩子函数，activated在组件被激活时自动调用，deactivated在组件失活时自动调用。

8. mounted是组件的挂载钩子函数，当组件插入到DOM中时自动调用，此时调用draw方法绘制ECharts图表。

9. methods属性是组件的方法，draw方法用于绘制ECharts图表，并监听窗口大小变化事件，自动调整ECharts图表大小。