|
@@ -15,13 +15,15 @@ HighchartszhCN(Highcharts)
|
|
|
* @param data 图详情数据
|
|
|
* @param renderId 图表在dom中的id
|
|
|
* @param lang 图表显示为中文/英文 默认 zh中文 en英文
|
|
|
+ * @param changeLangIsCheck 切换中英文时 是否要校验
|
|
|
+ * @param showChartTitle 是否显示图表标题 默认true
|
|
|
*/
|
|
|
let ChartIns=null//图表实例
|
|
|
let chartData=ref(null)//图的所有数据
|
|
|
let LangType=ref('zh')//当前图表显示的语言版本
|
|
|
let RenderDomId=ref('')//图表渲染的domid
|
|
|
let options=ref(null)//渲染图的数据
|
|
|
-export function chartRender({data,renderId,lang='zh'}){
|
|
|
+export function chartRender({data,renderId,lang='zh',changeLangIsCheck,showChartTitle=true}){
|
|
|
let chartOpt={}
|
|
|
LangType.value=lang
|
|
|
RenderDomId.value=renderId
|
|
@@ -48,9 +50,11 @@ export function chartRender({data,renderId,lang='zh'}){
|
|
|
chartOpt=setSectionScatterChart(data);
|
|
|
}
|
|
|
options.value={...chartDefaultOpts,...chartOpt}
|
|
|
+ // 设置图标题
|
|
|
+ setChartTitle(showChartTitle)
|
|
|
// 设置语言
|
|
|
- setChartLang()
|
|
|
- // console.log(options.value,RenderDomId.value);
|
|
|
+ setChartLang(changeLangIsCheck)
|
|
|
+
|
|
|
//stock不支持线形图只支持时间图 某些用chart
|
|
|
let is_linear = chartOpt.series
|
|
|
? chartOpt.series.every(_ => _.type === 'scatter') || chartOpt.series.some(_ => _.chartType === 'linear')
|
|
@@ -173,10 +177,29 @@ function changeEdbOrder (data){
|
|
|
return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
|
|
|
}
|
|
|
|
|
|
+//检查图表英文配置是否完整
|
|
|
+function checkChartEnData(){
|
|
|
+ let result = true
|
|
|
+ //图表名称:this.chartInfo.ChartNameEn
|
|
|
+ if(!chartData.value.ChartInfo.ChartNameEn){
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ //指标名称:this.dataList[].EdbNameEn
|
|
|
+ //指标单位:this.dataList[].UnitEn
|
|
|
+ chartData.value.EdbInfoList.forEach(item=>{
|
|
|
+ if(!item.EdbNameEn){
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ if(chartData.value.ChartInfo.ChartType!==10&&item.Unit&&!item.UnitEn){
|
|
|
+ result = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return result
|
|
|
+}
|
|
|
+
|
|
|
// 设置图表显示的语言
|
|
|
-function setChartLang(){
|
|
|
- // console.log(options.value);
|
|
|
- // console.log(LangType.value)
|
|
|
+function setChartLang(changeLangIsCheck){
|
|
|
+ if(changeLangIsCheck&&!checkChartEnData()) return
|
|
|
const {ChartType,Source} = chartData.value.ChartInfo
|
|
|
if(Source==1){
|
|
|
// 散点图
|
|
@@ -248,7 +271,18 @@ function setChartLang(){
|
|
|
options.value.xAxis.title.text=LangType.value == 'en'?options.value.xAxis.title.textEn:options.value.xAxis.title.textZh
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
|
|
|
+// 设置图标题
|
|
|
+function setChartTitle(showChartTitle){
|
|
|
+ if(showChartTitle){
|
|
|
+ const ChartInfo=chartData.value.ChartInfo
|
|
|
+ options.value.title.textZh=ChartInfo.ChartName
|
|
|
+ options.value.title.textEn=ChartInfo.ChartNameEn
|
|
|
+ options.value.title.text=LangType.value == 'zh' ?options.value.title.textZh:options.value.title.textEn||options.value.title.textZh
|
|
|
+ }else{
|
|
|
+ options.value.title.text=''
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//曲线图
|
|
@@ -1425,56 +1459,56 @@ function setSectionScatterChart({DataResp}) {
|
|
|
})
|
|
|
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
|
|
|
- }
|
|
|
+ //趋势线
|
|
|
+ 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,
|
|
|
}
|
|
|
- } : {
|
|
|
- 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
|
|
|
+ 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)
|
|
|
}
|
|
|
- series.push(trend_item)
|
|
|
- }
|
|
|
})
|
|
|
|
|
|
let tooltip = {
|