fix: 去掉参数设置,曲线增加点击事件。
This commit is contained in:
@@ -40,6 +40,9 @@
|
|||||||
type="2d"
|
type="2d"
|
||||||
id="fullscreen-chart"
|
id="fullscreen-chart"
|
||||||
:style="canvasStyle"
|
:style="canvasStyle"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
></canvas>
|
></canvas>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -132,6 +135,8 @@ onUnmounted(() => {
|
|||||||
const chartWidth = ref(0);
|
const chartWidth = ref(0);
|
||||||
const chartHeight = ref(0);
|
const chartHeight = ref(0);
|
||||||
const chartPixelRatio = ref(1);
|
const chartPixelRatio = ref(1);
|
||||||
|
const chartTop = ref(0);
|
||||||
|
const chartLeft = ref(0);
|
||||||
|
|
||||||
// 初始化图表
|
// 初始化图表
|
||||||
function initChart() {
|
function initChart() {
|
||||||
@@ -294,6 +299,17 @@ function drawChart() {
|
|||||||
Taro.nextTick(() => {
|
Taro.nextTick(() => {
|
||||||
const env = Taro.getEnv();
|
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) {
|
if (env === Taro.ENV_TYPE.WEB) {
|
||||||
// H5 环境
|
// H5 环境
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
@@ -336,6 +352,30 @@ function drawChart() {
|
|||||||
tofix: 2,
|
tofix: 2,
|
||||||
},
|
},
|
||||||
extra: {
|
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' },
|
line: { type: 'curve', width: 2, activeType: 'hollow' },
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -389,6 +429,30 @@ function drawChart() {
|
|||||||
tofix: 2,
|
tofix: 2,
|
||||||
},
|
},
|
||||||
extra: {
|
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' },
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -45,6 +45,9 @@
|
|||||||
type="2d"
|
type="2d"
|
||||||
id="data-query-chart"
|
id="data-query-chart"
|
||||||
:style="canvasStyle"
|
:style="canvasStyle"
|
||||||
|
@touchend="touchEnd"
|
||||||
|
@touchstart="touchStart"
|
||||||
|
@touchmove="touchMove"
|
||||||
></canvas>
|
></canvas>
|
||||||
<view v-if="!loading && (!chartData || chartData.length === 0)" class="empty-data">
|
<view v-if="!loading && (!chartData || chartData.length === 0)" class="empty-data">
|
||||||
<text>暂无数据</text>
|
<text>暂无数据</text>
|
||||||
@@ -186,6 +189,8 @@ onUnmounted(() => {
|
|||||||
const chartWidth = ref(0);
|
const chartWidth = ref(0);
|
||||||
const chartHeight = ref(0);
|
const chartHeight = ref(0);
|
||||||
const chartPixelRatio = ref(1);
|
const chartPixelRatio = ref(1);
|
||||||
|
const chartTop = ref(0);
|
||||||
|
const chartLeft = ref(0);
|
||||||
|
|
||||||
// 初始化图表
|
// 初始化图表
|
||||||
function initChart() {
|
function initChart() {
|
||||||
@@ -438,9 +443,43 @@ function drawChart() {
|
|||||||
tofix: 2,
|
tofix: 2,
|
||||||
},
|
},
|
||||||
extra: {
|
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' },
|
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);
|
}, 300);
|
||||||
} else {
|
} else {
|
||||||
// 小程序环境
|
// 小程序环境
|
||||||
@@ -491,13 +530,88 @@ function drawChart() {
|
|||||||
tofix: 2,
|
tofix: 2,
|
||||||
},
|
},
|
||||||
extra: {
|
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' },
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
@@ -74,12 +74,11 @@
|
|||||||
</nut-tag>
|
</nut-tag>
|
||||||
<!-- <nut-tag class="tagErr font_28" v-else> 未开启联动控制 </nut-tag> -->
|
<!-- <nut-tag class="tagErr font_28" v-else> 未开启联动控制 </nut-tag> -->
|
||||||
</view>
|
</view>
|
||||||
<view
|
<!-- <view
|
||||||
class="font_28 c_1589E9"
|
class="font_28 c_1589E9"
|
||||||
:style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 15px' }"
|
:style="{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '12px', margin: '0 15px' }"
|
||||||
@click="setParams(item.id, item.deviceName, item.deviceType)"
|
@click="setParams(item.id, item.deviceName, item.deviceType)"
|
||||||
>参数设置</view
|
>参数设置</view> -->
|
||||||
>
|
|
||||||
</view>
|
</view>
|
||||||
<nut-config-provider :theme-vars="themeVars">
|
<nut-config-provider :theme-vars="themeVars">
|
||||||
<view class="m_t_20 view_f">
|
<view class="m_t_20 view_f">
|
||||||
|
|||||||
Reference in New Issue
Block a user