diff --git a/src/components/other/chartFullscreen.vue b/src/components/other/chartFullscreen.vue index cf03ef6..533cd3a 100644 --- a/src/components/other/chartFullscreen.vue +++ b/src/components/other/chartFullscreen.vue @@ -40,6 +40,9 @@ type="2d" id="fullscreen-chart" :style="canvasStyle" + @touchend="touchEnd" + @touchstart="touchStart" + @touchmove="touchMove" > @@ -132,6 +135,8 @@ onUnmounted(() => { const chartWidth = ref(0); const chartHeight = ref(0); const chartPixelRatio = ref(1); +const chartTop = ref(0); +const chartLeft = ref(0); // 初始化图表 function initChart() { @@ -294,6 +299,17 @@ function drawChart() { Taro.nextTick(() => { const env = Taro.getEnv(); + // 获取 canvas 位置 + const query = Taro.createSelectorQuery(); + query.select('#fullscreen-chart').boundingClientRect(); + query.selectViewport().scrollOffset(); + query.exec((res) => { + if (res.length > 0 && res[0]) { + chartTop.value = res[0].top || 0; + chartLeft.value = res[0].left || 0; + } + }); + if (env === Taro.ENV_TYPE.WEB) { // H5 环境 setTimeout(() => { @@ -336,6 +352,30 @@ function drawChart() { tofix: 2, }, extra: { + tooltip: { + showBox: true, + showArrow: true, + showCategory: true, + borderWidth: 0, + borderRadius: 0, + borderColor: '#000000', + borderOpacity: 0.7, + bgColor: '#000000', + bgOpacity: 0.7, + gridType: 'solid', + dashLength: 4, + gridColor: '#CCCCCC', + boxPadding: 3, + fontSize: 13, + lineHeight: 20, + fontColor: '#FFFFFF', + legendShow: true, + legendShape: 'auto', + splitLine: true, + labelBgColor: '#FFFFFF', + labelBgOpacity: 0.7, + labelFontColor: '#666666', + }, line: { type: 'curve', width: 2, activeType: 'hollow' }, }, }); @@ -389,6 +429,30 @@ function drawChart() { tofix: 2, }, extra: { + tooltip: { + showBox: true, + showArrow: true, + showCategory: true, + borderWidth: 0, + borderRadius: 0, + borderColor: '#000000', + borderOpacity: 0.7, + bgColor: '#000000', + bgOpacity: 0.7, + gridType: 'solid', + dashLength: 4, + gridColor: '#CCCCCC', + boxPadding: 3, + fontSize: 13, + lineHeight: 20, + fontColor: '#FFFFFF', + legendShow: true, + legendShape: 'auto', + splitLine: true, + labelBgColor: '#FFFFFF', + labelBgOpacity: 0.7, + labelFontColor: '#666666', + }, line: { type: 'curve', width: 2, activeType: 'hollow' }, }, }); @@ -396,6 +460,47 @@ function drawChart() { } }); } + +// 触摸结束事件 +function touchEnd(e: any) { + if (!chartInstance) return; + + const x = e.mpEvent.changedTouches[0].clientX; + const y = e.mpEvent.changedTouches[0].clientY; + const tmpe = { x: x - chartLeft.value, y: y - chartTop.value }; + e.changedTouches = [tmpe]; + + if (e.touches.length == 0) { + chartInstance.touchLegend(e); + chartInstance.showToolTip(e, { + formatter: (item: any) => { + return item.name + ':' + item.data; + }, + }); + } +} + +// 触摸开始事件 +function touchStart(e: any) { + if (!chartInstance) return; + + const x = e.mpEvent.changedTouches[0].clientX; + const y = e.mpEvent.changedTouches[0].clientY; + const tmpe = { x: x - chartLeft.value, y: y - chartTop.value }; + e.changedTouches = [tmpe]; + chartInstance.scrollStart(e); +} + +// 触摸移动事件 +function touchMove(e: any) { + if (!chartInstance) return; + + const x = e.mpEvent.changedTouches[0].clientX; + const y = e.mpEvent.changedTouches[0].clientY; + const tmpe = { x: x - chartLeft.value, y: y - chartTop.value }; + e.changedTouches = [tmpe]; + chartInstance.scroll(e); +}