实现效果:
<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: ()=>{
return [] },
legendData