<template>
<div ref="mychart" id="chart1"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
// 定义chart1的类型
onMounted(()=>{
const chartOne : HTMLElement = document.getElementById('chart1') as HTMLElement;
echarts.init(chartOne).dispose()
const myEchart = echarts.init(chartOne);
const option={
xAxis:{
type:'category',
data:['周一','周二','周三','周四','周五']
},
yAxis:{
type:'value',
},
series:[
{data:[100,200,300,120,150],
type:'line'}
]
}
option && myEchart.setOption(option);
window.addEventListener("resize", function () {
myEchart.resize();
});
})
</script>
<style scoped>
#chart1{
width: 300px;
height: 300px;
}
</style>
vue3+ts绘制echarts
最新推荐文章于 2023-11-30 11:08:02 发布