封装echarts折线图（基于Vue3、TS）

清华小菜

已于 2023-03-16 17:02:29 修改

阅读量539

点赞数

文章标签： echarts 折线图 TS

于 2023-03-16 16:57:00 首次发布

本文链接：https://blog.csdn.net/C90283/article/details/129589996

版权

本文档将介绍如何在Vue3项目中使用TypeScript封装Echarts组件，特别是绘制折线图。通过封装，可以实现图表组件的复用，并提高代码的可维护性。内容涵盖Echarts配置、Vue3组件化思想以及TypeScript类型定义。

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

实现效果：
在这里插入图片描述

<template>
    <div :id="id" :style="{ width: width , height: height }"></div>
</template>
 
<script lang="ts" setup>
interface Props{
   
    id?:string,
    type?:string,
    width?:string,
    height?:string,
    barWidth?:string, //柱体宽度
    color?:string[],
    yname?:string, //y轴顶部字段
    data?:number[][],
    name?:string[], //x轴坐标数组
    percentData?: string[], //柱体中显示的百分比
    series?: string[], //图表顶部分类字段
    legendData?: object 
  }
  const props = withDefaults(defineProps<Props>(),{
   
    id:'square',
    width:'100%',
    height:'500px',
    color : ()=>{
   
      return ["#ff9144", "#00cd98", "#0081fb"]
    },
    yname: '',
    data: ()=>{
    return [] },
    name: ()=>{
    return [] },
    type:'0',
    percentData: ()=>{
    return [] },
    series: ()=>{

最低0.47元/天解锁文章