|
@@ -85,7 +85,9 @@ export default {
|
|
|
crossVarietyChartData: {},
|
|
|
|
|
|
/* 雷达图 */
|
|
|
- radarChartData: {}
|
|
|
+ radarChartData: {},
|
|
|
+
|
|
|
+ IsHeap:false,//是否堆积
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -99,12 +101,175 @@ export default {
|
|
|
3: this.setStackOrCombinChart,
|
|
|
4: this.setStackOrCombinChart,
|
|
|
5: this.setScatterChart,
|
|
|
- 6: this.setStackOrCombinChart
|
|
|
+ 6: this.setStackOrCombinChart,
|
|
|
+ 14: this.setSectionalCombinationChart
|
|
|
};
|
|
|
|
|
|
chartSetMap[this.chartInfo.ChartType]&&chartSetMap[this.chartInfo.ChartType]()
|
|
|
},
|
|
|
|
|
|
+ // 截面组合图渲染配置
|
|
|
+ setSectionalCombinationChart(){
|
|
|
+ const {XDataList,UnitList,SeriesList,IsHeap}=this.sectionalCombinationData
|
|
|
+ /* 主题样式*/
|
|
|
+ const chartTheme = this.chartInfo.ChartThemeStyle ? JSON.parse(this.chartInfo.ChartThemeStyle) : null;
|
|
|
+
|
|
|
+ this.leftIndex = SeriesList.findIndex((item) => item.IsAxis===1);
|
|
|
+ this.rightIndex = SeriesList.findIndex((item) => !item.IsAxis);
|
|
|
+ this.rightTwoIndex = SeriesList.findIndex((item) => item.IsAxis ===2);
|
|
|
+
|
|
|
+ //x轴
|
|
|
+ const xAxis={
|
|
|
+ categories:XDataList.map(_=>this.currentLang=='en'?_.NameEn:_.Name),
|
|
|
+ tickWidth: 1,
|
|
|
+ labels: {
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.xAxisOptions.style
|
|
|
+ },
|
|
|
+ },
|
|
|
+ plotBands: this.setAxisPlotAreas(3),
|
|
|
+ plotLines: this.setAxisPlotLines(3)
|
|
|
+ }
|
|
|
+
|
|
|
+ let yAxis=[]
|
|
|
+ let seriesData=[]
|
|
|
+
|
|
|
+ //有右二轴时排个序 按照左 右 右2的顺序
|
|
|
+ const chartData = SeriesList.some(_ =>_.IsAxis===2) ? this.changeEdbOrder(SeriesList) : _.cloneDeep(SeriesList);
|
|
|
+ chartData.forEach((item,index)=>{
|
|
|
+ //轴位置值相同的下标
|
|
|
+ const sameSideIndex = chartData.findIndex(
|
|
|
+ (i) => i.IsAxis === item.IsAxis
|
|
|
+ );
|
|
|
+
|
|
|
+ const yTitleMap={
|
|
|
+ 1:['LeftName','LeftNameEn'],
|
|
|
+ 0:['RightName','RightNameEn'],
|
|
|
+ 2:['RightTwoName','RightTwoNameEn'],
|
|
|
+ }
|
|
|
+
|
|
|
+ let minLimit = 0,maxLimit = 0
|
|
|
+ const limitMap = {
|
|
|
+ 0:['rightMin','rightMax'],
|
|
|
+ 1:['min','max'],
|
|
|
+ 2:['rightTwoMin','rightTwoMax']
|
|
|
+ }
|
|
|
+ if(limitMap[item.IsAxis]){
|
|
|
+ minLimit = this.chartLimit[`${limitMap[item.IsAxis][0]}`]||0
|
|
|
+ maxLimit = this.chartLimit[`${limitMap[item.IsAxis][1]}`]||0
|
|
|
+ }
|
|
|
+
|
|
|
+ let yItem = {
|
|
|
+ ...basicYAxis,
|
|
|
+ title: {
|
|
|
+ text: UnitList[yTitleMap[item.IsAxis][0]],
|
|
|
+ textCh:UnitList[yTitleMap[item.IsAxis][0]], // 中文
|
|
|
+ // 中文不存在,无论英文有无都显示空
|
|
|
+ textEn:UnitList[yTitleMap[item.IsAxis][0]]?UnitList[yTitleMap[item.IsAxis][1]]:'', // 英文
|
|
|
+ style:{
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style
|
|
|
+ },
|
|
|
+ align: 'high',
|
|
|
+ rotation: 0,
|
|
|
+ y: -12,
|
|
|
+ // x: (item.IsAxis===0 && this.rightTwoIndex>-1) ? -chartData[this.rightTwoIndex].Unit.length*12 : 0,
|
|
|
+ textAlign: item.IsAxis===1 ? 'left' : 'right',
|
|
|
+ reserveSpace: false
|
|
|
+ },
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx) {
|
|
|
+ return ctx.value;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ x: [0,2].includes(item.IsAxis) ? 5 : -5,
|
|
|
+ style: {
|
|
|
+ ...chartTheme&&chartTheme.yAxisOptions.style,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ opposite: [0,2].includes(item.IsAxis),
|
|
|
+ min: Number(minLimit),
|
|
|
+ max: Number(maxLimit),
|
|
|
+ tickWidth: 1,
|
|
|
+ visible: sameSideIndex === index,
|
|
|
+ plotBands: this.setAxisPlotAreas(item.IsAxis),
|
|
|
+ plotLines: this.setAxisPlotLines(item.IsAxis)
|
|
|
+ };
|
|
|
+
|
|
|
+ //堆叠图的yAxis必须一致 数据列所对应的y轴
|
|
|
+ let serie_yIndex = index;
|
|
|
+ if(IsHeap==1) {
|
|
|
+ // 类型为堆叠图时公用第一个指标y轴
|
|
|
+ serie_yIndex = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let dataArr=item.DataList||[]
|
|
|
+ // 根据NoDataEdbIndex 将对应位置的值置为null
|
|
|
+ dataArr.forEach((i,index)=>{
|
|
|
+ if(item.NoDataEdbIndex.includes(index)){
|
|
|
+ dataArr[index]=null
|
|
|
+ }
|
|
|
+ })
|
|
|
+ //图表可配置的线条数就10条,第11条用第1条的配置,索引取下模
|
|
|
+ const lineIndex = chartTheme ? index%chartTheme.lineOptionList.length : index
|
|
|
+ let obj={
|
|
|
+ data:dataArr,
|
|
|
+ type: item.ChartStyle||'',
|
|
|
+ chartType:'linear',
|
|
|
+ yAxis: serie_yIndex,
|
|
|
+ name:item.SeriesName,
|
|
|
+ nameCh:item.SeriesName,
|
|
|
+ nameEn:item.SeriesNameEn,
|
|
|
+ color: item.ChartColor,
|
|
|
+ lineWidth: Number(item.ChartWidth)||(chartTheme&&chartTheme.lineOptionList[lineIndex].lineWidth),
|
|
|
+ borderWidth: 1,
|
|
|
+ borderColor: item.ChartColor,
|
|
|
+ marker: {//展示数据点
|
|
|
+ enabled:item.ChartStyle!='column'&&item.IsPoint?true:false,
|
|
|
+ radius: (chartTheme&&chartTheme.lineOptionList[lineIndex].radius)||5,
|
|
|
+ },
|
|
|
+ dataLabels: {//展示数值
|
|
|
+ enabled: item.IsNumber?true:false,
|
|
|
+ align:item.ChartStyle=='column'?'center':undefined,
|
|
|
+ y:item.ChartStyle=='column'?-20:0,
|
|
|
+ inside: item.ChartStyle=='column'?false:undefined,
|
|
|
+ crop: item.ChartStyle=='column'?false:true,
|
|
|
+ },
|
|
|
+ stacking:IsHeap==1?'normal':undefined,
|
|
|
+ zIndex: ['line','spline'].includes(item.ChartStyle) ? 1 : 0, //防止组合图曲线被遮住
|
|
|
+ }
|
|
|
+
|
|
|
+ yAxis.push(yItem)
|
|
|
+ seriesData.push(obj)
|
|
|
+ })
|
|
|
+
|
|
|
+ this.options = {
|
|
|
+ title: {
|
|
|
+ text:''
|
|
|
+ },
|
|
|
+ series: seriesData,
|
|
|
+ yAxis: yAxis,
|
|
|
+ xAxis,
|
|
|
+ };
|
|
|
+
|
|
|
+ },
|
|
|
+ // 截面组合图初始化
|
|
|
+ initSectionalCombinationChart(data){
|
|
|
+ const { EdbInfoList,DataResp,ChartInfo } = data;
|
|
|
+ this.sectionalCombinationData = DataResp;
|
|
|
+ this.chartLimit = {
|
|
|
+ min:DataResp.LeftMin, //左轴上下限
|
|
|
+ max:DataResp.LeftMax,
|
|
|
+ rightMin:DataResp.RightMin,//右轴上下限
|
|
|
+ rightMax:DataResp.RightMax,
|
|
|
+ rightTwoMin:DataResp.Right2Min,//右二轴上下限
|
|
|
+ rightTwoMax:DataResp.Right2Max,
|
|
|
+ }
|
|
|
+ this.IsHeap=DataResp.IsHeap?true:false
|
|
|
+
|
|
|
+ this.setSectionalCombinationChart()
|
|
|
+ },
|
|
|
+
|
|
|
/* 曲线 */
|
|
|
setDefaultChart() {
|
|
|
|
|
@@ -402,7 +567,8 @@ export default {
|
|
|
borderWidth: 1,
|
|
|
borderColor: item.ChartColor,
|
|
|
zIndex: (this.chartInfo.ChartType === 6 && ['line','spline'].includes(item.ChartStyle)) ? 1 : 0, //防止组合图曲线被遮住
|
|
|
- ...predict_params
|
|
|
+ ...predict_params,
|
|
|
+ stacking:this.chartInfo.ChartType==6&&!this.IsHeap?undefined:'normal',
|
|
|
};
|
|
|
item.DataList = item.DataList || [];
|
|
|
for (let i of item.DataList) {
|