vue3+ts绘制echarts

最新推荐文章于 2023-11-30 11:08:02 发布

努力站桩的奶酪呦

最新推荐文章于 2023-11-30 11:08:02 发布

阅读量148

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/liuli0927/article/details/130214966

版权

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