Sfoglia il codice sorgente

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

添加tooltip配置以增强图表交互性,包括触发方式和指针类型
huoyi 1 mese fa
parent
commit
38e7002ab1

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

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