新散点图逻辑

src/components/chart.vue

@@ -8,7 +8,6 @@ import { defineComponent, ref, watch, onMounted, PropType } from 'vue';
 import Highcharts from 'highcharts/highstock';
 import HighchartszhCN from '@/utils/highcahrts-zh_CN';
 import { defaultOpts } from '@/utils/chartOptions';
-import { IChart } from '@/types';
 
 HighchartszhCN(Highcharts);
 
@@ -30,8 +29,10 @@ export default defineComponent({
     /* 设置options */
     const init = (): void => {
       const new_options: any = { ...defaultOpts, ...props.options };
-      // console.log(new_options)
-      chart.value = Highcharts.stockChart('container', new_options);
+
+      //stock不支持线形图只支持时间图 画散点图用原始chart
+			let is_scatter = props.options.series ? props.options.series.every((_: any) => _.type === 'scatter') : false ;
+			chart.value = is_scatter ? Highcharts.chart("container", new_options) : Highcharts.stockChart("container",new_options);
     };
 
     onMounted((): void => {

src/utils/chartOptions.ts

@@ -42,6 +42,7 @@ export const defaultOpts = {
     },
     areaspline: {
 			lineWidth: 1,
+      stacking: 'normal',
 			marker: {
 					enabled: false,
 			},
@@ -49,6 +50,7 @@ export const defaultOpts = {
 		},
 		column:{
 			pointPadding: 0.05,
+      stacking: 'normal',
 		},
 		scatter: {
 			marker: {
@@ -67,10 +69,6 @@ export const defaultOpts = {
 					}
 				}
 			},
-			tooltip: {
-				headerFormat: '<span style="font-size: 10px">{point.key}</span><br>',
-				pointFormat: '<span style="color:{point.color}">●</span> {series.name}: <span style="font-weight: 600">	{point.y}</span>',
-			}
 		}
   },
   //范围选择器
@@ -109,9 +107,6 @@ export const defaultOpts = {
   },
   xAxis: {
     tickPosition: 'inside',
-    // startOnTick: true,
-    // tickInterval: 24 * 3600 * 1000,
-    // tickPixelInterval:120,
     lineColor: '#bfbfbf',
     tickColor: '#bfbfbf',
     type: 'datetime',

src/views/chartShow/index.vue

@@ -42,6 +42,15 @@ import Highcharts from 'highcharts';
 import { defaultOpts, seasonOptions } from '@/utils/chartOptions';
 import moment from 'moment';
 
+const scatterXAxis = {
+  tickPosition: 'inside',
+  lineColor: '#bfbfbf',
+  tickColor: '#bfbfbf',
+  tickLength:5,
+  ordinal: false,
+  type: 'linear',
+}
+
 export default defineComponent({
   components: {
     chart,
@@ -149,7 +158,6 @@ export default defineComponent({
         1: 'spline',
         3: 'areaspline',
         4: 'column',
-        5: 'scatter',
       };
       let chartStyle = chartTypeMap[chartInfo.ChartType];
       
@@ -172,6 +180,13 @@ export default defineComponent({
               fontSize: '10px',
             },
           },
+          title: {
+            text: sameSideIndex !== index ? '' : `单位:${item.Unit}`,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+          },
           opposite: item.IsAxis === 0,
           reversed: item.IsOrder,
           min: Number(chartData[sameSideIndex].MinData),
@@ -321,6 +336,13 @@ export default defineComponent({
               },
               x: -5,
             },
+            title: {
+              text:  `单位:${chartData.Unit}`,
+              align: 'high',
+              rotation: 0,
+              y: -15,
+              offset: 0,
+            },
             max: Number(chartData.MaxData),
             min: Number(chartData.MinData),
             ...defaultOpts.yAxis,
@@ -365,6 +387,13 @@ export default defineComponent({
               },
               x: -5,
             },
+            title: {
+              text:  `单位:${chartData.Unit}`,
+              align: 'high',
+              rotation: 0,
+              y: -15,
+              offset: 0,
+            },
             max: Number(chartData.MaxData),
             min: Number(chartData.MinData),
             ...defaultOpts.yAxis,
@@ -452,12 +481,132 @@ export default defineComponent({
       };
     }
 
+    /* 散点图 第一个指标值为x轴 第二个指标为y轴*/
+    const setScatterChartOptions = () => {
+      const { dataList,chartInfo } = state;
+
+      // 取2个指标中日期相同的数据
+      const real_data: any[] = [];
+      let tmpData_date: any = {};//用来取点对应的日期
+      let data1 =  _.cloneDeep(dataList)[0].DataList || [];
+      let data2 =  _.cloneDeep(dataList)[1].DataList || [];
+      data1.forEach((_item: IParams) => {
+        data2.forEach((_item2: IParams) => {
+          if(_item.DataTimestamp === _item2.DataTimestamp) {
+            //日期
+            let itemIndex =_item.Value + "_" +_item2.Value
+            if(tmpData_date[itemIndex]) {
+              tmpData_date[itemIndex].push( moment(_item.DataTimestamp).format('YYYY/MM/DD'))
+            } else {
+              tmpData_date[itemIndex] = [moment(_item.DataTimestamp).format('YYYY/MM/DD')]
+            }
+            
+            //值
+            real_data.push({
+              x: _item.Value,
+              y: _item2.Value
+            })
+          }
+        })
+      })
+      real_data.sort((x,y) => x-y);
+
+      //悬浮窗 拼接日期 原始指标名称
+      let tooltip = {
+        formatter: function() {
+          const that: any = this;
+          return `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
+          ${dataList[0].EdbName}: <span style="font-weight: 600">	${that.x}</span><br>
+          ${dataList[1].EdbName}: <span style="font-weight: 600">	${that.y}</span>
+          `
+        }
+      }
+
+      const { IsOrder,ChartColor } = dataList[0];
+      //y轴
+      let yAxis = {
+        title: {
+          text:  `单位:${dataList[1].Unit}`,
+          align: 'high',
+          rotation: 0,
+          y: -15,
+          offset: 0,
+        },
+        labels: {
+          formatter: function (ctx: any) {
+            return ctx.value;
+          },
+          align: 'center',
+        },
+        opposite: false,
+        reversed: IsOrder,
+        min: Number(dataList[0].MinData),
+        max: Number(dataList[0].MaxData),
+        tickWidth: 1,
+        tickLength: 5,
+        lineWidth: 1,
+        lineColor: '#bfbfbf',
+        tickColor: '#bfbfbf',
+        offset: 0,
+        visible: true,
+        gridLineWidth: 0,
+        tickPosition: 'inside',
+        endOnTick: false,
+        startOnTick: false,
+        showLastLabel: true,
+        tickPixelInterval: 50
+      }
+
+      //数据列
+      let series: any = {
+        data: [],
+        type: 'scatter',
+        name: `${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
+        color: ChartColor,
+        lineWidth: 0
+      }
+      real_data.forEach(_ => {
+        series.data.push([_.x,_.y])
+      })
+      
+      state.options = {
+        title: {
+          text:''
+        },
+        series: [ series ],
+        yAxis,
+        xAxis: {
+          ...scatterXAxis,
+          title: {
+            text:  `单位:${dataList[0].Unit}`,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+          },
+        },
+        tooltip
+      }
+      console.log(state.options)
+    }
+
     /* 设置options */
     const setOptions = () => {
       // ChartType: 1曲线图 2季节图 3面积图 4柱状图 5散点图 6组合图  季节图中公历和农历数据结构不同
-      state.chartInfo.ChartType === 2
-        ? setSeasonOptions()
-        : setDefaultLineOptions();
+      const { chartInfo } = state;
+      // state.chartInfo.ChartType === 2
+      //   ? setSeasonOptions()
+      //   : setDefaultLineOptions();
+      const chartSetMap: any = {
+        1: setDefaultLineOptions,
+        2: setSeasonOptions,
+        3: setDefaultLineOptions,
+        4: setDefaultLineOptions,
+        5: setScatterChartOptions,
+        6: setDefaultLineOptions
+      };
+
+      chartSetMap[chartInfo.ChartType]()
     };
 
     /* 分享链接 */