|
|
@@ -1,12 +1,17 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
<div class="chart-show">
|
|
|
- <header class="chart-header text_oneLine" @click="openNew">
|
|
|
- {{ chartInfo.ChartName }}
|
|
|
+ <header class="chart-header" @click="openNew">
|
|
|
+ <span class="chart-title text_oneLine">{{ chartInfo.ChartName }}</span>
|
|
|
+ <ul class="right-action" @click.stop>
|
|
|
+ <li><i class="el-icon-share"/>分享</li>
|
|
|
+ <li @click="getChartInfo"><i class="el-icon-refresh"/>刷新</li>
|
|
|
+ </ul>
|
|
|
</header>
|
|
|
<template v-if="haveData">
|
|
|
<div
|
|
|
class="chart-wrapper"
|
|
|
+ id="chart-wrapper"
|
|
|
v-loading="loading"
|
|
|
element-loading-spinner="el-icon-loading"
|
|
|
element-loading-text="加载中..."
|
|
|
@@ -18,7 +23,7 @@
|
|
|
<div class="chart-wrapper notfound" v-else>
|
|
|
<i class="el-icon-warning"></i>哎吆，你的图飞了，赶快去找管理员救命吧~
|
|
|
</div>
|
|
|
- <!-- <div class="bootom-source">source: <strong><em> 弘则研究</em></strong></div> -->
|
|
|
+ <div class="bootom-source">source: <strong><em> 弘则研究</em></strong></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -33,7 +38,6 @@ import { IDataProps, ILunarItem, IParams, ISeasonDataItemProps } from '@/types';
|
|
|
import Highcharts from 'highcharts';
|
|
|
import { defaultOpts, seasonOptions } from '@/utils/chartOptions';
|
|
|
import moment from 'moment';
|
|
|
-import { browser,getTerminal } from '@/utils/utils';
|
|
|
|
|
|
export default defineComponent({
|
|
|
components: {
|
|
|
@@ -110,297 +114,306 @@ export default defineComponent({
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- /* 设置options 曲线图 季节图*/
|
|
|
- const setOptions = () => {
|
|
|
- // ChartType: 1曲线图 2季节图 季节图中公历和农历数据结构不同
|
|
|
- if (state.chartInfo.ChartType === 1) {
|
|
|
-
|
|
|
- //拼接标题 数据列
|
|
|
- let data = [] as any[],ydata = [] as any[];
|
|
|
- const chartData = _.cloneDeep(state.dataList);
|
|
|
-
|
|
|
- chartData.forEach((item:IDataProps ,index:number) => {
|
|
|
-
|
|
|
- //轴位置值相同的下标
|
|
|
- let sameSideIndex = chartData.findIndex(
|
|
|
- (i:IDataProps) => i.IsAxis === item.IsAxis
|
|
|
- );
|
|
|
- //y轴
|
|
|
- let yItem = {
|
|
|
- labels: {
|
|
|
- formatter: function (ctx: any) {
|
|
|
- let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
- return sameSideIndex !== index ? '' : val;
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- x: item.IsAxis === 0 ? 5 : -5,
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
- },
|
|
|
- },
|
|
|
- opposite: item.IsAxis === 0,
|
|
|
- reversed: item.IsOrder,
|
|
|
- min: Number(chartData[sameSideIndex].MinData),
|
|
|
- max: Number(chartData[sameSideIndex].MaxData),
|
|
|
- tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
- tickLength:5,
|
|
|
- lineWidth: 1,
|
|
|
- lineColor: '#bfbfbf',
|
|
|
- tickColor: '#bfbfbf',
|
|
|
- offset: 0,
|
|
|
- visible: true,
|
|
|
- gridLineWidth: 0,
|
|
|
- tickPosition: 'inside',
|
|
|
- endOnTick: false,
|
|
|
- startOnTick: false,
|
|
|
- showLastLabel: true
|
|
|
- }
|
|
|
-
|
|
|
- // //拼接标题 判断相同指标名称拼接来源
|
|
|
- let dynamic_title = item.EdbName;
|
|
|
- let dynamic_arr = chartData.filter(
|
|
|
- (item: IDataProps) => dynamic_title === item.EdbName
|
|
|
- );
|
|
|
-
|
|
|
- // 拼接配置 IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
|
|
|
- let dynamic_tag: string = item.IsAxis && item.IsOrder && item.EdbInfoType
|
|
|
- ? '(逆序)'
|
|
|
- : !item.IsAxis && item.IsOrder && item.EdbInfoType
|
|
|
- ? '(右轴，逆序)'
|
|
|
- : !item.IsAxis && !item.IsOrder && item.EdbInfoType
|
|
|
- ? '(右轴)'
|
|
|
- : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : !item.IsAxis && item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : item.IsAxis && item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : item.IsAxis && !item.IsOrder && !item.EdbInfoType
|
|
|
- ? `(领先${item.LeadValue}${item.LeadUnit})`
|
|
|
- : '';
|
|
|
-
|
|
|
- //数据列
|
|
|
- let obj = {
|
|
|
- data: [] as any[],
|
|
|
- type: item.ChartStyle,
|
|
|
- yAxis: index,
|
|
|
- name:
|
|
|
- dynamic_arr.length > 1
|
|
|
- ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
|
- : `${item.EdbName}${dynamic_tag}`,
|
|
|
- color: item.ChartColor,
|
|
|
- lineWidth: Number(item.ChartWidth),
|
|
|
- };
|
|
|
- item.DataList = item.DataList || []
|
|
|
- for (let i of item.DataList) {
|
|
|
- obj.data.push([i.DataTimestamp, i.Value]);
|
|
|
- }
|
|
|
-
|
|
|
- data.push(obj);
|
|
|
- ydata.push(yItem);
|
|
|
- })
|
|
|
-
|
|
|
- // 范围为1年内 x轴显示为月/日 否则默认年/月
|
|
|
- let xAxis:any = {};
|
|
|
- const bool_time:boolean = xTimeDiffer();
|
|
|
- xAxis = bool_time ? {
|
|
|
- ...defaultOpts.xAxis,
|
|
|
+ /* 默认曲线图 */
|
|
|
+ const setDefaultLineOptions = () => {
|
|
|
+ //拼接标题 数据列
|
|
|
+ let data = [] as any[],ydata = [] as any[];
|
|
|
+ const chartData = _.cloneDeep(state.dataList);
|
|
|
+
|
|
|
+ chartData.forEach((item:IDataProps ,index:number) => {
|
|
|
+
|
|
|
+ //轴位置值相同的下标
|
|
|
+ let sameSideIndex = chartData.findIndex(
|
|
|
+ (i:IDataProps) => i.IsAxis === item.IsAxis
|
|
|
+ );
|
|
|
+ //y轴
|
|
|
+ let yItem = {
|
|
|
labels: {
|
|
|
formatter: function (ctx: any) {
|
|
|
- return Highcharts.dateFormat('%m/%d', ctx.value);
|
|
|
+ let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
+ return sameSideIndex !== index ? '' : val;
|
|
|
},
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
- },
|
|
|
- }
|
|
|
- } : {
|
|
|
- ...defaultOpts.xAxis,
|
|
|
- labels: {
|
|
|
+ align: 'center',
|
|
|
+ x: item.IsAxis === 0 ? 5 : -5,
|
|
|
style: {
|
|
|
fontSize: '10px',
|
|
|
},
|
|
|
},
|
|
|
+ opposite: item.IsAxis === 0,
|
|
|
+ reversed: item.IsOrder,
|
|
|
+ min: Number(chartData[sameSideIndex].MinData),
|
|
|
+ max: Number(chartData[sameSideIndex].MaxData),
|
|
|
+ tickWidth: sameSideIndex !== index ? 0 : 1,
|
|
|
+ tickLength:5,
|
|
|
+ lineWidth: 1,
|
|
|
+ lineColor: '#bfbfbf',
|
|
|
+ tickColor: '#bfbfbf',
|
|
|
+ offset: 0,
|
|
|
+ visible: true,
|
|
|
+ gridLineWidth: 0,
|
|
|
+ tickPosition: 'inside',
|
|
|
+ endOnTick: false,
|
|
|
+ startOnTick: false,
|
|
|
+ showLastLabel: true
|
|
|
}
|
|
|
|
|
|
- state.options = {
|
|
|
- series: data,
|
|
|
- yAxis: ydata,
|
|
|
- xAxis
|
|
|
- };
|
|
|
+ // //拼接标题 判断相同指标名称拼接来源
|
|
|
+ let dynamic_title = item.EdbName;
|
|
|
+ let dynamic_arr = chartData.filter(
|
|
|
+ (item: IDataProps) => dynamic_title === item.EdbName
|
|
|
+ );
|
|
|
+
|
|
|
+ // 拼接配置 IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
|
|
|
+ let dynamic_tag: string = item.IsAxis && item.IsOrder && item.EdbInfoType
|
|
|
+ ? '(逆序)'
|
|
|
+ : !item.IsAxis && item.IsOrder && item.EdbInfoType
|
|
|
+ ? '(右轴，逆序)'
|
|
|
+ : !item.IsAxis && !item.IsOrder && item.EdbInfoType
|
|
|
+ ? '(右轴)'
|
|
|
+ : !item.IsAxis && !item.IsOrder && !item.EdbInfoType
|
|
|
+ ? `(右轴，领先${item.LeadValue}${item.LeadUnit})`
|
|
|
+ : !item.IsAxis && item.IsOrder && !item.EdbInfoType
|
|
|
+ ? `(右轴，逆序，领先${item.LeadValue}${item.LeadUnit})`
|
|
|
+ : item.IsAxis && item.IsOrder && !item.EdbInfoType
|
|
|
+ ? `(逆序，领先${item.LeadValue}${item.LeadUnit})`
|
|
|
+ : item.IsAxis && !item.IsOrder && !item.EdbInfoType
|
|
|
+ ? `(领先${item.LeadValue}${item.LeadUnit})`
|
|
|
+ : '';
|
|
|
+
|
|
|
+ //数据列
|
|
|
+ let obj = {
|
|
|
+ data: [] as any[],
|
|
|
+ type: item.ChartStyle,
|
|
|
+ yAxis: index,
|
|
|
+ name:
|
|
|
+ dynamic_arr.length > 1
|
|
|
+ ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
|
|
|
+ : `${item.EdbName}${dynamic_tag}`,
|
|
|
+ color: item.ChartColor,
|
|
|
+ lineWidth: Number(item.ChartWidth),
|
|
|
+ };
|
|
|
+ item.DataList = item.DataList || []
|
|
|
+ for (let i of item.DataList) {
|
|
|
+ obj.data.push([i.DataTimestamp, i.Value]);
|
|
|
+ }
|
|
|
|
|
|
- } else {
|
|
|
- /* 季节性图的图表配置 */
|
|
|
- const chartData = state.dataList[0];
|
|
|
- let seasonYdata = [],
|
|
|
- seasonData = [],
|
|
|
- chart = {
|
|
|
- spacing: [5, 8, 2, 8]
|
|
|
- };
|
|
|
+ data.push(obj);
|
|
|
+ ydata.push(yItem);
|
|
|
+ })
|
|
|
+
|
|
|
+ // 范围为1年内 x轴显示为月/日 否则默认年/月
|
|
|
+ let xAxis:any = {};
|
|
|
+ const bool_time:boolean = xTimeDiffer();
|
|
|
+ xAxis = bool_time ? {
|
|
|
+ ...defaultOpts.xAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx: any) {
|
|
|
+ return Highcharts.dateFormat('%m/%d', ctx.value);
|
|
|
+ },
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ },
|
|
|
+ }
|
|
|
+ } : {
|
|
|
+ ...defaultOpts.xAxis,
|
|
|
+ labels: {
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
|
|
|
- /* 公历数据处理 处理数据列 y轴 */
|
|
|
- if (state.chartInfo.Calendar === '公历')
|
|
|
- for (let j of chartData.DataList) {
|
|
|
- let serie_item = {
|
|
|
- data: [] as any[],
|
|
|
- type: chartData.ChartStyle,
|
|
|
- yAxis: 0,
|
|
|
- name: j.Year,
|
|
|
- };
|
|
|
- const data_array = _.cloneDeep(j.DataList);
|
|
|
- data_array &&
|
|
|
- data_array.forEach((item: IParams) => {
|
|
|
- serie_item.data.push([item.DataTimestamp, item.Value]);
|
|
|
- });
|
|
|
- const index = chartData.DataList.findIndex(
|
|
|
- (item: ISeasonDataItemProps) => item.Year === j.Year
|
|
|
- );
|
|
|
- const s_yItem = {
|
|
|
- labels: {
|
|
|
- formatter: function (ctx: any) {
|
|
|
- let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
- return index !== 0 ? '' : val;
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
- },
|
|
|
- x: -5,
|
|
|
- },
|
|
|
- max: Number(chartData.MaxData),
|
|
|
- min: Number(chartData.MinData),
|
|
|
- ...defaultOpts.yAxis,
|
|
|
- };
|
|
|
- seasonData.push(serie_item);
|
|
|
- seasonYdata.push(s_yItem);
|
|
|
- }
|
|
|
+ state.options = {
|
|
|
+ series: data,
|
|
|
+ yAxis: ydata,
|
|
|
+ xAxis
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
- /* 农历数据处理 */
|
|
|
- let filterArr =
|
|
|
- state.chartInfo.Calendar === '农历'
|
|
|
- ? chartData.DataList.List.filter(
|
|
|
- (item: ILunarItem, index: number) => index > 0
|
|
|
- )
|
|
|
- : [];
|
|
|
- if (state.chartInfo.Calendar === '农历')
|
|
|
- for (let j of filterArr) {
|
|
|
- let serie_item = {
|
|
|
- data: [] as any[],
|
|
|
- type: chartData.ChartStyle,
|
|
|
- yAxis: 0,
|
|
|
- name: j.Year,
|
|
|
- };
|
|
|
- const data_array = _.cloneDeep(j.Items);
|
|
|
- data_array &&
|
|
|
- data_array.forEach((item: IParams) => {
|
|
|
- serie_item.data.push([item.DataTimestamp, item.Value]);
|
|
|
- });
|
|
|
- const index = filterArr.findIndex(
|
|
|
- (item: ILunarItem) => item.Year === j.Year
|
|
|
- );
|
|
|
+ /* 季节图 */
|
|
|
+ const setSeasonOptions = () => {
|
|
|
+ const chartData = state.dataList[0];
|
|
|
+ let seasonYdata = [],
|
|
|
+ seasonData = [],
|
|
|
+ chart = {
|
|
|
+ spacing: [5, 8, 2, 8]
|
|
|
+ };
|
|
|
|
|
|
- const s_yItem = {
|
|
|
- labels: {
|
|
|
- formatter: function (ctx: any) {
|
|
|
- let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
- return index !== 0 ? '' : val;
|
|
|
- },
|
|
|
- align: 'center',
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
- },
|
|
|
- x: -5,
|
|
|
+ /* 公历数据处理 处理数据列 y轴 */
|
|
|
+ if (state.chartInfo.Calendar === '公历')
|
|
|
+ for (let j of chartData.DataList) {
|
|
|
+ let serie_item = {
|
|
|
+ data: [] as any[],
|
|
|
+ type: chartData.ChartStyle,
|
|
|
+ yAxis: 0,
|
|
|
+ name: j.Year,
|
|
|
+ };
|
|
|
+ const data_array = _.cloneDeep(j.DataList);
|
|
|
+ data_array &&
|
|
|
+ data_array.forEach((item: IParams) => {
|
|
|
+ serie_item.data.push([item.DataTimestamp, item.Value]);
|
|
|
+ });
|
|
|
+ const index = chartData.DataList.findIndex(
|
|
|
+ (item: ISeasonDataItemProps) => item.Year === j.Year
|
|
|
+ );
|
|
|
+ const s_yItem = {
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx: any) {
|
|
|
+ let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
+ return index !== 0 ? '' : val;
|
|
|
},
|
|
|
- max: Number(chartData.MaxData),
|
|
|
- min: Number(chartData.MinData),
|
|
|
- ...defaultOpts.yAxis,
|
|
|
- };
|
|
|
- seasonData.push(serie_item);
|
|
|
- seasonYdata.push(s_yItem);
|
|
|
- }
|
|
|
-
|
|
|
- //是否调整tickInterval 公历年份大与1 农历年份大于2
|
|
|
- // let bool_dealx = (state.chartInfo.Calendar === '公历' && chartData.Frequency === '周度' && chartData.DataList.length > 1)
|
|
|
- // || ( state.chartInfo.Calendar === '农历' && chartData.Frequency === '周度' && chartData.DataList.List.length > 2)
|
|
|
-
|
|
|
-
|
|
|
- // 季节图x轴显示月/日 周度指标额外处理时间轴显示
|
|
|
- const xAxis = {
|
|
|
- ...defaultOpts.xAxis,
|
|
|
- // tickInterval: bool_dealx ? 24 * 3600 * 1000 : null,
|
|
|
- labels: {
|
|
|
- formatter: function (ctx: any) {
|
|
|
- return Highcharts.dateFormat('%m/%d', ctx.value);
|
|
|
+ align: 'center',
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ },
|
|
|
+ x: -5,
|
|
|
},
|
|
|
- style: {
|
|
|
- fontSize: '10px',
|
|
|
+ max: Number(chartData.MaxData),
|
|
|
+ min: Number(chartData.MinData),
|
|
|
+ ...defaultOpts.yAxis,
|
|
|
+ };
|
|
|
+ seasonData.push(serie_item);
|
|
|
+ seasonYdata.push(s_yItem);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 农历数据处理 */
|
|
|
+ let filterArr =
|
|
|
+ state.chartInfo.Calendar === '农历'
|
|
|
+ ? chartData.DataList.List.filter(
|
|
|
+ (item: ILunarItem, index: number) => index > 0
|
|
|
+ )
|
|
|
+ : [];
|
|
|
+ if (state.chartInfo.Calendar === '农历')
|
|
|
+ for (let j of filterArr) {
|
|
|
+ let serie_item = {
|
|
|
+ data: [] as any[],
|
|
|
+ type: chartData.ChartStyle,
|
|
|
+ yAxis: 0,
|
|
|
+ name: j.Year,
|
|
|
+ };
|
|
|
+ const data_array = _.cloneDeep(j.Items);
|
|
|
+ data_array &&
|
|
|
+ data_array.forEach((item: IParams) => {
|
|
|
+ serie_item.data.push([item.DataTimestamp, item.Value]);
|
|
|
+ });
|
|
|
+ const index = filterArr.findIndex(
|
|
|
+ (item: ILunarItem) => item.Year === j.Year
|
|
|
+ );
|
|
|
+
|
|
|
+ const s_yItem = {
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx: any) {
|
|
|
+ let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
|
|
|
+ return index !== 0 ? '' : val;
|
|
|
+ },
|
|
|
+ align: 'center',
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ },
|
|
|
+ x: -5,
|
|
|
},
|
|
|
- },
|
|
|
- };
|
|
|
+ max: Number(chartData.MaxData),
|
|
|
+ min: Number(chartData.MinData),
|
|
|
+ ...defaultOpts.yAxis,
|
|
|
+ };
|
|
|
+ seasonData.push(serie_item);
|
|
|
+ seasonYdata.push(s_yItem);
|
|
|
+ }
|
|
|
|
|
|
- // 季节图提示框显示 月/日
|
|
|
- defaultOpts.tooltip = {
|
|
|
- split: false,
|
|
|
- shared: true,
|
|
|
- dateTimeLabelFormats: {
|
|
|
- // 时间格式化字符
|
|
|
- day: '%m/%d',
|
|
|
- week: '%m/%d',
|
|
|
- month: '%m/%d',
|
|
|
- year: '%m/%d',
|
|
|
+ // 季节图x轴显示月/日 周度指标额外处理时间轴显示
|
|
|
+ const xAxis = {
|
|
|
+ ...defaultOpts.xAxis,
|
|
|
+ labels: {
|
|
|
+ formatter: function (ctx: any) {
|
|
|
+ return Highcharts.dateFormat('%m/%d', ctx.value);
|
|
|
},
|
|
|
- xDateFormat: '%m/%d',
|
|
|
- valueDecimals: 2,
|
|
|
- };
|
|
|
-
|
|
|
- //农历默认选中一年数据并隐藏按钮 公历显示全部数据
|
|
|
- let rangeSelector = state.chartInfo.Calendar === '农历'
|
|
|
- ? {
|
|
|
- enabled: true,
|
|
|
- selected: 0,
|
|
|
- buttons: [
|
|
|
- {
|
|
|
- type: 'month',
|
|
|
- count: 12,
|
|
|
- text: '12月',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'month',
|
|
|
- count: 15,
|
|
|
- text: '15月',
|
|
|
- },
|
|
|
- {
|
|
|
- type: 'all',
|
|
|
- text: '全部',
|
|
|
- },
|
|
|
- ],
|
|
|
- }
|
|
|
- : {
|
|
|
- enabled: false,
|
|
|
- };
|
|
|
+ style: {
|
|
|
+ fontSize: '10px',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ // 季节图提示框显示 月/日
|
|
|
+ defaultOpts.tooltip = {
|
|
|
+ split: false,
|
|
|
+ shared: true,
|
|
|
+ dateTimeLabelFormats: {
|
|
|
+ // 时间格式化字符
|
|
|
+ day: '%m/%d',
|
|
|
+ week: '%m/%d',
|
|
|
+ month: '%m/%d',
|
|
|
+ year: '%m/%d',
|
|
|
+ },
|
|
|
+ xDateFormat: '%m/%d',
|
|
|
+ valueDecimals: 2,
|
|
|
+ };
|
|
|
+
|
|
|
+ //农历默认选中一年数据并隐藏按钮 公历显示全部数据
|
|
|
+ let rangeSelector = state.chartInfo.Calendar === '农历'
|
|
|
+ ? {
|
|
|
+ enabled: true,
|
|
|
+ selected: 0,
|
|
|
+ inputStyle: {
|
|
|
+ display: 'none',
|
|
|
+ },
|
|
|
+ labelStyle: {
|
|
|
+ display: 'none',
|
|
|
+ },
|
|
|
+ buttonTheme: {
|
|
|
+ style: {
|
|
|
+ display: 'none',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ buttons: [
|
|
|
+ {
|
|
|
+ type: 'month',
|
|
|
+ count: 12,
|
|
|
+ text: '12月',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'month',
|
|
|
+ count: 15,
|
|
|
+ text: '15月',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: 'all',
|
|
|
+ text: '全部',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ enabled: false,
|
|
|
+ };
|
|
|
|
|
|
- //农历图调整顶部缩进
|
|
|
- if (state.chartInfo.Calendar === '农历' && browser() !== 'FF' && getTerminal() !== 'ios') chart = {
|
|
|
- spacing: [-26, 8, 2, 8]
|
|
|
- }
|
|
|
+ //农历图调整顶部缩进
|
|
|
+ // if (state.chartInfo.Calendar === '农历' && browser() !== 'FF' && getTerminal() !== 'ios') chart = {
|
|
|
+ // spacing: [-26, 8, 2, 8]
|
|
|
+ // }
|
|
|
+
|
|
|
+ state.options = {
|
|
|
+ colors:
|
|
|
+ state.chartInfo.Calendar === '公历'
|
|
|
+ ? seasonOptions.colors.slice(-chartData.DataList.length)
|
|
|
+ : seasonOptions.colors.slice(-filterArr.length),
|
|
|
+ series: seasonData,
|
|
|
+ yAxis: seasonYdata,
|
|
|
+ xAxis,
|
|
|
+ rangeSelector,
|
|
|
+ chart
|
|
|
+ };
|
|
|
+ }
|
|
|
|
|
|
- state.options = {
|
|
|
- colors:
|
|
|
- state.chartInfo.Calendar === '公历'
|
|
|
- ? seasonOptions.colors.slice(-chartData.DataList.length)
|
|
|
- : seasonOptions.colors.slice(-filterArr.length),
|
|
|
- series: seasonData,
|
|
|
- yAxis: seasonYdata,
|
|
|
- xAxis,
|
|
|
- rangeSelector,
|
|
|
- chart
|
|
|
- };
|
|
|
- }
|
|
|
+ /* 设置options 曲线图 季节图*/
|
|
|
+ const setOptions = () => {
|
|
|
+ // ChartType: 1曲线图 2季节图 季节图中公历和农历数据结构不同
|
|
|
+ state.chartInfo.ChartType === 1 ? setDefaultLineOptions() : setSeasonOptions();
|
|
|
};
|
|
|
|
|
|
return {
|
|
|
...toRefs(state),
|
|
|
loading,
|
|
|
haveData,
|
|
|
+ getChartInfo,
|
|
|
openNew
|
|
|
};
|
|
|
},
|
