|
@@ -194,7 +194,7 @@ export default {
|
|
|
renderViolinChart(data, label) {
|
|
|
const chartContainer = document.createElement('div');
|
|
|
chartContainer.style.width = '100%';
|
|
|
- chartContainer.style.height = '600px';
|
|
|
+ chartContainer.style.height = '800px';
|
|
|
chartContainer.id = `violinChart_${label}`;
|
|
|
chartContainer.classList.add('dynamic-chart');
|
|
|
document.querySelector('.dynamic-charts').appendChild(chartContainer);
|
|
@@ -203,16 +203,13 @@ export default {
|
|
|
this.dynamicChartContainers.push(chartContainer);
|
|
|
|
|
|
const traces = data.map((item, index) => {
|
|
|
- let name;
|
|
|
- if (typeof item.hour === 'number') {
|
|
|
- name = `${item.hour}小时`;
|
|
|
- } else {
|
|
|
- name = item.hour;
|
|
|
- }
|
|
|
+ console.log('item', item);
|
|
|
+ const xValue = item.hour; // 直接使用 item.hour
|
|
|
return {
|
|
|
type: 'violin',
|
|
|
+ x: [xValue],
|
|
|
y: item.y,
|
|
|
- name,
|
|
|
+ name: xValue,
|
|
|
box: {
|
|
|
visible: true,
|
|
|
line: {
|
|
@@ -232,6 +229,9 @@ export default {
|
|
|
};
|
|
|
});
|
|
|
|
|
|
+ // 提取所有 x 轴标签
|
|
|
+ const xLabels = data.map((item) => item.hour);
|
|
|
+
|
|
|
const layout = {
|
|
|
title: {
|
|
|
text: label,
|
|
@@ -251,48 +251,59 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
tickfont: {
|
|
|
- size: 14,
|
|
|
+ size: 12,
|
|
|
color: '#666'
|
|
|
- }
|
|
|
+ },
|
|
|
+ type: 'linear',
|
|
|
+ automargin: true
|
|
|
},
|
|
|
xaxis: {
|
|
|
title: {
|
|
|
- text: typeof data[0]?.hour === 'number' ? '小时' : '日期',
|
|
|
+ text: '日期',
|
|
|
font: {
|
|
|
size: 16,
|
|
|
color: '#666'
|
|
|
}
|
|
|
},
|
|
|
+ tickmode: 'array',
|
|
|
+ tickvals: xLabels,
|
|
|
+ ticktext: xLabels,
|
|
|
tickfont: {
|
|
|
- size: 14,
|
|
|
+ size: 12,
|
|
|
color: '#666'
|
|
|
},
|
|
|
- tickangle: -45
|
|
|
+ tickangle: -45,
|
|
|
+ automargin: true
|
|
|
},
|
|
|
violinmode: 'group',
|
|
|
margin: {
|
|
|
l: 80,
|
|
|
r: 80,
|
|
|
- b: 120,
|
|
|
+ b: 80,
|
|
|
t: 120,
|
|
|
pad: 10
|
|
|
},
|
|
|
legend: {
|
|
|
font: {
|
|
|
- size: 14,
|
|
|
+ size: 12,
|
|
|
color: '#666'
|
|
|
},
|
|
|
orientation: 'h',
|
|
|
yanchor: 'top',
|
|
|
- y: -0.2,
|
|
|
+ y: -0.3,
|
|
|
xanchor: 'center',
|
|
|
x: 0.5
|
|
|
},
|
|
|
plot_bgcolor: '#fff',
|
|
|
- paper_bgcolor: '#fff'
|
|
|
+ paper_bgcolor: '#fff',
|
|
|
+ dragmode: false,
|
|
|
+ };
|
|
|
+ // 直接隐藏工具栏
|
|
|
+ const config = {
|
|
|
+ displayModeBar: false
|
|
|
};
|
|
|
|
|
|
- Plotly.newPlot(chartContainer, traces, layout);
|
|
|
+ Plotly.newPlot(chartContainer, traces, layout,config);
|
|
|
},
|
|
|
|
|
|
renderLineChart(data, label) {
|
|
@@ -473,7 +484,7 @@ export default {
|
|
|
hour, // 直接使用原始的日期字符串
|
|
|
yxs: groupedData[hour].yxs,
|
|
|
yxl: groupedData[hour].yxl
|
|
|
- })).sort((a, b) => new Date(a.hour) - new Date(b.hour)); // 按日期排序
|
|
|
+ })) // 按日期排序
|
|
|
},
|
|
|
updateCharts() {
|
|
|
const xData = this.lineData.map(item => item.hour);
|