index.vue 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810
  1. <!-- -->
  2. <template>
  3. <div class="chart-show">
  4. <header class="chart-header" @click="openNew">
  5. <span class="chart-title">{{ chartInfo.ChartName }}</span>
  6. </header>
  7. <template v-if="haveData">
  8. <div
  9. class="chart-wrapper"
  10. id="chart-wrapper"
  11. v-loading="loading"
  12. element-loading-spinner="el-icon-loading"
  13. element-loading-text="加载中..."
  14. >
  15. <chart :options="options" :chartId="chartInfo.ChartInfoId || 0" />
  16. <div class="mark"></div>
  17. </div>
  18. </template>
  19. <div class="chart-wrapper notfound" v-else>
  20. <i class="el-icon-warning"></i>哎吆,你的图飞了,赶快去找管理员救命吧~
  21. </div>
  22. <div class="bootom-source">
  23. <strong style="flex-shrink: 0;">source: <em> {{sourceName}}弘则研究</em></strong>
  24. <ul class="right-action" @click.stop>
  25. <li @click="copyUrl" class="copy" v-if="isShare"><i class="el-icon-share"/>分享</li>
  26. <li @click="refreshChart"><i class="el-icon-refresh"/>刷新</li>
  27. </ul>
  28. </div>
  29. </div>
  30. </template>
  31. <script lang="ts">
  32. import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
  33. import { ElMessage } from 'element-plus';
  34. import _ from 'lodash';
  35. import { useRoute } from 'vue-router';
  36. import chart from '@/components/chart.vue';
  37. import { IState } from './typing';
  38. import { ChartApi } from '@/request/api';
  39. import { IChartType, IDataProps, ILunarItem, IParams, ISeasonDataItemProps } from '@/types';
  40. import Highcharts from 'highcharts';
  41. import { defaultOpts, seasonOptions } from '@/utils/chartOptions';
  42. import moment from 'moment';
  43. // 散点x
  44. const scatterXAxis = {
  45. tickPosition: 'inside',
  46. lineColor: '#bfbfbf',
  47. tickColor: '#bfbfbf',
  48. tickLength:5,
  49. ordinal: false,
  50. type: 'linear',
  51. }
  52. //基础y轴
  53. const basicYAxis = {
  54. tickLength:5,
  55. lineWidth: 1,
  56. lineColor: '#bfbfbf',
  57. tickColor: '#bfbfbf',
  58. // offset: 0,
  59. visible: true,
  60. gridLineWidth: 0,
  61. tickPosition: 'inside',
  62. endOnTick: false,
  63. startOnTick: false,
  64. showLastLabel: true
  65. }
  66. export default defineComponent({
  67. components: {
  68. chart,
  69. },
  70. setup() {
  71. const route = useRoute();
  72. const loading = ref(false);
  73. const haveData = ref(true);
  74. const code = ref(route.query.code);
  75. const isShare = ref(route.query.fromType === 'share');
  76. const screen = ref(document.body.clientWidth < 1200 ? 'phone' : 'pc');
  77. const state = reactive<IState>({
  78. options: {},
  79. chartInfo: {},
  80. dataList: [],
  81. sourceName: ''
  82. });
  83. onMounted((): void => {
  84. getChartInfo();
  85. });
  86. // 打开新窗口
  87. const openNew = (): void => {
  88. window.open(window.location.href,'_blank');
  89. }
  90. /* 处理图表来源 只限第三方 */
  91. const dealSourceHandle = (): void => {
  92. // 取出第三方来源
  93. const arr = state.dataList.filter(item => item.EdbType === 1 && item.Source!== 9).map(item => ({
  94. key: item.Source,
  95. name: item.SourceName,
  96. })
  97. );
  98. let res_arr = arr.length ? _.uniqBy(arr,'key') : [];
  99. let str = '';
  100. res_arr.forEach((item: any) => {
  101. str += `${item.name}, `
  102. })
  103. state.sourceName = str;
  104. }
  105. /* 获取图表数据信息 */
  106. const getChartInfo = async (type='') => {
  107. loading.value = true;
  108. try {
  109. const { Data } = await ChartApi.getChart({
  110. UniqueCode: code.value || '',
  111. });
  112. loading.value = false;
  113. state.chartInfo = Data.ChartInfo;
  114. state.dataList = Data.EdbInfoList;
  115. document.title = Data.ChartInfo.ChartName;
  116. haveData.value = true;
  117. dealSourceHandle();
  118. setOptions();
  119. type === 'refresh' && ElMessage.success('刷新成功');
  120. }catch (e) {
  121. loading.value = false;
  122. haveData.value = false;
  123. }
  124. };
  125. // 曲线图x轴显示计算年限差 >1年 显示年/月 <=1 显示月/日
  126. const xTimeDiffer = () => {
  127. const end_date = state.chartInfo.DateType === 5
  128. ? state.chartInfo.EndDate
  129. : state.chartInfo.DateType === 6
  130. ? new Date()
  131. : '';
  132. //年限差
  133. const year_differ = moment(end_date).diff(
  134. moment(state.chartInfo.StartDate),
  135. 'years',
  136. true
  137. );
  138. // console.log(year_differ)
  139. if ([5, 6].includes(state.chartInfo.DateType) && year_differ <= 1) {
  140. return true
  141. } else {
  142. return false
  143. }
  144. }
  145. /* 曲线图 */
  146. const setDefaultLineOptions = () => {
  147. const { dataList,chartInfo } = state;
  148. //拼接标题 数据列
  149. let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
  150. // const chartData = _.cloneDeep(dataList);
  151. //有右二轴时排个序 按照左 右 右2的顺序
  152. let chartData = dataList.some(_ =>_.IsAxis===2) ? changeEdbOrder(dataList) : _.cloneDeep(dataList);
  153. chartData.forEach((item:IDataProps ,index:number) => {
  154. //轴位置值相同的下标
  155. let sameSideIndex = chartData.findIndex(
  156. (i:IDataProps) => i.IsAxis === item.IsAxis
  157. );
  158. //y轴
  159. let yItem = {
  160. ...basicYAxis,
  161. labels: {
  162. formatter: function (ctx: any) {
  163. let val = Math.abs(ctx.value) < 1000 ? ctx.value : ctx.value / 1000 + 'k';
  164. return sameSideIndex !== index ? '' : val;
  165. },
  166. align: 'center',
  167. x: [0,2].includes(item.IsAxis) ? 5 : -5,
  168. style: {
  169. fontSize: '10px',
  170. },
  171. },
  172. title: {
  173. text: sameSideIndex !== index ? '' : `${item.Unit}`,
  174. // text: null,
  175. align: 'high',
  176. rotation: 0,
  177. y: -15,
  178. offset: 0
  179. },
  180. opposite: [0,2].includes(item.IsAxis),
  181. reversed: item.IsOrder,
  182. min: Number(chartData[sameSideIndex].MinData),
  183. max: Number(chartData[sameSideIndex].MaxData),
  184. tickWidth: sameSideIndex !== index ? 0 : 1,
  185. }
  186. // //拼接标题 判断相同指标名称拼接来源
  187. let dynamic_title = item.EdbName;
  188. let dynamic_arr = chartData.filter(
  189. (item: IDataProps) => dynamic_title === item.EdbName
  190. );
  191. // 拼接配置 IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
  192. let dynamic_tag = concatDynamicTag(item)
  193. //数据列
  194. let obj = {
  195. data: [] as any[],
  196. type: 'spline',
  197. yAxis: sameSideIndex,
  198. name:
  199. dynamic_arr.length > 1
  200. ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
  201. : `${item.EdbName}${dynamic_tag}`,
  202. color: item.ChartColor,
  203. lineWidth: Number(item.ChartWidth)
  204. };
  205. item.DataList = item.DataList || []
  206. for (let i of item.DataList) {
  207. obj.data.push([i.DataTimestamp, i.Value]);
  208. }
  209. if(item.DataList.length){
  210. minTimeArr.push(item.DataList[0].DataTimestamp)
  211. maxTimeArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
  212. }
  213. data.push(obj);
  214. ydata.push(yItem);
  215. })
  216. // 范围为1年内 x轴显示为月/日 否则默认年/月
  217. let xAxis:any = {};
  218. const bool_time:boolean = xTimeDiffer();
  219. let minTime: number=Math.min(...minTimeArr);
  220. let maxTime=Math.max(...maxTimeArr);
  221. let step = setXaxisStep(maxTime-minTime);
  222. xAxis = bool_time ? {
  223. ...defaultOpts.xAxis,
  224. tickInterval: screen.value === 'phone' ? step : undefined,
  225. labels: {
  226. formatter: function (ctx: any) {
  227. return Highcharts.dateFormat('%m/%d', ctx.value);
  228. },
  229. style: {
  230. fontSize: '10px',
  231. },
  232. }
  233. } : {
  234. ...defaultOpts.xAxis,
  235. tickInterval: screen.value === 'phone' ? step : undefined,
  236. labels: {
  237. style: {
  238. fontSize: '10px',
  239. },
  240. },
  241. }
  242. state.options = {
  243. series: data,
  244. yAxis: ydata,
  245. xAxis
  246. };
  247. }
  248. /* 设置x轴步长 刻度数量多一点 */
  249. const setXaxisStep = (timestamp: number) => {
  250. // return timestamp / 6 < 24 * 3600 * 1000 * 30 ? 24 * 3600 * 1000 * 30 : timestamp / 6;
  251. return timestamp / 6;
  252. }
  253. /* 指标顺序调整 IsAxis: 0右轴 1左轴 2右2*/
  254. const changeEdbOrder = (data: any[]) => {
  255. // 左轴指标
  256. let left_edbs = data.filter(_ => _.IsAxis===1);
  257. //右轴指标
  258. let right_edbs = data.filter(_ => !_.IsAxis);
  259. // 右2轴指标
  260. let right_two_edbs = data.filter(_ => _.IsAxis === 2);
  261. // 按 左 右 右2顺序排列
  262. return [left_edbs,right_edbs,right_two_edbs].flat(Infinity);
  263. }
  264. /* 堆叠图/组合图设置
  265. 本来和曲线图逻辑基本一致兼容下即可 为了以后便于维护和阅读还是拆开写吧
  266. */
  267. const setStackOrCombinChart = () => {
  268. const { dataList,chartInfo } = state;
  269. //拼接标题 数据列
  270. let data = [] as any[],ydata = [] as any[],minTimeArr: number[] = [],maxTimeArr: number[] = [];
  271. // const chartData = _.cloneDeep(dataList);
  272. //有右二轴时排个序 按照左 右 右2的顺序
  273. let chartData = dataList.some(_ =>_.IsAxis===2) ? changeEdbOrder(dataList) : _.cloneDeep(dataList);
  274. //支持的图表类型
  275. const chartTypeMap: IChartType = {
  276. 3: 'areaspline',
  277. 4: 'column',
  278. 6: ''
  279. };
  280. let chartStyle = chartTypeMap[chartInfo.ChartType];
  281. chartData.forEach((item:IDataProps ,index:number) => {
  282. //轴位置值相同的下标
  283. let sameSideIndex = chartData.findIndex(
  284. (i:IDataProps) => i.IsAxis === item.IsAxis
  285. );
  286. //堆叠图的yAxis必须一致 数据列所对应的y轴
  287. let serie_yIndex = index;
  288. if([3,4].includes(chartInfo.ChartType)) {
  289. // 类型为堆叠图时公用第一个指标y轴
  290. serie_yIndex = 0;
  291. } else if(chartInfo.ChartType ===6 && ['areaspline','column'].includes(item.ChartStyle)) {
  292. // 组合图找第一个堆叠柱状或面积的作为公用
  293. serie_yIndex = chartData.findIndex((i:IDataProps) => i.ChartStyle === item.ChartStyle);
  294. }
  295. //数据对应的y轴是公用轴则配置也共享
  296. item.IsAxis = serie_yIndex === index ? item.IsAxis : chartData[serie_yIndex].IsAxis;
  297. item.IsOrder = serie_yIndex === index ? item.IsOrder : chartData[serie_yIndex].IsOrder;
  298. //y轴
  299. let yItem = {
  300. ...basicYAxis,
  301. labels: {
  302. formatter: function (ctx: any) {
  303. let val = Math.abs(ctx.value) < 1000 ? ctx.value : ctx.value / 1000 + 'k';
  304. return sameSideIndex !== index ? '' : val;
  305. },
  306. align: 'center',
  307. x: [0,2].includes(item.IsAxis) ? 5 : -5,
  308. style: {
  309. fontSize: '10px',
  310. },
  311. },
  312. title: {
  313. text: sameSideIndex !== index ? '' : `${item.Unit}`,
  314. // text: null,
  315. align: 'high',
  316. rotation: 0,
  317. y: -15,
  318. offset: 0
  319. },
  320. opposite: [0,2].includes(item.IsAxis),
  321. reversed: item.IsOrder,
  322. min: Number(chartData[sameSideIndex].MinData),
  323. max: Number(chartData[sameSideIndex].MaxData),
  324. tickWidth: sameSideIndex !== index ? 0 : 1,
  325. visible: serie_yIndex === index ? true : false
  326. }
  327. // //拼接标题 判断相同指标名称拼接来源
  328. let dynamic_title = item.EdbName;
  329. let dynamic_arr = chartData.filter(
  330. (item: IDataProps) => dynamic_title === item.EdbName
  331. );
  332. // 拼接配置 IsAxis左轴1 右轴0 IsOrder正序false 逆序true EdbInfoType是否是领先指标
  333. let dynamic_tag = concatDynamicTag(item)
  334. //数据列
  335. let obj = {
  336. data: [] as any[],
  337. type: chartStyle || item.ChartStyle,
  338. yAxis: serie_yIndex,
  339. name:
  340. dynamic_arr.length > 1
  341. ? `${item.EdbName}(${item.SourceName})${dynamic_tag}`
  342. : `${item.EdbName}${dynamic_tag}`,
  343. color: item.ChartColor,
  344. lineWidth: (chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? Number(item.ChartWidth) : 0,
  345. fillColor: (chartInfo.ChartType === 3 || (chartInfo.ChartType === 6 && item.ChartStyle === 'areaspline')) ? item.ChartColor : undefined,
  346. zIndex: (chartInfo.ChartType === 6 && item.ChartStyle === 'spline') ? 1 : 0 //防止组合图曲线被遮住
  347. };
  348. item.DataList = item.DataList || []
  349. for (let i of item.DataList) {
  350. obj.data.push([i.DataTimestamp, i.Value]);
  351. }
  352. if(item.DataList.length){
  353. minTimeArr.push(item.DataList[0].DataTimestamp)
  354. maxTimeArr.push(item.DataList[item.DataList.length-1].DataTimestamp)
  355. }
  356. data.push(obj);
  357. ydata.push(yItem);
  358. })
  359. // 范围为1年内 x轴显示为月/日 否则默认年/月
  360. let xAxis:any = {};
  361. const bool_time:boolean = xTimeDiffer();
  362. let minTime: number=Math.min(...minTimeArr);
  363. let maxTime=Math.max(...maxTimeArr);
  364. let step = setXaxisStep(maxTime-minTime);
  365. xAxis = bool_time ? {
  366. ...defaultOpts.xAxis,
  367. tickInterval: screen.value === 'phone' ? step : undefined,
  368. labels: {
  369. formatter: function (ctx: any) {
  370. return Highcharts.dateFormat('%m/%d', ctx.value);
  371. },
  372. style: {
  373. fontSize: '10px',
  374. },
  375. }
  376. } : {
  377. ...defaultOpts.xAxis,
  378. tickInterval: screen.value === 'phone' ? step : undefined,
  379. labels: {
  380. style: {
  381. fontSize: '10px',
  382. },
  383. },
  384. }
  385. state.options = {
  386. series: data,
  387. yAxis: ydata,
  388. xAxis
  389. };
  390. }
  391. /* 季节图 */
  392. const setSeasonOptions = () => {
  393. const chartData = state.dataList[0];
  394. let seasonYdata = [],
  395. seasonData = [],
  396. chart = {
  397. spacing: [5, 8, 2, 8],
  398. };
  399. /* 公历数据处理 处理数据列 y轴 */
  400. if (state.chartInfo.Calendar === '公历')
  401. for (let j of chartData.DataList) {
  402. let serie_item = {
  403. data: [] as any[],
  404. type: chartData.ChartStyle,
  405. yAxis: 0,
  406. name: j.Year,
  407. };
  408. const data_array = _.cloneDeep(j.DataList);
  409. data_array &&
  410. data_array.forEach((item: IParams) => {
  411. serie_item.data.push([item.DataTimestamp, item.Value]);
  412. });
  413. const index = chartData.DataList.findIndex(
  414. (item: ISeasonDataItemProps) => item.Year === j.Year
  415. );
  416. const s_yItem = {
  417. labels: {
  418. formatter: function (ctx: any) {
  419. let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
  420. return index !== 0 ? '' : val;
  421. },
  422. align: 'center',
  423. style: {
  424. fontSize: '10px',
  425. },
  426. x: -5,
  427. },
  428. title: {
  429. text: `${chartData.Unit}`,
  430. // text: null,
  431. align: 'high',
  432. rotation: 0,
  433. y: -15,
  434. offset: -(10 * chartData.Unit.length),
  435. },
  436. max: Number(chartData.MaxData),
  437. min: Number(chartData.MinData),
  438. ...defaultOpts.yAxis,
  439. };
  440. seasonData.push(serie_item);
  441. seasonYdata.push(s_yItem);
  442. }
  443. /* 农历数据处理 */
  444. let filterArr =
  445. state.chartInfo.Calendar === '农历'
  446. ? chartData.DataList.List.filter(
  447. (item: ILunarItem, index: number) => index > 0
  448. )
  449. : [];
  450. if (state.chartInfo.Calendar === '农历')
  451. for (let j of filterArr) {
  452. let serie_item = {
  453. data: [] as any[],
  454. type: chartData.ChartStyle,
  455. yAxis: 0,
  456. name: j.Year,
  457. };
  458. const data_array = _.cloneDeep(j.Items);
  459. data_array &&
  460. data_array.forEach((item: IParams) => {
  461. serie_item.data.push([item.DataTimestamp, item.Value]);
  462. });
  463. const index = filterArr.findIndex(
  464. (item: ILunarItem) => item.Year === j.Year
  465. );
  466. const s_yItem = {
  467. labels: {
  468. formatter: function (ctx: any) {
  469. let val = ctx.value < 1000 ? ctx.value : ctx.value / 1000 + 'k';
  470. return index !== 0 ? '' : val;
  471. },
  472. align: 'center',
  473. style: {
  474. fontSize: '10px',
  475. },
  476. x: -5,
  477. },
  478. title: {
  479. text: `${chartData.Unit}`,
  480. // text: null,
  481. align: 'high',
  482. rotation: 0,
  483. y: -15,
  484. offset: -(10 * chartData.Unit.length),
  485. },
  486. max: Number(chartData.MaxData),
  487. min: Number(chartData.MinData),
  488. ...defaultOpts.yAxis,
  489. };
  490. seasonData.push(serie_item);
  491. seasonYdata.push(s_yItem);
  492. }
  493. // 季节图x轴显示月/日 周度指标额外处理时间轴显示
  494. const xAxis = {
  495. ...defaultOpts.xAxis,
  496. tickInterval: screen.value === 'phone' ? 24 * 3600 * 1000 * 60 : undefined,
  497. labels: {
  498. formatter: function (ctx: any) {
  499. return Highcharts.dateFormat('%m/%d', ctx.value);
  500. },
  501. style: {
  502. fontSize: '10px',
  503. },
  504. },
  505. };
  506. // 季节图提示框显示 月/日
  507. defaultOpts.tooltip = {
  508. split: false,
  509. shared: true,
  510. dateTimeLabelFormats: {
  511. // 时间格式化字符
  512. day: '%m/%d',
  513. week: '%m/%d',
  514. month: '%m/%d',
  515. year: '%m/%d',
  516. },
  517. xDateFormat: '%m/%d',
  518. // valueDecimals: 2,
  519. };
  520. //农历默认选中一年数据并隐藏按钮 公历显示全部数据
  521. let rangeSelector = state.chartInfo.Calendar === '农历'
  522. ? {
  523. enabled: true,
  524. selected: 0,
  525. inputStyle: {
  526. display: 'none',
  527. },
  528. labelStyle: {
  529. display: 'none',
  530. },
  531. buttonTheme: {
  532. style: {
  533. display: 'none',
  534. },
  535. },
  536. buttons: [
  537. {
  538. type: 'month',
  539. count: 12,
  540. text: '12月',
  541. },
  542. {
  543. type: 'month',
  544. count: 15,
  545. text: '15月',
  546. },
  547. {
  548. type: 'all',
  549. text: '全部',
  550. },
  551. ],
  552. }
  553. : {
  554. enabled: false,
  555. };
  556. state.options = {
  557. colors:
  558. state.chartInfo.Calendar === '公历'
  559. ? seasonOptions.colors.slice(-chartData.DataList.length)
  560. : seasonOptions.colors.slice(-filterArr.length),
  561. series: seasonData,
  562. yAxis: seasonYdata,
  563. xAxis,
  564. rangeSelector,
  565. chart
  566. };
  567. }
  568. /* 散点图 第一个指标值为x轴 第二个指标为y轴*/
  569. const setScatterChartOptions = () => {
  570. const { dataList,chartInfo } = state;
  571. // 取2个指标中日期相同的数据
  572. const real_data: any[] = [];
  573. let tmpData_date: any = {};//用来取点对应的日期
  574. let data1 = _.cloneDeep(dataList)[0].DataList || [];
  575. let data2 = _.cloneDeep(dataList)[1].DataList || [];
  576. data1.forEach((_item: IParams) => {
  577. data2.forEach((_item2: IParams) => {
  578. if(_item.DataTimestamp === _item2.DataTimestamp) {
  579. //日期
  580. let itemIndex =_item.Value + "_" +_item2.Value
  581. if(tmpData_date[itemIndex]) {
  582. tmpData_date[itemIndex].push( moment(_item.DataTimestamp).format('YYYY/MM/DD'))
  583. } else {
  584. tmpData_date[itemIndex] = [moment(_item.DataTimestamp).format('YYYY/MM/DD')]
  585. }
  586. //值
  587. real_data.push({
  588. x: _item.Value,
  589. y: _item2.Value
  590. })
  591. }
  592. })
  593. })
  594. real_data.sort((x,y) => x-y);
  595. //悬浮窗 拼接日期 原始指标名称
  596. let tooltip = {
  597. formatter: function() {
  598. const that: any = this;
  599. return `<strong>${ tmpData_date[that.x+'_'+that.y].length > 4 ? tmpData_date[that.x+'_'+that.y].slice(0,4).join()+'...' : tmpData_date[that.x+'_'+that.y].join() }</strong><br>
  600. ${dataList[0].EdbName}: <span style="font-weight: 600"> ${that.x}</span><br>
  601. ${dataList[1].EdbName}: <span style="font-weight: 600"> ${that.y}</span>
  602. `
  603. }
  604. }
  605. const { IsOrder,ChartColor } = dataList[0];
  606. //y轴
  607. let yAxis = {
  608. title: {
  609. text: `${dataList[1].Unit}`,
  610. // text: null,
  611. align: 'high',
  612. rotation: 0,
  613. y: -5,
  614. offset: -(10 * dataList[1].Unit.length),
  615. },
  616. labels: {
  617. formatter: function (ctx: any) {
  618. return ctx.value;
  619. },
  620. align: 'center',
  621. },
  622. opposite: false,
  623. reversed: IsOrder,
  624. min: Number(dataList[0].MinData),
  625. max: Number(dataList[0].MaxData),
  626. tickWidth: 1,
  627. tickLength: 5,
  628. lineWidth: 1,
  629. lineColor: '#bfbfbf',
  630. tickColor: '#bfbfbf',
  631. offset: 0,
  632. visible: true,
  633. gridLineWidth: 0,
  634. tickPosition: 'inside',
  635. endOnTick: false,
  636. startOnTick: false,
  637. showLastLabel: true,
  638. tickPixelInterval: 50
  639. }
  640. //数据列
  641. let series: any = {
  642. data: [],
  643. type: 'scatter',
  644. name: `${chartInfo.ChartName}${IsOrder ? '(逆序)' : ''}`,
  645. color: ChartColor,
  646. lineWidth: 0
  647. }
  648. real_data.forEach(_ => {
  649. series.data.push([_.x,_.y])
  650. })
  651. state.options = {
  652. title: {
  653. text:''
  654. },
  655. series: [ series ],
  656. yAxis,
  657. xAxis: {
  658. ...scatterXAxis,
  659. title: {
  660. text: `${dataList[0].Unit}`,
  661. // text: null,
  662. align: 'high',
  663. rotation: 0,
  664. x: 0,
  665. offset: 20,
  666. },
  667. },
  668. tooltip
  669. }
  670. console.log(state.options)
  671. }
  672. /* 设置options */
  673. const setOptions = () => {
  674. // ChartType: 1曲线图 2季节图 3面积图 4柱状图 5散点图 6组合图 季节图中公历和农历数据结构不同
  675. const { chartInfo } = state;
  676. const chartSetMap: any = {
  677. 1: setDefaultLineOptions,
  678. 2: setSeasonOptions,
  679. 3: setStackOrCombinChart,
  680. 4: setStackOrCombinChart,
  681. 5: setScatterChartOptions,
  682. 6: setStackOrCombinChart
  683. };
  684. chartSetMap[chartInfo.ChartType]()
  685. };
  686. /* 拼接动态的指标名称小标签 */
  687. const concatDynamicTag = ({ IsAxis,IsOrder,EdbInfoType,LeadValue,LeadUnit }: IDataProps ): string => {
  688. // IsAxis左轴1 右轴0 2右2轴
  689. //IsOrder正序false 逆序true
  690. //EdbInfoType是否是领先指标
  691. const axisLabelMap:any = {
  692. 0: '右轴',
  693. 2: '右2轴'
  694. }
  695. const orderLabelMap:any = {
  696. 1: '逆序'
  697. }
  698. const edbInfoMap:any = {
  699. 0: '领先'
  700. }
  701. let axis_tag = axisLabelMap[IsAxis] || '';
  702. //逆序拼接
  703. let order_tag = orderLabelMap[Number(IsOrder)] ? `${axis_tag ? ',': ''}${orderLabelMap[Number(IsOrder)]}` : ''
  704. //领先拼接
  705. let edb_tag = edbInfoMap[EdbInfoType] ? `${(axis_tag||order_tag) ? ',' : '' }${edbInfoMap[EdbInfoType]}${LeadValue}${LeadUnit}` : '';
  706. return (axis_tag || order_tag || edb_tag) ? `(${axis_tag}${order_tag}${edb_tag})` : ''
  707. }
  708. /* 分享链接 */
  709. const copyUrl = () => {
  710. let input = document.createElement("input");
  711. input.value = location.href;
  712. document.body.appendChild(input)
  713. input.select();
  714. document.execCommand('copy');
  715. document.body.removeChild(input);
  716. ElMessage.success('复制链接成功')
  717. }
  718. const refreshChart = _.debounce(async () => {
  719. loading.value = true;
  720. let { Ret } = await ChartApi.refreshChart({ UniqueCode: state.chartInfo.UniqueCode });
  721. Ret === 200 && getChartInfo('refresh');
  722. },400)
  723. return {
  724. ...toRefs(state),
  725. loading,
  726. haveData,
  727. getChartInfo,
  728. openNew,
  729. copyUrl,
  730. isShare,
  731. refreshChart,
  732. };
  733. },
  734. });
  735. </script>
  736. <style scoped lang="less">
  737. @import './index.less';
  738. </style>