From 9d496497c8f4b9fea9609efd20b96b44016c305d Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 03 十一月 2025 17:43:00 +0800
Subject: [PATCH] 付款流水-添加采购合同号筛选
---
src/components/Echarts/echarts.vue | 55 ++++++++++++++++++++++++++++++++++---------------------
1 files changed, 34 insertions(+), 21 deletions(-)
diff --git a/src/components/Echarts/echarts.vue b/src/components/Echarts/echarts.vue
index 4601e41..a386bb7 100644
--- a/src/components/Echarts/echarts.vue
+++ b/src/components/Echarts/echarts.vue
@@ -1,6 +1,7 @@
<template>
- <div>
+ <div style="position: relative;">
<div ref="chartRef" :style="chartStyle"></div>
+ <slot></slot>
</div>
</template>
@@ -70,7 +71,19 @@
maskColor: 'rgba(255, 255, 255, 0.8)',
zlevel: 0
})
- }
+ },
+ color: {
+ type: Array,
+ default: () => []
+ },
+ visualMap: {
+ type: Object,
+ default: () => ({})
+ },
+ option: {
+ type: Object,
+ default: () => ({})
+ },
})
import { watch } from 'vue'
@@ -81,38 +94,38 @@
// Methods
function generateChart(option) {
- const copiedOption = JSON.parse(JSON.stringify(option)) // 鉁� 娣辨嫹璐�
+ const copiedOption = option
- // if (copiedOption.series && copiedOption.series.length > 0) {
- // copiedOption.series.forEach((s, index) => {
- // if (s.type === 'line') {
- // s.itemStyle = {
- // color: props.lineColors[index] || props.lineColors[0]
- // }
- // s.lineStyle = {
- // color: props.lineColors[index] || props.lineColors[0]
- // }
- // } else if (s.type === 'bar') {
- // s.itemStyle = {
- // color: props.barColors[index] || props.barColors[0]
- // }
- // }
- // })
- // }
+ if (copiedOption.series && copiedOption.series.length > 0) {
+ copiedOption.series.forEach((s, index) => {
+ if (s.type === 'line' && props.lineColors.length) {
+ s.itemStyle = s.itemStyle || {}
+ s.lineStyle = s.lineStyle || {}
+ s.itemStyle.color = props.lineColors[index] || props.lineColors[0]
+ s.lineStyle.color = props.lineColors[index] || props.lineColors[0]
+ } else if (s.type === 'bar' && props.barColors.length) {
+ s.itemStyle = s.itemStyle || {}
+ s.itemStyle.color = props.barColors[index] || props.barColors[0]
+ }
+ })
+ }
chartInstance.setOption(copiedOption)
}
function renderChart() {
const option = {
+ color: props.color.length ? props.color : undefined,
backgroundColor: props.options.backgroundColor || '#fff',
+ textStyle: props.options.textStyle || { color: '#333' },
xAxis: props.xAxis,
yAxis: props.yAxis,
dataset: props.dataset,
series: props.series,
grid: props.grid,
legend: props.legend,
- tooltip: props.tooltip
+ tooltip: props.tooltip,
+ visualMap: Object.keys(props.visualMap).length ? props.visualMap : undefined,
}
chartInstance.clear()
@@ -141,7 +154,7 @@
// Watch all reactive props that affect the chart
watch(
- () => [props.xAxis, props.series],
+ () => [props.xAxis, props.yAxis, props.series, props.legend, props.tooltip, props.visualMap],
() => {
if (chartInstance) {
renderChart()
--
Gitblit v1.9.3