diff --git a/src/views/boardGenerate/index.vue b/src/views/boardGenerate/index.vue
index 35b2dc0..3139488 100644
--- a/src/views/boardGenerate/index.vue
+++ b/src/views/boardGenerate/index.vue
@@ -266,6 +266,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{
const chartOption = {
title: {
- text: props.data.options.title || '设备运行数量',
- textStyle: {
- fontSize: 12,
- fontWeight: 400,
- color: '#fff'
- },
- left: '0',
- top: '5%'
- },
- legend: {
- icon: 'circle',
- top: '5%',
- right: '5%',
- itemWidth: 6,
- itemGap: 20,
- textStyle: {
- color: '#fff'
- }
- },
- tooltip: {
- 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)'
+ text: props.data.options.title || '',
},
grid: {
- top: '30%',
- bottom: '10%'
+ 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: [
{
- 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
+ name:props.data?.options?.xName || '',
}
],
yAxis: [
{
- type: 'value',
- axisTick: {
- show: false
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: '#fff'
- }
- },
- axisLabel: {
- textStyle: {
- color: '#fff'
- }
- },
- splitLine: {
- show: false
- }
+ name:props.data?.options?.yName || '',
}
],
- series: [
- {
- type: 'line',
- symbolSize: 1,
- symbol: 'circle',
- smooth: false,
- yAxisIndex: 0,
- showSymbol: false,
- lineStyle: {
- width: 1,
- color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
- {
- offset: 0,
- color: '#9effff'
- },
- {
- offset: 1,
- color: '#9E87FF'
- }
- ]),
- shadowColor: 'rgba(158,135,255, 0.3)',
- shadowBlur: 10,
- shadowOffsetY: 20
- },
- itemStyle: {
- normal: {
- color: colorList[0],
- borderColor: colorList[0]
- }
- }
- }
- ]
};
+ console.log(chartOption);
let xData = [props.inputData?.x1 || []];
let yData = [props.inputData?.y1 || []];
let length = Math.min(...xData.map(e => e.length), ...yData.map(e => e.length));
@@ -209,12 +232,12 @@ onMounted(() => {
chart = echarts.init(chartRef.value, 'macarons', {
renderer: 'svg'
});
- chart.setOption(getOption(), true);
+ 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(), true);
+ chart && chart.setOption(getOption(), false);
}
}, { deep: true, immediate: true });
watch(() => JSON.parse(JSON.stringify(props.dimensions)), (obj1, obj2) => {
diff --git a/src/views/boardGenerate/tool.js b/src/views/boardGenerate/tool.js
index 6d40343..023f05f 100644
--- a/src/views/boardGenerate/tool.js
+++ b/src/views/boardGenerate/tool.js
@@ -10,11 +10,11 @@ const getId = (type) => {
const getOption = (e) => {
if (e === 'line' || e === 'multiLines') {
- return { title: '', yNames: [] };
+ return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
} else if (e === 'bar' || e === 'multiBars') {
- return { title: '', yNames: [] };
+ return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
} else if (e === 'curve' || e === 'multiCurves') {
- return { title: '', yNames: [] };
+ return { title: '', yNames: [],gridTop:30,gridLeft:5,gridBottom:10,gridRight:10,xName:'',yName:'' };
} else if (e === 'pie') {
return { title: '', yNames: [] };
} else if (e === 'customBoard') {