兼容多种类型图类型

src/views/hzyb/chart/Detail.vue

@@ -64,7 +64,7 @@ const makeTimeData=(type)=>{
 }
 const handleShowDate=()=>{
     // if(columns.value.length===0){
-        if(resData.value.ChartInfo.ChartType===1){//曲线图
+        if( sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
             columns.value=makeTimeData(1)
         }else if(resData.value.ChartInfo.ChartType===2){//季节性图表
             columns.value=makeTimeData(2)
@@ -75,7 +75,7 @@ const handleShowDate=()=>{
 // 确定选择时间
 const handleConfirmDate=(e)=>{
     let start='',end=''
-    if(resData.value.ChartInfo.ChartType===1){
+    if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){
         start=e[0]+'-'+e[1]
         end=e[2]+'-'+e[3]
     }else if(resData.value.ChartInfo.ChartType===2){
@@ -148,6 +148,14 @@ let chartData=ref({
 })// 图表配置数据
 let resData=ref(null)//接口详情数据
 let loading=ref(false)
+const sameOptionType = ref([1,3,4,5,6]);//筛选框一样的图表类型 曲线/面积/柱状/散点/组合 常规图
+const chartItemStyleArr = ref([
+    { label: '曲线图', key: 1 ,value: 'spline'},
+    { label: '面积图', key: 3 ,value: 'areaspline'},
+    { label: '柱状图', key: 4 ,value: 'column'},
+    { label: '散点图', key: 5 ,value: 'scatter'}
+])//组合图配置时可选类型
+
 // 如果type：init 则是初始化获取数据 
 const getChartInfo=async (type)=>{
     // resData.value=null
@@ -155,8 +163,8 @@ const getChartInfo=async (type)=>{
     const res=await apiChartInfo({
         ChartInfoId:ChartInfoId,
         DateType:dateType.value,
-        StartDate:startDate.value&&resData.value.ChartInfo.ChartType===1?startDate.value:'',
-        EndDate:endDate.value&&resData.value.ChartInfo.ChartType===1?endDate.value:'',
+        StartDate:startDate.value&&sameOptionType.value.includes(resData.value.ChartInfo.ChartType)?startDate.value:'',
+        EndDate:endDate.value&&sameOptionType.value.includes(resData.value.ChartInfo.ChartType)?endDate.value:'',
         SeasonStartDate:startDate.value&&resData.value.ChartInfo.ChartType===2?startDate.value:'',
         SeasonEndDate:endDate.value&&resData.value.ChartInfo.ChartType===2?endDate.value:'',
         Calendar:calendarType.value,
@@ -169,7 +177,7 @@ const getChartInfo=async (type)=>{
         // document.title=res.data.ChartInfo.ChartName
         
         // 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
-        if(res.data.ChartInfo.ChartType===1){
+        if( res.data.ChartInfo.ChartType !==2 ){
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
                 startDate.value=res.data.ChartInfo.StartDate||''
@@ -224,7 +232,7 @@ const handleCloseLimit=()=>{//点击遮罩层关闭弹窗或者点击取消关
 }
 
 
-// 设置曲线图配置
+// 设置常规图配置 曲线 散点 面积 柱状等
 const setSplineOpt=(data)=>{
     let series=[]
     let xAxis={
@@ -251,6 +259,15 @@ const setSplineOpt=(data)=>{
 
     let minAndMaxTimeTemArr=[]//存放所有指标的最大最小时间
 
+    /* 支持图的类型 */
+    const chartTypeMap = {
+        1: 'spline',
+        3: 'areaspline',
+        4: 'column',
+        5: 'scatter',
+    };
+    let chartStyle = chartTypeMap[resData.value.ChartInfo.ChartType];
+
     data.forEach((item,index)=>{
         let dynamic_title = item.EdbName;
         let dynamic_arr = data.filter(
@@ -289,14 +306,16 @@ const setSplineOpt=(data)=>{
             dataGrouping:{
                 enabled:false
             },
-            type:item.ChartStyle,
+            // type:item.ChartStyle,
+            type: resData.value.ChartInfo.ChartType ===6 ? item.ChartStyle : chartStyle,
             yAxis:index,
             // name:dynamic_arr.length > 1
             //   ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
             //   : `${item.EdbName}${dynamic_tag}`,//拼接标题 判断相同指标名称拼接来源
             name:temName,
             color: item.ChartColor,
-            lineWidth: Number(item.ChartWidth),
+            // lineWidth: Number(item.ChartWidth),
+            lineWidth: (resData.value.ChartInfo.ChartType === 1 || (resData.value.ChartInfo.ChartType === 6 && item.ChartStyle === 'spline')) ? Number(item.ChartWidth) : 0,
             visible:true,
             LatestDate:item.LatestDate,
             LatestValue:item.LatestValue
@@ -801,7 +820,7 @@ onMounted(()=>{
 // 保存
 const handleSaveChart=async ()=>{
     let params={}
-    if(resData.value.ChartInfo.ChartType===1){//曲线图
+    if(sameOptionType.value.includes(resData.value.ChartInfo.ChartType)){//曲线图
         let arr=chartData.value.yAxis.map(item=>{
             return {
                 ChartColor: item.chartEdbInfo.ChartColor,
@@ -924,7 +943,7 @@ const pageTouchmove=(e)=>{
         </div>
 
         <!-- 日期类型 -->
-        <div class="date-type-box" v-if="resData&&resData.ChartInfo.ChartType===1">
+        <div class="date-type-box" v-if="resData&&sameOptionType.includes(resData.ChartInfo.ChartType)">
             <div 
                 :class="['item',item.value==dateType?'active':'']" 
                 v-for="item in dateTypeList" 
@@ -936,7 +955,7 @@ const pageTouchmove=(e)=>{
         <!-- 最新值 -->
         <div class="latest-value-wrap" v-if="resData">
             <p style="margin-bottom:10px">最新数值</p>
-            <ul class="list" v-if="resData.ChartInfo.ChartType===1">
+            <ul class="list" v-if="sameOptionType.includes(resData.ChartInfo.ChartType)">
                 <li v-for="item in chartData.series" :key="item.name">
                     <p style="color:#333">{{moment(item.LatestDate).format('YYYY-MM-DD')}}</p>
                     <p :style="{color:item.color,flex:1}">{{item.name.length>20?item.name.replace(/<br>/g,''):item.name}}</p>

src/views/hzyb/chart/component/chartBox.vue

@@ -22,6 +22,39 @@ const chartDefaultOpts={
 			animation: {
 				duration: 1000
 			}
+		},
+		areaspline: {
+			lineWidth: 1,
+			marker: {
+					enabled: false,
+			},
+			// fillOpacity: 0.5,
+		},
+		column:{
+			pointPadding: 0.05,
+		},
+		scatter: {
+			turboThreshold: 0,
+			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>',
+			}
 		}
 	},
 	//范围选择器