修改看板
夜笙歌
4 weeks ago
parent
a690458b08
commit
bec1fe819b
@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||
<NodeResizer 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 || '',
|
||||
type: 'category',
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#DCE2E8'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
interval: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
// 默认x轴字体大小
|
||||
fontSize: 12,
|
||||
// margin:文字到x轴的距离
|
||||
margin: 3
|
||||
},
|
||||
axisPointer: {
|
||||
label: {
|
||||
padding: [0, 0, 0, 0],
|
||||
margin: 0,
|
||||
// 移入时的字体大小
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
boundaryGap: true
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: props.data?.options?.yName || '',
|
||||
type: 'value',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
|
||||
offset: 0,
|
||||
color: '#0372FF'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#75ECFF'
|
||||
}
|
||||
])
|
||||
}
|
||||
},
|
||||
barMaxWidth: 50,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
const getOption = () => {
|
||||
const chartOption = {
|
||||
title: {
|
||||
text: props.data.options.title || ''
|
||||
},
|
||||
legend: {
|
||||
show: props.data?.options?.legend || false
|
||||
},
|
||||
tooltip: {
|
||||
show: props.data?.options?.tooltip || false
|
||||
},
|
||||
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 || ''
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
name: props.data?.options?.yName || ''
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
backgroundStyle: {
|
||||
color: props.data?.options?.backgroundColor || 'rgba(180, 180, 180, 0.2)'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
;
|
||||
let xData = [props.inputData?.x1 || []];
|
||||
let yData = [props.inputData?.y1 || []];
|
||||
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
|
||||
let source = [['product', ...[props.data.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);
|
||||
});
|
||||
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>
|
||||
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px'}">
|
||||
<NodeResizer 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'}">
|
||||
<el-icon style="color: #fff"
|
||||
v-if="props.data.options.icon || !(props.inputData?.imgSrc ||props.data.options.iconSrc)"
|
||||
:style="{width:props.dimensions.width+'px',height:props.dimensions.height+'px',fontSize:props.dimensions.width+'px' }">
|
||||
<component :is="icon[props.data.options.icon]" />
|
||||
</el-icon>
|
||||
<el-image style="width: 100%; height: 100%" v-if="props.inputData?.imgSrc ||props.data.options.iconSrc"
|
||||
:src="props.inputData?.imgSrc ||props.data.options.iconSrc || 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'"
|
||||
fit="contain" />
|
||||
</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 icon from '@element-plus/icons-vue';
|
||||
|
||||
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 emit = defineEmits(['resize']);
|
||||
const resize = (e) => {
|
||||
emit('resize', e, props.id);
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-node {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue