业务组件调用代码

<template><lineCom :title="lineComProps.title" :legendDataList="lineComProps.legendDataList":FeatureList="lineComProps.FeatureList" :xAxisData="lineComProps.xAxisData":seriesMultipleFlag="lineComProps.seriesMultipleFlag":seriseMultipleName="lineComProps.seriseMultipleName":seriseMultipleData="lineComProps.seriseMultipleData":xAxisProps="lineComProps.xAxisProps"></lineCom>
</template>
<script lang="ts" setup>import { reactive } from "vue"import lineCom from "../../components/echartsCom/lineCom.vue"const lineComProps = reactive({title: "折线图",legendDataList: ["Email"],//, "Union Ads", "Video Ads", "Direct", "Search Engine"FeatureList: ["saveAsImage"],//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']    xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],seriesMultipleFlag: true,seriseMultipleName: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],seriseMultipleData: [[120, 132, 101, 134, 90, 230, 210],[220, 182, 191, 234, 290, 330, 310],[150, 232, 201, 154, 190, 330, 410],[320, 332, 301, 334, 390, 330, 320],[820, 932, 901, 934, 1290, 1330, 1320]],seriseSingleName: 'Email',seriseSingleData: [220, 182, 191, 234, 290, 330, 310],xAxisProps: {type: "category",boundaryGap: false,name:'x轴'}})</script>

组件代码

<template><div style="width: 100%; height: 100%" id="lineEchartDom"></div>
</template><script setup lang='ts'>
import * as echarts from "echarts";
import { onMounted, defineProps } from "vue";
const propsVal = defineProps({title: {//标题type: String,default: '折线图'},legendDataList: {//图例组件的数据type: Array,default: []},legendProps: {//图例组件的基本配置type: Object,default: {right: 30,top: 30,itemHeight: 10,itemGap: 10,icon: "circle",//可选 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'textStyle: {//文字颜色color: "#333333"}}},grid: {//网格的配置type: Object,default: {top: "15%",//组件距离容器 上侧 的距离left: "3%",//组件距离容器 左侧 的距离right: "4%",//组件距离容器 右侧 的距离bottom: "3%",//组件距离容器 下侧 的距离containLabel: true,//组件距离容器 上侧 的距离}},FeatureList: {//工具配置项显示 type: Array,default: []//['saveAsImage','restore','dataView',"dataZoom",'magicType','brush']},xAxisData: {//x 坐标轴数据 type: Array,default: []//'value' 数值轴，适用于连续数据// 'category'// time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度// 'log' 对数轴。适用于对数数据。},xAxisProps: {//x 坐标轴配置type: Object,defualt: {type: "category",boundaryGap: false,}},yAxisProps: {//y 坐标轴配置type: Object,default: {type: "value"}},seriesMultipleFlag: {//是否开启多组数据type: Boolean,defult: false},seriseSingleName: {//单组 的名称type: Array,default: ""},seriseSingleData: {//单组的 数据type: Array,default: []},seriseMultipleName: {//多组的名称type: Array,default: []},seriseMultipleData: {//多组的数据type: Array,default: []},color: {type: Array,default: ['#80FFA5','#00DDFF','#37A2FF','#FF0087','#FFBF00']}
})
let myChart: any = nullonMounted(() => {const lineEchartDomEl = document.getElementById("lineEchartDom");myChart = echarts.init(lineEchartDomEl);console.log("mychart", myChart)myChart.setOption(option);})
const handleSeriesData = () => {const seriesData: any = []if (!propsVal.seriesMultipleFlag) {seriesData.push({type: 'line',stack: 'Total',name: propsVal.seriseSingleName,data: propsVal.seriseSingleData})} else {propsVal.seriseMultipleName.forEach((ele, index) => {const item = {type: 'line',stack: 'Total',name: ele,data: propsVal.seriseMultipleData[index]}seriesData.push(item)})}console.log("seriesData: ", seriesData)return seriesData
}
const option = {title: {text: propsVal.title,},tooltip: {trigger: "axis",},legend: {data: propsVal.legendDataList,...propsVal.legendProps},grid: propsVal.grid,toolbox: {feature: {saveAsImage: propsVal.FeatureList.includes("saveAsImage") ? {} : null,restore: propsVal.FeatureList.includes("restore") ? {} : null,dataView: propsVal.FeatureList.includes("dataView") ? {} : null,magicType: propsVal.FeatureList.includes("magicType") ? {} : null,brush: propsVal.FeatureList.includes("brush") ? {} : null},},xAxis: {data: propsVal.xAxisData,...propsVal.xAxisProps},yAxis: {type: "value",},series: handleSeriesData(),color:propsVal.color
};
</script><style></style>