qdintc/fishery-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 去掉参数设置，曲线增加点击事件。

Browse Source
This commit is contained in:
tianyongbao
2026-01-19 21:26:29 +08:00
parent 029a77b00c
commit 9fc7f3aab5
3 changed files with 221 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/other/chartFullscreen.vue
View File

@@ -40,6 +40,9 @@
type="2d"
id="fullscreen-chart"
:style="canvasStyle"
@touchend="touchEnd"
@touchstart="touchStart"
@touchmove="touchMove"
></canvas>
</view>
</view>
@@ -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);
}
</script>
<style lang="scss">

114
src/components/other/dataQuery.vue
View File

@@ -45,6 +45,9 @@
type="2d"
id="data-query-chart"
:style="canvasStyle"
@touchend="touchEnd"
@touchstart="touchStart"
@touchmove="touchMove"
></canvas>
<view v-if="!loading && (!chartData || chartData.length === 0)" class="empty-data">
<text>暂无数据</text>
@@ -186,6 +189,8 @@ onUnmounted(() => {
const chartWidth = ref(0);
const chartHeight = ref(0);
const chartPixelRatio = ref(1);
const chartTop = ref(0);
const chartLeft = ref(0);
// 初始化图表
function initChart() {
@@ -438,9 +443,43 @@ 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' },
},
});
// 获取 canvas 位置
const query = Taro.createSelectorQuery();
query.select('#data-query-chart').boundingClientRect();
query.exec((res) => {
if (res.length > 0 && res[0]) {
chartTop.value = res[0].top || 0;
chartLeft.value = res[0].left || 0;
}
});
}, 300);
} else {
// 小程序环境
@@ -491,13 +530,88 @@ 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' },
},
});
// 获取 canvas 位置
const query = Taro.createSelectorQuery();
query.select('#data-query-chart').boundingClientRect();
query.exec((res) => {
if (res.length > 0 && res[0]) {
chartTop.value = res[0].top || 0;
chartLeft.value = res[0].left || 0;
}
});
});
}
});
}
// 触摸结束事件 - 显示提示框
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);
}
</script>
<style lang="scss">

5
src/components/other/index.vue
View File

@@ -74,12 +74,11 @@
</nut-tag>
<!-- <nut-tag class="tagErr font_28" v-else> 未开启联动控制 </nut-tag> -->
</view>
<view
<!-- <view
class="font_28 c_1589E9"
:style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 15px' }"
@click="setParams(item.id, item.deviceName, item.deviceType)"
>参数设置</view
>
>参数设置</view> -->
</view>
<nut-config-provider :theme-vars="themeVars">
<view class="m_t_20 view_f">