20230621

src/components/highcharts-t.vue

@@ -1,6 +1,6 @@
 <template>
     <div style="height: 100%;">
-        <Chart v-if="chartOptions1.series.length != 0" style="min-height: 600px;" :options="chartOptions1"
+        <Chart v-if="chartOptions1.series.length != 0" style="min-height: 600px;" :options="chartOptions1" @mouseup="onMouseup" @mousedown="onMouseDown" ref="refData"
             constructor-type="stockChart">
         </Chart>
         
@@ -12,6 +12,7 @@
 import emitter from "@/plugin/bus";
 // const emit = defineEmits(['submit']);
 import { Chart } from 'highcharts-vue';
+
 import { computed, onBeforeUnmount, reactive, watch, ref, nextTick } from "vue";
 import { useMessage } from "naive-ui";
 import { useStore } from 'vuex'
@@ -51,6 +52,14 @@ emitter.on("onMessage", (val) => {
 onBeforeUnmount(() => {
     emitter.off("onMessage");
 });
+const refData = ref(null)
+// const onMouseup = (e)=>{
+//     console.log('1',e,refData.value)
+// }
+// const onMouseDown = (e)=>{
+//     console.log('2',e,refData.value)
+// }
+
 const computedData = computed(() => {
     // console.log('计算属性',popData.dataList)
     if (popData.dataList.length != 0) {
@@ -93,7 +102,7 @@ watch(() => popData.dataList, (newValue) => {
 const emit = defineEmits(['setTimeFun']);
 // 图表配置
 const chartOptions1 = reactive({
-
+   
     xAxis: {
         type: 'datetime',
         // labels: {
@@ -194,19 +203,32 @@ const chartOptions1 = reactive({
         enabled: false
     },
     chart: {
-        zooming: {
-            singleTouch: true,
-            resetButton: {},
-            type:'x',
-        },
+        // zooming: {
+        //     singleTouch: false,
+        //     resetButton: {},
+        //     type:'x',
+        // },
+
+        panning: true, //禁用放大
+        pinchType:'x', //禁用手势操作
+        zoomType: "",
+        panKey: 'shift',
         events: {
+            redraw: function (event) {
+				console.log('redraw',event);
+                // event.target.hcEvents.destroy[0]
+                // refData.value.options.chart.zooming.type = 'x'
+			},
             selection(event) {
                 console.log('框选', event)
+                // event.target.hcEvents.destroy()
+                
                 if (event.xAxis) {
                     // if (store.state.focuDatas!=null) {
-                    //     chartOptions1.chart.zooming.type = ''
+                    //     refData.value.options.chart.zooming.type = ''
+                        
                     // }else{
-                    //     chartOptions1.chart.zooming.type = 'x'
+                    //     refData.value.options.chart.zooming.type = 'x'
                     // }
 
                     emitter.emit("onSelectionTime", event.xAxis);