Merge branch 'chart12.0'

src/views/hzyb/chart/Detail.vue

@@ -230,7 +230,7 @@ const getChartInfo=async (type)=>{
         // document.title=res.data.ChartInfo.ChartName
         
         // 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
-        if( res.data.ChartInfo.ChartType !==2 ){
+        if(![2,7].includes(res.data.ChartInfo.ChartType)){
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
                 startDate.value=res.data.ChartInfo.StartDate||''
@@ -246,7 +246,7 @@ const getChartInfo=async (type)=>{
             };
 
             chartSetMap[res.data.ChartInfo.ChartType](res.data.EdbInfoList)
-        }else{
+        }else if(res.data.ChartInfo.ChartType ===2 ) {
             if(type=='init'){
                 dateType.value=res.data.ChartInfo.DateType
                 startDate.value=res.data.ChartInfo.SeasonStartDate||''
@@ -256,6 +256,9 @@ const getChartInfo=async (type)=>{
             
             setSeasonOpt(res.data.EdbInfoList[0])
         }
+        
+        //奇怪柱形图依赖数据
+        res.data.ChartInfo.ChartType === 7 && initBarData(res.data);
 
         // 向小程序发送分享数据
         let postData = {
@@ -278,6 +281,29 @@ const getChartInfo=async (type)=>{
 }
 getChartInfo('init')
 
+
+/* 奇怪柱形图 */
+const barDateList = ref([]);//柱形图的绘图数据
+const barXData = ref([]);//柱形图的x轴
+const barEdbData = ref([]);//柱形图的表格数据 只用于取值
+ /* 获取图表详情后赋值柱状图数据 */
+const initBarData = (data) => {
+    const { XEdbIdValue,YDataList,EdbInfoList,ChartInfo } = data;
+
+    let xData = XEdbIdValue.map(_ => EdbInfoList.find(edb => edb.EdbInfoId===_).EdbAliasName)
+    console.log(xData)
+
+    barDateList.value = YDataList;
+    barXData.value = xData;
+    barEdbData.value = EdbInfoList;
+
+    hasLeftAxis.value=true;
+    axisLimitData.leftMin=Number(ChartInfo.LeftMin)
+    axisLimitData.leftMax=Number(ChartInfo.LeftMax)
+
+    setBarChart();
+}
+
 // 路由改变 解决从搜索页返回数据不刷新问题
 onBeforeRouteUpdate((nval)=>{
     console.log('路由改变',nval);
@@ -1080,6 +1106,81 @@ const setScatterOptions = (dataList) => {
     }
 }
 
+/* 奇怪柱状图 和以上逻辑无公用点 依赖数据为单独的数据
+    x轴为指标名称的柱形图 以日期作为series
+*/
+const setBarChart = () => {
+    let seriesData = [];
+    const data = _.cloneDeep(barDateList.value);
+
+    //x轴
+    let xAxis = {
+        ...scatterXAxis,
+        categories: barXData.value,
+        tickWidth: 1,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            x: 0,
+            offset: 20,
+        },
+    }
+
+    const { leftMin,leftMax } = axisLimitData;
+    console.log(leftMin,leftMax)
+    //y轴
+    let yAxis = {
+        ...basicYAxis,
+        title: {
+            text:  ``,
+            align: 'high',
+            rotation: 0,
+            y: -15,
+            offset: 0,
+        },
+        labels: {
+            formatter: function (ctx) {
+            let val = ctx.value;
+            return val;
+            },
+            align: 'center',
+        },
+        min: Number(leftMin),
+        max: Number(leftMax),
+        opposite: false,
+        tickWidth: 1,
+    }
+
+    //数据列
+    data.forEach(item => {
+        let serie_item = {
+            data: item.Value,
+            type: 'column',
+            yAxis: 0,
+            name: item.Name || item.Date,
+            color: item.Color,
+            chartType: 'linear',              
+            visible:true,
+        };
+        seriesData.push(serie_item)
+    })
+    
+    chartData.value = {
+        title: {
+            text:''
+        },
+        plotOptions: {
+            column:{
+            stacking: null,
+            },
+        },
+        series: seriesData,
+        yAxis: [ yAxis ],
+        xAxis
+    }
+}
+
 // 查询范围为1年内 x轴显示为月/日 否则默认年/月
 const xTimeDiffer=(minTime,maxTime)=>{
     //年限差
@@ -1119,18 +1220,25 @@ watch(
         // 只有当修改极值弹窗弹起时才去修改
         if(!showLimit.value) return
         console.log('极值改变');
-        chartData.value.yAxis.forEach(item=>{
-            if(item.IsAxis===1){//左轴
-                item.min=nval.leftMin
-                item.max=nval.leftMax
-            }else if(item.IsAxis===2){ //右2
-                item.min=nval.rightTwoMin
-                item.max=nval.rightTwoMax
-            }else{
-                item.min=nval.rightMin
-                item.max=nval.rightMax
-            }
-        })
+
+        //奇怪柱状图
+        if(resData.value.ChartInfo.ChartType === 7) {
+            chartData.value.yAxis[0].max = nval.leftMax;
+            chartData.value.yAxis[0].min = nval.leftMin;
+        }else {
+            chartData.value.yAxis.forEach(item=>{
+                if(item.IsAxis===1){//左轴
+                    item.min=nval.leftMin
+                    item.max=nval.leftMax
+                }else if(item.IsAxis===2){ //右2
+                    item.min=nval.rightTwoMin
+                    item.max=nval.rightTwoMax
+                }else{
+                    item.min=nval.rightMin
+                    item.max=nval.rightMax
+                }
+            })
+        }
     },
     {
         deep:true
@@ -1312,6 +1420,14 @@ const handleSaveChart=async ()=>{
             SeasonStartDate:startDate.value,
             SeasonEndDate: endDate.value,
         }
+    }else if(resData.value.ChartInfo.ChartType===7) {
+        params={
+            ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
+            ChartEdbInfoList: barEdbData.value.map(_ =>({ EdbInfoId: _.EdbInfoId })),
+            DateType: 6,
+            LeftMin: String(axisLimitData.leftMin),
+            LeftMax: String(axisLimitData.leftMax),
+        }
     }
     const res=await apiChartSave(params)
     if(res.code===200){
@@ -1387,7 +1503,7 @@ const posterParams=computed(()=>{
     <div class="chart-detail" v-if="!loading&&!noauth">
         <div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
         <div class="top-box">
-            <div class="flex calendar-box" style="float:left" @click="handleShowDate">
+            <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7">
                 <img src="../../../assets/hzyb/chart/calendar.png" alt="">
                 <span class="date">{{startDate||'开始日期'}}</span>
                 <span style="margin:0 5px">至</span>
@@ -1441,13 +1557,22 @@ const posterParams=computed(()=>{
                     <p style="color:#1F243A">{{item.LatestValue}}</p>
                 </li>
             </ul>
-            <ul class="list" v-else>
+            <!-- 季节图 -->
+            <ul class="list" v-else-if="resData.ChartInfo.ChartType===2">
                 <li>
                     <p style="color:#333">{{moment(resData.EdbInfoList[0].LatestDate).format('YYYY-MM-DD')}}</p>
                     <p :style="{color:resData.EdbInfoList[0].ChartColor,flex:1}">{{resData.ChartInfo.ChartName}}</p>
                     <p style="color:#1F243A">{{resData.EdbInfoList[0].LatestValue}}</p>
                 </li>
-            </ul>   
+            </ul>
+            <!-- 奇怪柱状图 -->
+            <ul class="list" v-else-if="resData.ChartInfo.ChartType===7">
+                <li v-for="item in barEdbData" :key="item.EdbInfoId">
+                    <p style="color:#333">{{moment(item.LatestDate).format('YYYY-MM-DD')}}</p>
+                    <p style="{color:#333,flex:1}">{{item.EdbName.length>20?item.EdbName.replace(/<br>/g,''):item.EdbName}}</p>
+                    <p style="color:#1F243A">{{item.LatestValue}}</p>
+                </li>
+            </ul>
         </div>
 
         <!-- 上一张下一张图切换 -->

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

@@ -115,9 +115,11 @@ onMounted(() => {
 	let obj={...chartDefaultOpts,...props.options}
 	console.log(obj);
 	
-		//stock不支持线形图只支持时间图 画散点图用原始chart
-	let is_scatter = props.options.series ? props.options.series.every(_ => _.type === 'scatter') : false ;
-	chartIns.value = is_scatter ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
+	//stock不支持线形图只支持时间图 某些用chart
+	let is_linear = props.options.series 
+			? props.options.series.every(_ => _.type === 'scatter') || props.options.series.some(_ => _.chartType === 'linear')
+			: false ;
+	chartIns.value = is_linear ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
 })
 
 // 点击顶部label
@@ -141,9 +143,11 @@ watch(
 		console.log(obj);
 		// update: function (options, redraw, oneToOne, animation)
 		// chartIns.value.update(obj,true)
-		//stock不支持线形图只支持时间图 画散点图用原始chart
-		let is_scatter = props.options.series ? props.options.series.every(_ => _.type === 'scatter') : false ;
-		chartIns.value = is_scatter ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
+		//stock不支持线形图只支持时间图 某些用chart
+		let is_linear = props.options.series 
+			? props.options.series.every(_ => _.type === 'scatter') || props.options.series.some(_ => _.chartType === 'linear')
+			: false ;
+		chartIns.value = is_linear ? Highcharts.chart("chart-box",obj) : Highcharts.stockChart("chart-box",obj);
 		
 	},
 	{