vue3+ts绘制echarts

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

努力站桩的奶酪呦

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

阅读量197

点赞数

CC 4.0 BY-SA版权

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/liuli0927/article/details/130214966

该代码段展示了如何在Vue的CompositionAPI中使用Echarts库初始化一个图表。它定义了一个类型为line的系列数据，基于周一到周五的x轴类别，以及对应的y轴数值。此外，还设置了窗口resize事件来动态调整图表大小。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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