vue3+ts使⽤echarts <template>
<div ref="myChart" :></div>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Message from "@/components/message/Message.vue";
import { ref } from "vue";
import * as echarts from "echarts";
export default defineComponent({
name: "home",
components: {
Swiper,
Message,
},
data() {
return {
};
},
setup(){
const myChart = ref<HTMLElement>();  //也可以⽤const myChart = ref<any>();
console.log(myChart);
const myCharts = ref<any>();
setTimeout(() => {
// 绘制图表
myCharts.value = echarts.init(myChart.value!);
myCharts.value.setOption({
title: { text: "降⽔量" },
tooltip: {},
xAxis: {
data: ["6-3", "6-4", "6-5", "6-6", "6-7", "6-8"],
},
yAxis: {},
series: [
{
name: "降⽔量",
type: "line",
data: [5, 20, 36, 10, 10, 20],
},
],
});
}, 10);
return {
myChart,
};
}
});
setoption</script>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。