兼容柱状图 面积图 组合图等

src/types.d.ts

@@ -82,4 +82,9 @@ export interface IChartinfo {
   SysUserId: number;
   SysUserRealName: string;
   UniqueCode: string;
+}
+
+
+export interface IChartType {
+  [key:number]: string;
 }

src/utils/chartOptions.ts

@@ -40,6 +40,38 @@ export const defaultOpts = {
         enabled: false,
       },//取消数据大自动数据合并
     },
+    areaspline: {
+			lineWidth: 1,
+			marker: {
+					enabled: false,
+			},
+			fillOpacity: 0.5,
+		},
+		column:{
+			pointPadding: 0.05,
+		},
+		scatter: {
+			marker: {
+					symbol: 'circle',
+					radius: 5,
+					states: {
+							hover: {
+									enabled: true,
+							}
+					}
+			},
+			states: {
+				hover: {
+					marker: {
+						enabled: true
+					}
+				}
+			},
+			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>',
+			}
+		}
   },
   //范围选择器
   rangeSelector: {
@@ -109,133 +141,6 @@ export const defaultOpts = {
     startOnTick: false,
     showLastLabel: true,
   },
-  // responsive: {
-  //   rules: [
-  //     {
-  //       condition: { maxWidth: 576 },
-  //       chartOptions: {
-  //         title: {
-  //           margin: 5,
-  //           style: { fontSize: '12px' },
-  //         },
-  //         legend: {
-  //           floating: false,
-  //           margin: 3,
-  //           // symbolPadding: 3,
-  //           itemDistance: 5,
-  //           align: 'center',
-  //           alignColumns: false,
-  //           itemStyle: {
-  //             fontSize: '10px',
-  //           },
-  //         },
-
-  //         yAxis: [
-  //           {
-  //             title: {
-  //               margin: 5,
-  //               style: { fontSize: '10px' },
-  //             },
-
-  //             labels: {
-  //               style: {
-  //                 fontSize: '8px',
-  //               },
-  //               x: -5,
-  //               y: -1,
-  //             },
-  //             tickLength: 2,
-  //           },
-  //           {
-  //             title: {
-  //               margin: 5,
-  //               style: { fontSize: '10px' },
-  //             },
-  //             labels: {
-  //               style: {
-  //                 fontSize: '8px',
-  //               },
-  //               x: 3,
-  //               y: -1,
-  //             },
-  //             tickLength: 2,
-  //           },
-  //           {
-  //             title: {
-  //               margin: 5,
-  //               style: { fontSize: '10px' },
-  //             },
-  //             labels: {
-  //               style: {
-  //                 fontSize: '8px',
-  //               },
-  //               x: 3,
-  //               y: -1,
-  //             },
-  //             tickLength: 2,
-  //           },
-  //           {
-  //             title: {
-  //               margin: 5,
-  //               style: { fontSize: '10px' },
-  //             },
-  //             labels: {
-  //               style: {
-  //                 fontSize: '8px',
-  //               },
-  //               x: 3,
-  //               y: -1,
-  //             },
-  //             tickLength: 2,
-  //           },
-  //           {
-  //             title: {
-  //               margin: 5,
-  //               style: { fontSize: '10px' },
-  //             },
-  //             labels: {
-  //               style: {
-  //                 fontSize: '8px',
-  //               },
-  //               x: 3,
-  //               y: -1,
-  //             },
-  //             tickLength: 2,
-  //           },
-  //         ],
-  //         rangeSelector: { enabled: false },
-  //         xAxis: {
-  //           title: {
-  //             margin: 2,
-  //             style: { fontSize: '10px' },
-  //           },
-  //           labels: {
-  //             style: { fontSize: '8px' },
-  //           },
-  //           y: 2,
-  //           tickLength: 2,
-  //         },
-
-  //         navigator: {
-  //           height: 28,
-  //           margin: 3,
-  //           handles: {
-  //             width: 18,
-  //             height: 28,
-  //           },
-  //         },
-  //       },
-  //     },
-  //     {
-  //       condition: { maxHeight: 350 },
-  //       chartOptions: {
-  //         legend: {
-  //           floating: false,
-  //         },
-  //       },
-  //     },
-  //   ],
-  // },
 };
 
 /* 季节性图配置 */

