20230609

src/components/highcharts-t.vue

@@ -1,25 +1,24 @@
 <template>
     <div style="height: 100%;">
-        <Chart ref="chart1" style="min-height: 600px;" :options="chartOptions()" constructor-type="stockChart"></Chart>
-        <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div>
+        <Chart ref="chart1" style="min-height: 600px;" :options="seriesData.chartData" constructor-type="stockChart"></Chart>
+        <!-- <div style="text-align: center;margin-top: 20px;">{{ computedData }}</div> -->
     </div>
 </template>
 
 <script setup>
 import emitter from "@/plugin/bus";
 import { Chart } from 'highcharts-vue';
-import { computed, onBeforeUnmount, ref } from "vue";
+import { computed, onBeforeUnmount, reactive, watch } from "vue";
 import { useMessage } from "naive-ui";
 import {useStore} from 'vuex'
 const message = useMessage()
 const popData = defineProps({
     dataList: {
-        type: Array,
+        type: Array,  
         default: () => [],
     }
 })
 
-
 const plotLinesData = reactive({
     tBottom:null,
     tTop:null
@@ -39,7 +38,7 @@ onBeforeUnmount(() => {
     emitter.off("onMessage");
 });
 const computedData = computed(() => {
-    console.log('计算属性',popData.dataList)
+    // console.log('计算属性',popData.dataList)
     if (popData.dataList.length != 0) {
         return computedDataFun()
     } else {
@@ -69,26 +68,61 @@ const computedDataFun = () => {
 
     return `最大值${maxData}，最小值${minData}，平均值${pingjun}`
 }
-const chartOptions = () => {
-    var obj = {
+watch(()=>popData.dataList, (newValue)=>{
+    console.table('watch',seriesData.chartData)
+    seriesData.chartData.series = newValue
+    // chartOptions()
+    // chart1.value.chart.userOptions.series = []
+},{deep:true,immediate: false})
+
+// const dataLists = reactive({ 
+//     objData:[{
+//         name:'',
+//         data:[]
+//     }],
+//     arrData:[]
+// })
+// const funData = ()=>{
+//     let t = ref(1681621260000)
+//     for (let index = 0; index < 3000; index++) {
+//         t.value = t.value + 60000
+//         dataLists.arrData.push([t.value,Math.random()*10, "117", "117", Math.random()*100])
+//     }
+//     dataLists.objData[0].data = dataLists.arrData
+//     console.log('显示的值1',dataLists.objData)
+// }
+// funData()
+const seriesData = reactive({
+    chartData:null
+})
+let chartOptions = () => {
+    seriesData.chartData = {
         chart: {
-            zoomType: 'x',//框选放大
+            // renderTo : 'test_container',
+            type : 'scatter',
+            zoomType : 'x',//框选放大
             // panning: true, //禁用放大
-            // zooming: {
-            //     singleTouch: true,
-            //     resetButton: {},
-            //     type: 'x',
-            //     panning: true, //禁用放大
-            // },
             events: {
-                selection(event) {
-                    console.log('时间区间选择', event.xAxis[0].min)
-                },
-            },
+                selection :  function (event) {
+                    console.log('1212121',event)
+                // 获取操作chart
+                // var chart = ''
+                //  // 点击缩放重置
+                // if(event.xAxis == undefined){
+                //         // x轴最大值设为xMaxValue
+                //         chart.xAxis[0].update({ max: xMaxValue});
+                //  }
+                //  // 选择x轴区域
+                //     else{
+                //         // x轴最大值设为null
+                //         chart.xAxis[0].update({ max: null});
+                //  }
+                }
+            }
             
         },
         time: {
-            useUTC: false
+            useUTC: true
         },
         
         boost: {
@@ -129,12 +163,19 @@ const chartOptions = () => {
            
         },
         plotOptions: {
+            // line:{
+            //     dataLabels:{
+            //         enabled:true, //是否显示数据标签
+            //         align:'left',
+            //         verticalAlign: 'bottom'
+            //     }
+            //  },
             series: {
                 turboThreshold: 0 //性能阈值检查,默认值为1000，当数据量超过这个值就会报错；如果需要关掉性能阈值检查，可以将此参数设置为 0
             },
         },
         legend: {
-            // layout: 'vertical',
+            layout: 'vertical',
             align: 'right',
             verticalAlign: 'middle',
             x: -10,
@@ -161,22 +202,15 @@ const chartOptions = () => {
             valueSuffix: ' ℃',
             xDateFormat: '%Y-%m-%d %H:%M:%S',
             // pointFormat: '<span style="color:{series.color}">{series.name}: <b>{point.y:,.0f}%</b><br/>',
-            shared: true
-            // chart: {
-            //     type: 'spline' //图表类型,column,line,spline,area等
-            // }
+            shared: true,
+            chart: {
+                type: 'spline' //图表类型,column,line,spline,area等
+            }
         },
-        
-        series: popData.dataList
+        series: popData.dataList,//这是模拟得数据改成船舰来的
     }
-    return obj
+    console.log('执行')
+    // return obj
 }
-
-// const dataLists = ref([])
-// let t = ref(1681621260000)
-// for (let index = 0; index < 2000; index++) {
-//     t.value = t.value + 60000
-//     dataLists.data.push([t.value,(Math.random()*10).toFixed(1)])
-// }
-// console.log('显示的值',dataLists)
+chartOptions()
 </script>

src/views/data/edit/index.vue

@@ -145,7 +145,7 @@ import DeleteClass from './DeleteTaskClass.vue';
 import { dateFormat } from 'highcharts';
 import { TimeDate } from '@/plugin/timeFun';
 import { useMessage } from "naive-ui";
-import { ref } from 'vue';
+import { ref,watch} from 'vue';
 
 const formatted = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 
@@ -169,6 +169,11 @@ const modal = reactive({
 /**
  * --------最新写法开始-----------------------------------------------------------------------------------
  */
+// 列表
+const dataList = ref([]);
+
+
+
  const formDatas = reactive({
   T_sn: '',
   T_id: '',
@@ -233,7 +238,7 @@ const renderFun = async () => {
     message.error("哎呀，请选择设备在查询哟");
     return
   }
-  dataList.value = []
+  // dataList.value = []
   let arr = []
   for (let i = 0; i < checkValues.value.length; i++) {
     queryData.T_id = checkValues.value[i].T_id;
@@ -356,10 +361,7 @@ const goDataEd = () => {
 // 设备列表
 const classList = ref([]);
 
-// 列表
-const dataList = ref([]);
 
-//
 
 
 // 选项组受控模式下的值