Quellcode durchsuchen

feat(图表): 为三种图表类型添加tooltip交互功能

添加tooltip配置以增强图表交互性,包括触发方式和指针类型
huoyi vor 1 Monat
Ursprung
Commit
38e7002ab1

+ 12 - 0
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeOne.vue

@@ -206,6 +206,10 @@ const generateData = (count, min, max) => {
206
 
206
 
207
 const multiLineChartOption = (xAxisData, series) => ({
207
 const multiLineChartOption = (xAxisData, series) => ({
208
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
208
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
209
+  tooltip: {
210
+    trigger: 'axis',
211
+    axisPointer: { type: 'cross' }
212
+  },
209
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
213
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
210
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
214
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
211
   legend: { 
215
   legend: { 
@@ -230,6 +234,10 @@ const multiLineChartOption = (xAxisData, series) => ({
230
 
234
 
231
 const horizontalBarChartOption = (data, color) => ({
235
 const horizontalBarChartOption = (data, color) => ({
232
   grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
236
   grid: { left: '20%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
237
+  tooltip: {
238
+    trigger: 'axis',
239
+    axisPointer: { type: 'shadow' }
240
+  },
233
   xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
241
   xAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
234
   yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
242
   yAxis: { type: 'category', data: data.map(d => d.name), axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
235
   series: [{ 
243
   series: [{ 
@@ -243,6 +251,10 @@ const horizontalBarChartOption = (data, color) => ({
243
 
251
 
244
 const barLineChartOption = (xAxisData, barData, lineData) => ({
252
 const barLineChartOption = (xAxisData, barData, lineData) => ({
245
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
253
   grid: { left: '10%', top: '15%', right: '5%', bottom: '15%', containLabel: true },
254
+  tooltip: {
255
+    trigger: 'axis',
256
+    axisPointer: { type: 'cross' }
257
+  },
246
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
258
   xAxis: { type: 'category', data: xAxisData, axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' } },
247
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
259
   yAxis: { type: 'value', axisLine: { lineStyle: { color: '#999' } }, axisLabel: { fontSize: 10, color: '#666' }, splitLine: { lineStyle: { color: '#eee' } } },
248
   legend: { 
260
   legend: {