src/views/chartShow/index.vue

@@ -3,10 +3,6 @@
   <div class="chart-show">
     <header class="chart-header" @click="openNew">
       <span class="chart-title">{{ chartInfo.ChartName }}</span>
-      <!-- <ul class="right-action" @click.stop>
-        <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
-        <li @click="refreshChart"><i class="el-icon-refresh"/>刷新</li>
-      </ul> -->
     </header>
     <template v-if="haveData">
       <div
@@ -41,7 +37,7 @@ import { useRoute } from 'vue-router';
 import chart from '@/components/chart.vue';
 import { IState } from './typing';
 import { ChartApi } from '@/request/api';
-import { IDataProps, ILunarItem, IParams, ISeasonDataItemProps } from '@/types';
+import { IChartType, IDataProps, ILunarItem, IParams, ISeasonDataItemProps } from '@/types';
 import Highcharts from 'highcharts';
 import { defaultOpts, seasonOptions } from '@/utils/chartOptions';
 import moment from 'moment';
@@ -57,9 +53,6 @@ export default defineComponent({
 
     const haveData = ref(true);
 
-    
-    const needReload = ref(true);
-
     const code = ref(route.query.code);
     const isShare = ref(route.query.fromType === 'share');
 
@@ -145,11 +138,22 @@ export default defineComponent({
       }
     }
 
-    /* 默认曲线图 */
+    /* 曲线图 面积 组合 柱状图.. */
     const setDefaultLineOptions = () => {
+      const { dataList,chartInfo } = state;
+
       //拼接标题 数据列
       let data = [] as any[],ydata = [] as any[];
-      const chartData = _.cloneDeep(state.dataList);
+      const chartData = _.cloneDeep(dataList);
+
+      //支持的图表类型
+      const chartTypeMap: IChartType  = {
+        1: 'spline',
+        3: 'areaspline',
+        4: 'column',
+        5: 'scatter',
+      };
+      let chartStyle = chartTypeMap[chartInfo.ChartType];
       
       chartData.forEach((item:IDataProps ,index:number) => {
 
@@ -214,14 +218,14 @@ export default defineComponent({
         //数据列
         let obj = {
           data: [] as any[],
-          type: item.ChartStyle,
+          type:  chartInfo.ChartType === 6 ? item.ChartStyle : chartStyle,
           yAxis: index,
           name:
             dynamic_arr.length > 1
               ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
               : `${item.EdbName}${dynamic_tag}`,
           color: item.ChartColor,
-          lineWidth: Number(item.ChartWidth),
+          lineWidth: (chartInfo.ChartType === 1 || (chartInfo.ChartType === 6 && item.ChartStyle === 'spline')) ? Number(item.ChartWidth) : 0,
         };
         item.DataList = item.DataList || []
         for (let i of item.DataList) {
@@ -434,10 +438,12 @@ export default defineComponent({
       };
     }
 
-    /* 设置options 曲线图 季节图*/
+    /* 设置options */
     const setOptions = () => {
-      // ChartType: 1曲线图 2季节图  季节图中公历和农历数据结构不同
-      state.chartInfo.ChartType === 1 ? setDefaultLineOptions() : setSeasonOptions();
+      // ChartType: 1曲线图 2季节图 3面积图 4柱状图 5散点图 6组合图  季节图中公历和农历数据结构不同
+      state.chartInfo.ChartType === 2
+        ? setSeasonOptions()
+        : setDefaultLineOptions();
     };
 
     /* 分享链接 */
@@ -465,7 +471,7 @@ export default defineComponent({
       openNew,
       copyUrl,
       isShare,
-      refreshChart
+      refreshChart,
     };
   },
 });