You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
11 KiB
Vue
352 lines
11 KiB
Vue
<template>
|
|
<div
|
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
|
<NodeResizer @resizeEnd="(e) => $emit('resize', e)" color="#fff" v-if="!props.isView && !props.isHideHandle && props.selected" @resize="resize" />
|
|
|
|
<div class="custom-node"
|
|
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',pointerEvents:props.isView?'auto': 'none'}">
|
|
<div style="width: 100%;height: 100%" ref="chartRef" />
|
|
</div>
|
|
<Handle v-if="!props.isView" :id="`${props.id}.-t`" type="target" :position="Position.Left" />
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { defineEmits, defineProps, ref } from 'vue';
|
|
import { NodeResizer } from '@vue-flow/node-resizer';
|
|
import { Handle, Position } from '@vue-flow/core';
|
|
import * as echarts from 'echarts';
|
|
|
|
const props = defineProps({
|
|
isView: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
inputData: {
|
|
type: Object,
|
|
required: false
|
|
},
|
|
id: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
isHideHandle: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
selected: {
|
|
type: Boolean,
|
|
required: false
|
|
},
|
|
data: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
dimensions: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
});
|
|
const chartRef = ref();
|
|
let chart = null;
|
|
const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', '#9E87FF'];
|
|
const defaultOption = {
|
|
title: {
|
|
text: props.data.options.title || '',
|
|
textStyle: {
|
|
fontSize: 12,
|
|
fontWeight: 400,
|
|
color: '#fff'
|
|
},
|
|
left: '0',
|
|
top: '5%'
|
|
},
|
|
legend: {
|
|
show: props.data?.options?.legend || false,
|
|
icon: 'circle',
|
|
top: '5%',
|
|
right: '5%',
|
|
itemWidth: 6,
|
|
itemGap: 20,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
tooltip: {
|
|
show: props.data?.options?.tooltip || false,
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
label: {
|
|
show: true,
|
|
backgroundColor: '#fff',
|
|
color: '#000',
|
|
borderColor: 'rgba(0,0,0,0)',
|
|
shadowColor: 'rgba(0,0,0,0)',
|
|
shadowOffsetY: 0
|
|
},
|
|
lineStyle: {
|
|
width: 0
|
|
}
|
|
},
|
|
backgroundColor: '#fff',
|
|
textStyle: {
|
|
color: '#000'
|
|
},
|
|
padding: [10, 10],
|
|
extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
|
|
},
|
|
grid: {
|
|
top: props.data?.options?.gridTop + '%' || '20%',
|
|
left: props.data?.options?.gridLeft + '%' || '20%',
|
|
bottom: props.data?.options?.gridBottom + '%' || '20%',
|
|
right: props.data?.options?.gridRight + '%' || '20%'
|
|
},
|
|
xAxis: [
|
|
{
|
|
name: props.data?.options?.xName || '',
|
|
nameLocation: props.data?.options?.xNameLocation || 'end',
|
|
type: 'category',
|
|
boundaryGap: props.data?.options?.boundaryGap || false,
|
|
axisLine: {
|
|
show: props.data?.options?.xAxisLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: props.data?.options?.xAxisTickShow || false,
|
|
inside: props.data?.options?.xAxisTickInside || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: props.data?.options?.xAxisLabelShow || false,
|
|
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
|
|
inside: props.data?.options?.xAxisLabelInside || false,
|
|
formatter: props.data?.options?.xAxisLabelFormatter || null,
|
|
rotate: props.data?.options?.xAxisLabelRotate || 0,
|
|
color: props.data?.options?.xAxisLabelColor || '#fff',
|
|
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
|
|
margin: props.data?.options?.xAxisLabelMargin || 3
|
|
},
|
|
splitLine: {
|
|
show: props.data?.options?.xAxisSplitLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
|
|
type: props.data?.options?.xAxisSplitLineType || 'solid'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: props.data?.options?.yName || '',
|
|
nameLocation: props.data?.options?.yNameLocation || 'end',
|
|
type: 'value',
|
|
axisLine: {
|
|
show: props.data?.options?.yAxisLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: props.data?.options?.yAxisTickShow || false,
|
|
inside: props.data?.options?.yAxisTickInside || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: props.data?.options?.yAxisLabelShow || false,
|
|
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
|
|
inside: props.data?.options?.yAxisLabelInside || false,
|
|
formatter: props.data?.options?.yAxisLabelFormatter || null,
|
|
rotate: props.data?.options?.yAxisLabelRotate || 0,
|
|
color: props.data?.options?.yAxisLabelColor || '#fff',
|
|
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
|
|
margin: props.data?.options?.yAxisLabelMargin || 3
|
|
},
|
|
splitLine: {
|
|
show: props.data?.options?.yAxisSplitLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
|
|
type: props.data?.options?.yAxisSplitLineType || 'solid'
|
|
}
|
|
},
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
type: 'bar',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: props.data?.options?.seriesColor || '#0372FF'
|
|
}
|
|
},
|
|
barMaxWidth: 50,
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#fff',
|
|
fontSize: 16
|
|
}
|
|
}
|
|
]
|
|
};
|
|
const getOption = () => {
|
|
const options = props?.data?.options || {};
|
|
const data = props?.inputData || { x1: [], y1: [] };
|
|
const chartOption = {
|
|
title: {
|
|
text: options.title || ''
|
|
},
|
|
legend: {
|
|
show: options?.legend || false
|
|
},
|
|
tooltip: {
|
|
show: options?.tooltip || false
|
|
},
|
|
grid: {
|
|
top: options?.gridTop + '%' || '20%',
|
|
left: options?.gridLeft + '%' || '20%',
|
|
bottom: options?.gridBottom + '%' || '20%',
|
|
right: options?.gridRight + '%' || '20%'
|
|
},
|
|
xAxis: [
|
|
{
|
|
name: props.data?.options?.xName || '',
|
|
nameLocation: props.data?.options?.xNameLocation || 'end',
|
|
boundaryGap: props.data?.options?.boundaryGap || false,
|
|
axisLine: {
|
|
show: props.data?.options?.xAxisLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.xAxisLineColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: props.data?.options?.xAxisTickShow || false,
|
|
inside: props.data?.options?.xAxisTickInside || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.xAxisTickColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: props.data?.options?.xAxisLabelShow || false,
|
|
interval: props.data?.options?.xAxisLabelInterval ? 0 : 'auto',
|
|
inside: props.data?.options?.xAxisLabelInside || false,
|
|
formatter: props.data?.options?.xAxisLabelFormatter || null,
|
|
rotate: props.data?.options?.xAxisLabelRotate || 0,
|
|
color: props.data?.options?.xAxisLabelColor || '#fff',
|
|
fontSize: props.data?.options?.xAxisLabelFontSize || 12,
|
|
margin: props.data?.options?.xAxisLabelMargin || 3
|
|
},
|
|
splitLine: {
|
|
show: props.data?.options?.xAxisSplitLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.xAxisSplitLineColor || '#DCE2E8',
|
|
type: props.data?.options?.xAxisSplitLineType || 'solid'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: props.data?.options?.yName || '',
|
|
nameLocation: props.data?.options?.yNameLocation || 'end',
|
|
axisLine: {
|
|
show: props.data?.options?.yAxisLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.yAxisLineColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: props.data?.options?.yAxisTickShow || false,
|
|
inside: props.data?.options?.yAxisTickInside || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.yAxisTickColor || '#DCE2E8'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
show: props.data?.options?.yAxisLabelShow || false,
|
|
interval: props.data?.options?.yAxisLabelInterval ? 0 : 'auto',
|
|
inside: props.data?.options?.yAxisLabelInside || false,
|
|
formatter: props.data?.options?.yAxisLabelFormatter || null,
|
|
rotate: props.data?.options?.yAxisLabelRotate || 0,
|
|
color: props.data?.options?.yAxisLabelColor || '#fff',
|
|
fontSize: props.data?.options?.yAxisLabelFontSize || 12,
|
|
margin: props.data?.options?.yAxisLabelMargin || 3
|
|
},
|
|
splitLine: {
|
|
show: props.data?.options?.yAxisSplitLineShow || false,
|
|
lineStyle: {
|
|
color: props.data?.options?.yAxisSplitLineColor || '#DCE2E8',
|
|
type: props.data?.options?.yAxisSplitLineType || 'solid'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
backgroundStyle: {
|
|
color: options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
let xData = [data?.x1 || []];
|
|
let yData = [data?.y1 || []];
|
|
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
|
|
let source = [['product', ...[options?.yNames?.[0] || '']]];
|
|
Array(length).fill(0).forEach((_, i) => {
|
|
let item = [];
|
|
xData.forEach(e => {
|
|
item.push(e[i]);
|
|
});
|
|
yData.forEach(e => {
|
|
item.push(parseFloat(e[i]));
|
|
});
|
|
source.push(item);
|
|
});
|
|
console.log(source);
|
|
return {
|
|
...chartOption,
|
|
dataset: {
|
|
source
|
|
}
|
|
};
|
|
};
|
|
onMounted(() => {
|
|
chart = echarts.init(chartRef.value, 'macarons', {
|
|
renderer: 'svg'
|
|
});
|
|
chart.setOption(defaultOption, true);
|
|
chart && chart.setOption(getOption(), false);
|
|
});
|
|
watch(() => [JSON.parse(JSON.stringify(props.inputData)), JSON.parse(JSON.stringify(props.data.options))], (obj1, obj2) => {
|
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
|
chart && chart.setOption(getOption(), false);
|
|
}
|
|
}, { deep: true, immediate: true });
|
|
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
|
|
if (JSON.stringify(obj1) !== JSON.stringify(obj2)) {
|
|
chart?.resize();
|
|
}
|
|
}, { deep: true, immediate: true });
|
|
const emit = defineEmits(['resize']);
|
|
const resize = (e) => {
|
|
chart.resize();
|
|
emit('resize', e, props.id);
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.custom-node {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
</style>
|