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

实现效果：

<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: ()=>{
    r