|
|
@@ -247,7 +247,7 @@ const getChartInfo=async (type)=>{
|
|
|
// document.title=res.data.ChartInfo.ChartName
|
|
|
|
|
|
// 设置highchart配置 ChartType: 1曲线图 2季节图:季节图中公历和农历数据结构不同
|
|
|
- if(![2,7].includes(res.data.ChartInfo.ChartType)){
|
|
|
+ if(![2,7,10].includes(res.data.ChartInfo.ChartType)){
|
|
|
if(type=='init'){
|
|
|
dateType.value=res.data.ChartInfo.DateType
|
|
|
startDate.value=res.data.ChartInfo.StartDate||''
|
|
|
@@ -277,6 +277,11 @@ const getChartInfo=async (type)=>{
|
|
|
//奇怪柱形图依赖数据
|
|
|
res.data.ChartInfo.ChartType === 7 && initBarData(res.data);
|
|
|
|
|
|
+ //截面散点图
|
|
|
+ res.data.ChartInfo.ChartType === 10 && initSectionScatterData(res.data);
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
// 向小程序发送分享数据
|
|
|
let postData = {
|
|
|
params:{
|
|
|
@@ -694,6 +699,156 @@ const filterInvalidData = (item)=> {
|
|
|
}
|
|
|
|
|
|
|
|
|
+/* 散点截面图 */
|
|
|
+const sectionScatterData = ref({});
|
|
|
+/* 截面散点图获取详情赋值 */
|
|
|
+const initSectionScatterData = ({ DataResp }) => {
|
|
|
+ sectionScatterData.value = DataResp;
|
|
|
+
|
|
|
+ hasLeftAxis.value=true;
|
|
|
+ axisLimitData.leftMin=Number(DataResp.YMinValue)
|
|
|
+ axisLimitData.leftMax=Number(DataResp.YMaxValue)
|
|
|
+ axisLimitData.xMin=Number(DataResp.XMinValue)
|
|
|
+ axisLimitData.xMax=Number(DataResp.XMaxValue)
|
|
|
+ setSectionScatterChart()
|
|
|
+}
|
|
|
+/* 截面散点图设置 sectionScatterData */
|
|
|
+const setSectionScatterChart = () => {
|
|
|
+ const { DataList,XName,XNameEn,XUnitName,XUnitNameEn,YName,YNameEn,YUnitName,YUnitNameEn } = sectionScatterData.value;
|
|
|
+ const { leftMin,leftMax,xMin,xMax } = axisLimitData;
|
|
|
+
|
|
|
+ //y轴
|
|
|
+ let yAxis = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: YName,
|
|
|
+ align: 'middle',
|
|
|
+ },
|
|
|
+ opposite: false,
|
|
|
+ reversed: false,
|
|
|
+ min: Number(leftMin),
|
|
|
+ max: Number(leftMax),
|
|
|
+ tickWidth: 1,
|
|
|
+ }
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ let xAxis = {
|
|
|
+ ...scatterXAxis,
|
|
|
+ title: {
|
|
|
+ text: XName,
|
|
|
+ align: 'middle',
|
|
|
+ },
|
|
|
+ min: Number(xMin),
|
|
|
+ max: Number(xMax),
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let series = [];
|
|
|
+ DataList.forEach(item => {
|
|
|
+ //数据列
|
|
|
+ let series_item = {
|
|
|
+ data: [],
|
|
|
+ type: 'scatter',
|
|
|
+ name: item.Name,
|
|
|
+ color: item.Color,
|
|
|
+ lineWidth: 0,
|
|
|
+ chartType: 'linear',
|
|
|
+ zIndex:1,
|
|
|
+ visible: true
|
|
|
+ }
|
|
|
+ item.EdbInfoList.forEach(_ => {
|
|
|
+ series_item.data.push({
|
|
|
+ x: _.XValue,
|
|
|
+ y: _.YValue,
|
|
|
+ dataLabels: {
|
|
|
+ enabled: _.IsShow,
|
|
|
+ allowOverlap: true,
|
|
|
+ align: 'left',
|
|
|
+ format: _.Name,
|
|
|
+ formatCh: _.Name,
|
|
|
+ formatEn: _.NameEn
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ series.push(series_item);
|
|
|
+
|
|
|
+ //趋势线
|
|
|
+ if(item.ShowTrendLine) {
|
|
|
+
|
|
|
+ let trend_data = item.TrendLimitData.map((_,_index) => (
|
|
|
+ _index === item.TrendLimitData.length-1 ? {
|
|
|
+ x: _.X,
|
|
|
+ y: _.Y,
|
|
|
+ dataLabels: {
|
|
|
+ enabled: item.ShowRSquare || item.ShowFitEquation,
|
|
|
+ align: 'left',
|
|
|
+ color: '#666',
|
|
|
+ x: 20,
|
|
|
+ y: 30,
|
|
|
+ zIndex: 9,
|
|
|
+ allowOverlap: true,
|
|
|
+ formatter: function(){
|
|
|
+ let tag = '';
|
|
|
+ item.ShowRSquare && item.ShowFitEquation
|
|
|
+ ? tag =`<span>${item.TrendLine}</span><br><span>R²=${item.RSquare}</span>`
|
|
|
+ : item.ShowRSquare && !item.ShowFitEquation
|
|
|
+ ? tag =`<span>R²=${item.RSquare}</span>`
|
|
|
+ : item.ShowFitEquation && !item.ShowRSquare
|
|
|
+ ? tag =`<span>${item.TrendLine}</span>`
|
|
|
+ : ''
|
|
|
+ return tag
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } : {
|
|
|
+ x: _.X,
|
|
|
+ y: _.Y,
|
|
|
+ }
|
|
|
+ ))
|
|
|
+
|
|
|
+ let trend_item = {
|
|
|
+ data: trend_data,
|
|
|
+ type: 'spline',
|
|
|
+ linkedTo: ':previous',
|
|
|
+ color: item.Color,
|
|
|
+ lineWidth: 1,
|
|
|
+ chartType: 'linear',
|
|
|
+ enableMouseTracking: false,
|
|
|
+ dashStyle:'Dash',
|
|
|
+ zIndex: 2,
|
|
|
+ visible: true,
|
|
|
+ marker: {
|
|
|
+ enabled: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ series.push(trend_item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let tooltip = {
|
|
|
+ formatter: function() {
|
|
|
+ let series_obj = DataList.find(_ => _.Name === this.series.name);
|
|
|
+ let ponit_obj = series_obj.EdbInfoList.find(_ => _.XValue ===this.x && _.YValue===this.y);
|
|
|
+
|
|
|
+ let str=`<b>${ ponit_obj.Name }</b>`;
|
|
|
+ str += `<br><span style="color:${this.color}">\u25CF</span>${ponit_obj.XName}: ${this.x} ${ponit_obj.XDate}<br>`;
|
|
|
+ str += `<span style="color:${this.color}">\u25CF</span>${ponit_obj.YName}: ${this.y} (${ponit_obj.YDate})`;
|
|
|
+
|
|
|
+ return str
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ chartData.value = {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series,
|
|
|
+ yAxis: [yAxis],
|
|
|
+ xAxis,
|
|
|
+ tooltip
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
|
|
|
// 路由改变 解决从搜索页返回数据不刷新问题
|
|
|
onBeforeRouteUpdate((nval)=>{
|
|
|
@@ -720,6 +875,8 @@ let axisLimitData=reactive({//左右轴极值
|
|
|
rightMax:0,
|
|
|
rightTwoMin:0,
|
|
|
rightTwoMax:0,
|
|
|
+ xMin:0,
|
|
|
+ xMax:0,
|
|
|
})
|
|
|
const handleConfirmSetLimit=()=>{//确定修改极值（研究员会调用一次保存）
|
|
|
if(canSave.value){
|
|
|
@@ -1540,9 +1697,14 @@ watch(
|
|
|
console.log('极值改变');
|
|
|
|
|
|
//奇怪柱状图 商品价格图
|
|
|
- if(resData.value.ChartInfo.ChartType === 7 || resData.value.ChartInfo.Source === 2) {
|
|
|
+ if([7,10].includes(resData.value.ChartInfo.ChartType) || resData.value.ChartInfo.Source === 2) {
|
|
|
chartData.value.yAxis[0].max = nval.leftMax;
|
|
|
chartData.value.yAxis[0].min = nval.leftMin;
|
|
|
+
|
|
|
+ if(resData.value.ChartInfo.ChartType === 10) {
|
|
|
+ chartData.value.xAxis.max = nval.xMax;
|
|
|
+ chartData.value.xAxis.min = nval.xMin;
|
|
|
+ }
|
|
|
}else {
|
|
|
chartData.value.yAxis.forEach(item=>{
|
|
|
if(item.IsAxis===1){//左轴
|
|
|
@@ -1737,38 +1899,57 @@ const setChartParams = () => {
|
|
|
StartDate:startDate.value,
|
|
|
EndDate: endDate.value,
|
|
|
}
|
|
|
- }else if(resData.value.ChartInfo.ChartType===2){//季节图
|
|
|
- let arr=resData.value.EdbInfoList.map(item=>{
|
|
|
- return {
|
|
|
- ChartColor: item.ChartColor,
|
|
|
- ChartStyle: item.ChartStyle,
|
|
|
- ChartWidth: Number(item.ChartWidth),
|
|
|
- EdbInfoId: item.EdbInfoId,
|
|
|
- EdbInfoType: item.EdbInfoType,
|
|
|
- IsAxis: item.IsAxis,
|
|
|
- IsOrder: item.IsOrder,
|
|
|
- LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
|
|
|
- LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
|
|
|
- MaxData: Number(chartData.value.yAxis[0].max),
|
|
|
- MinData: Number(chartData.value.yAxis[0].min),
|
|
|
+ }
|
|
|
+ switch(resData.value.ChartInfo.ChartType) {
|
|
|
+ case 2:
|
|
|
+ let arr=resData.value.EdbInfoList.map(item=>{
|
|
|
+ return {
|
|
|
+ ChartColor: item.ChartColor,
|
|
|
+ ChartStyle: item.ChartStyle,
|
|
|
+ ChartWidth: Number(item.ChartWidth),
|
|
|
+ EdbInfoId: item.EdbInfoId,
|
|
|
+ EdbInfoType: item.EdbInfoType,
|
|
|
+ IsAxis: item.IsAxis,
|
|
|
+ IsOrder: item.IsOrder,
|
|
|
+ LeadUnit: item.EdbInfoType ? '' : item.LeadUnit,
|
|
|
+ LeadValue: item.EdbInfoType ? 0 : Number(item.LeadValue),
|
|
|
+ MaxData: Number(chartData.value.yAxis[0].max),
|
|
|
+ MinData: Number(chartData.value.yAxis[0].min),
|
|
|
+ }
|
|
|
+ })
|
|
|
+ params={
|
|
|
+ ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
|
|
|
+ ChartEdbInfoList: arr,
|
|
|
+ Calendar: calendarType.value,
|
|
|
+ SeasonStartDate:startDate.value,
|
|
|
+ SeasonEndDate: endDate.value,
|
|
|
}
|
|
|
- })
|
|
|
- params={
|
|
|
- ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
|
|
|
- ChartEdbInfoList: arr,
|
|
|
- Calendar: calendarType.value,
|
|
|
- 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),
|
|
|
- }
|
|
|
+ break;
|
|
|
+ case 7:
|
|
|
+ params={
|
|
|
+ ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
|
|
|
+ ChartEdbInfoList: barEdbData.value.map(_ =>({ EdbInfoId: _.EdbInfoId })),
|
|
|
+ DateType: 6,
|
|
|
+ LeftMin: String(axisLimitData.leftMin),
|
|
|
+ LeftMax: String(axisLimitData.leftMax),
|
|
|
+ }
|
|
|
+ break;
|
|
|
+ case 10:
|
|
|
+ params = {
|
|
|
+ ChartInfoId: resData.value.ChartInfo.ChartInfoId || 0,
|
|
|
+ DateType: 6,
|
|
|
+ Calendar: "公历",
|
|
|
+ ExtraConfig: JSON.stringify({
|
|
|
+ ...JSON.parse(resData.value.ChartInfo.ExtraConfig),
|
|
|
+ XMinValue: String(axisLimitData.xMin),
|
|
|
+ XMaxValue: String(axisLimitData.xMax),
|
|
|
+ YMinValue: String(axisLimitData.leftMin),
|
|
|
+ YMaxValue: String(axisLimitData.leftMax),
|
|
|
+ })
|
|
|
+ }
|
|
|
+ break;
|
|
|
}
|
|
|
+
|
|
|
return params
|
|
|
}
|
|
|
|
|
|
@@ -1847,7 +2028,7 @@ const posterParams=computed(()=>{
|
|
|
<div class="chart-detail" v-if="!loading&&!noauth&&!nodata">
|
|
|
<div class="chart-title">{{resData.ChartInfo.ChartName}}</div>
|
|
|
<div class="top-box" v-if="$route.query.source!=='ybxcx_my_chart'">
|
|
|
- <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="resData.ChartInfo.ChartType !== 7 &&resData.ChartInfo.Source===1">
|
|
|
+ <div class="flex calendar-box" style="float:left" @click="handleShowDate" v-if="![7,10].includes(resData.ChartInfo.ChartType) &&resData.ChartInfo.Source===1">
|
|
|
<img src="../../../assets/hzyb/chart/calendar.png" alt="">
|
|
|
<span class="date">{{startDate||'开始日期'}}</span>
|
|
|
<span style="margin:0 5px">至</span>
|
|
|
@@ -1974,7 +2155,7 @@ const posterParams=computed(()=>{
|
|
|
<span>下限</span>
|
|
|
</p>
|
|
|
<p style="margin-bottom:25px" v-if="hasLeftAxis">
|
|
|
- <span style="margin-right:35px">左轴</span>
|
|
|
+ <span style="margin-right:35px">{{resData.ChartInfo.ChartType===10 ? 'Y轴' :'左轴'}}</span>
|
|
|
<input type="number" v-model="axisLimitData.leftMax">
|
|
|
<span style="margin:0 10px">至</span>
|
|
|
<input type="number" v-model="axisLimitData.leftMin">
|
|
|
@@ -1992,6 +2173,13 @@ const posterParams=computed(()=>{
|
|
|
<span style="margin:0 10px">至</span>
|
|
|
<input type="number" v-model="axisLimitData.rightTwoMin">
|
|
|
</p>
|
|
|
+ <!-- x轴上下限 -->
|
|
|
+ <p v-if="axisLimitData.xMin" style="margin-bottom:25px">
|
|
|
+ <span style="margin-right:35px">X轴</span>
|
|
|
+ <input type="number" v-model="axisLimitData.xMin">
|
|
|
+ <span style="margin:0 10px">至</span>
|
|
|
+ <input type="number" v-model="axisLimitData.xMax">
|
|
|
+ </p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</Popup>
|
bding
