equipmentStatistics.vue 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987
  1. <!-- 机器销售排行 -->
  2. <template>
  3. <view>
  4. <view class="head">
  5. </view>
  6. <view class="ri">
  7. <font class="title">机器销售排行</font>
  8. </view>
  9. <view class="qiun-columns">
  10. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  11. <view class="qiun-title-dot-light">
  12. <view class="dis">今日销售排行</view>
  13. </view>
  14. <view class="shijian" style="text-align: center;position: relative;">
  15. <image @click="pre('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  16. <span>{{startDate1}}</span>
  17. <image @click="next('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  18. </view>
  19. </view>
  20. <view class="qiun-charts" style="background-color: #FFFFFF;">
  21. <canvas canvas-id="canvaColumn1" id="canvaColumn1" class="charts" disable-scroll=true @touchstart="touchLine1"
  22. @touchmove="moveLine1" @touchend="touchEndLine1" style="background-color: #FFFFFF;"></canvas>
  23. </view>
  24. </view>
  25. <view class="line"></view>
  26. <view class="qiun-columns">
  27. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  28. <view class="qiun-title-dot-light">
  29. <view class="dis">本周销售排行</view>
  30. </view>
  31. <view class="shijian" style="text-align: center;position: relative;">
  32. <image @click="pre('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  33. <span>{{startDate2}} 至 {{endDate2}}</span>
  34. <image @click="next('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  35. </view>
  36. </view>
  37. <view class="qiun-charts" style="background-color: #FFFFFF;">
  38. <canvas canvas-id="canvaColumn2" id="canvaColumn2" class="charts" disable-scroll=true @touchstart="touchLine2"
  39. @touchmove="moveLine2" @touchend="touchEndLine2" style="background-color: #FFFFFF;"></canvas>
  40. </view>
  41. </view>
  42. <view class="line"></view>
  43. <view class="qiun-columns">
  44. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  45. <view class="qiun-title-dot-light">
  46. <view class="dis">本月销售排行</view>
  47. </view>
  48. <view class="shijian" style="text-align: center;position: relative;">
  49. <image @click="pre('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  50. <span>{{startDate3}} 至 {{endDate3}}</span>
  51. <image @click="next('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  52. </view>
  53. </view>
  54. <view class="qiun-charts" style="background-color: #FFFFFF;">
  55. <canvas canvas-id="canvaColumn3" id="canvaColumn3" class="charts" disable-scroll=true @touchstart="touchLine3"
  56. @touchmove="moveLine3" @touchend="touchEndLine3" style="background-color: #FFFFFF;"></canvas>
  57. </view>
  58. </view>
  59. <view class="line"></view>
  60. <view class="qiun-columns">
  61. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  62. <view class="qiun-title-dot-light">
  63. <view class="dis">本年销售排行</view>
  64. </view>
  65. <view class="shijian" style="text-align: center;position: relative;">
  66. <image @click="pre('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  67. <span>{{startDate4}} 至 {{endDate4}}</span>
  68. <image @click="next('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  69. </view>
  70. </view>
  71. <view class="qiun-charts" style="background-color: #FFFFFF;">
  72. <canvas canvas-id="canvaColumn4" id="canvaColumn4" class="charts" disable-scroll=true @touchstart="touchLine4"
  73. @touchmove="moveLine4" @touchend="touchEndLine4" style="background-color: #FFFFFF;"></canvas>
  74. </view>
  75. </view>
  76. <!-- 各省份平均销售数据 -->
  77. <view v-if="show">
  78. <view class="qiun-columns">
  79. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  80. <view class="qiun-title-dot-light">
  81. <view class="dis">全国平均日销售排行</view>
  82. </view>
  83. <view class="shijian" style="text-align: center;position: relative;">
  84. <image @click="pre2('day')" class="preImg" src="/static/img/leftTriangle.png"></image>
  85. <span>{{startDate5}}</span>
  86. <image @click="next2('day')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  87. </view>
  88. </view>
  89. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  90. <canvas canvas-id="canvaColumn5" id="canvaColumn5" class="charts2" disable-scroll=true @touchstart="touchLine5"
  91. @touchmove="moveLine5" @touchend="touchEndLine5" style="background-color: #FFFFFF;"></canvas>
  92. </view>
  93. </view>
  94. <view class="line"></view>
  95. <view class="qiun-columns">
  96. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  97. <view class="qiun-title-dot-light">
  98. <view class="dis">全国平均周销售排行</view>
  99. </view>
  100. <view class="shijian" style="text-align: center;position: relative;">
  101. <image @click="pre2('week')" class="preImg" src="/static/img/leftTriangle.png"></image>
  102. <span>{{startDate6}} 至 {{endDate6}}</span>
  103. <image @click="next2('week')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  104. </view>
  105. </view>
  106. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  107. <canvas canvas-id="canvaColumn6" id="canvaColumn6" class="charts2" disable-scroll=true @touchstart="touchLine6"
  108. @touchmove="moveLine6" @touchend="touchEndLine6" style="background-color: #FFFFFF;"></canvas>
  109. </view>
  110. </view>
  111. <view class="line"></view>
  112. <view class="qiun-columns">
  113. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  114. <view class="qiun-title-dot-light">
  115. <view class="dis">全国平均月销售排行</view>
  116. </view>
  117. <view class="shijian" style="text-align: center;position: relative;">
  118. <image @click="pre2('month')" class="preImg" src="/static/img/leftTriangle.png"></image>
  119. <span>{{startDate7}} 至 {{endDate7}}</span>
  120. <image @click="next2('month')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  121. </view>
  122. </view>
  123. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  124. <canvas canvas-id="canvaColumn7" id="canvaColumn7" class="charts2" disable-scroll=true @touchstart="touchLine7"
  125. @touchmove="moveLine7" @touchend="touchEndLine7" style="background-color: #FFFFFF;"></canvas>
  126. </view>
  127. </view>
  128. <view class="line"></view>
  129. <view class="qiun-columns">
  130. <view class="qiun-bg-white qiun-title-bar qiun-common-mt">
  131. <view class="qiun-title-dot-light">
  132. <view class="dis">全国平均年销售排行</view>
  133. </view>
  134. <view class="shijian" style="text-align: center;position: relative;">
  135. <image @click="pre2('year')" class="preImg" src="/static/img/leftTriangle.png"></image>
  136. <span>{{startDate8}} 至 {{endDate8}}</span>
  137. <image @click="next2('year')" class="nextImg" src="/static/img/rightTriangle.png"></image>
  138. </view>
  139. </view>
  140. <view class="qiun-charts2" style="background-color: #FFFFFF;">
  141. <canvas canvas-id="canvaColumn8" id="canvaColumn8" class="charts2" disable-scroll=true @touchstart="touchLine8"
  142. @touchmove="moveLine8" @touchend="touchEndLine8" style="background-color: #FFFFFF;"></canvas>
  143. </view>
  144. </view>
  145. </view>
  146. </view>
  147. </template>
  148. <script>
  149. import {
  150. mapState,
  151. mapActions,
  152. mapMutations
  153. } from 'vuex';
  154. import uCharts from '@/components/u-charts/u-charts.js';
  155. import {
  156. dateUtils
  157. } from '@/common/util.js';
  158. var _self;
  159. var canvaColumn1 = null;
  160. var canvaColumn2 = null;
  161. var canvaColumn3 = null;
  162. var canvaColumn4 = null;
  163. var canvaColumn5 = null;
  164. var canvaColumn6 = null;
  165. var canvaColumn7 = null;
  166. var canvaColumn8 = null;
  167. export default {
  168. name: 'equipmentStatistics',
  169. props: {
  170. adminId: '',
  171. },
  172. data() {
  173. return {
  174. pname: '',
  175. cWidth: '',
  176. cHeight: '',
  177. pixelRatio: 1,
  178. startDate1: '',
  179. endDate1: '',
  180. startDate2: '',
  181. endDate2: '',
  182. startDate3: '',
  183. endDate3: '',
  184. startDate4: '',
  185. endDate4: '',
  186. startDate5: '',
  187. endDate5: '',
  188. startDate6: '',
  189. endDate6: '',
  190. startDate7: '',
  191. endDate7: '',
  192. startDate8: '',
  193. endDate8: '',
  194. show: false
  195. }
  196. },
  197. computed: {
  198. ...mapState(['loginUser']),
  199. },
  200. mounted() {
  201. // this.init2();
  202. },
  203. onShow() {
  204. var globalUser = uni.getStorageSync("globalUser");
  205. if (globalUser.id == '1') {
  206. this.show = true
  207. }
  208. this.init();
  209. },
  210. methods: {
  211. ...mapActions('chart', ['getProvince', 'getEquipmentStatistics', 'getMainStatistics', 'getMachineNum']),
  212. async init() {
  213. if (this.pname === '') {
  214. this.pname = uni.getStorageSync("name");
  215. }
  216. // console.log("adminId:" + this.adminId)
  217. _self = this;
  218. //图表中图
  219. this.cWidth = uni.upx2px(690);
  220. this.cHeight = uni.upx2px(500);
  221. await this.initDateRang(new Date(), 'day');
  222. await this.initDateRang(new Date(), 'week');
  223. await this.initDateRang(new Date(), 'month');
  224. await this.initDateRang(new Date(), 'year');
  225. await this.init2();
  226. },
  227. async init2() {
  228. if (this.pname === '') {
  229. this.pname = uni.getStorageSync("name");
  230. }
  231. // console.log("adminId:" + this.adminId)
  232. _self = this;
  233. //图表中图
  234. this.cWidth2 = uni.upx2px(690);
  235. this.cHeight2 = uni.upx2px(370);
  236. if (this.show == true) {
  237. await this.initDateRang2(new Date(), 'day');
  238. await this.initDateRang2(new Date(), 'week');
  239. await this.initDateRang2(new Date(), 'month');
  240. await this.initDateRang2(new Date(), 'year');
  241. }
  242. },
  243. initDateRang(day, chartType) {
  244. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  245. if (chartType === 'day') {
  246. this.startDate1 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  247. }
  248. if (chartType === 'week') {
  249. this.startDate2 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  250. this.endDate2 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  251. }
  252. if (chartType === 'month') {
  253. this.startDate3 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  254. this.endDate3 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  255. }
  256. if (chartType === 'year') {
  257. this.startDate4 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  258. this.endDate4 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  259. }
  260. return this.getStatisticsData(chartType);
  261. },
  262. initDateRang2(day, chartType) {
  263. const daystr = dateUtils.formateDate(day, 'yyyy/MM/dd');
  264. if (chartType === 'day') {
  265. this.startDate5 = dateUtils.formateDate(day, 'yyyy/MM/dd');
  266. }
  267. if (chartType === 'week') {
  268. this.startDate6 = dateUtils.formateDate(dateUtils.getFirstDayOfWeek(day), 'yyyy/MM/dd');
  269. this.endDate6 = dateUtils.formateDate(dateUtils.getLastDayOfWeek(day), 'yyyy/MM/dd');
  270. }
  271. if (chartType === 'month') {
  272. this.startDate7 = dateUtils.formateDate(dateUtils.getCurrentMonFirstDate(day), 'yyyy/MM/dd');
  273. this.endDate7 = dateUtils.formateDate(dateUtils.getCurrentMonLastDate(day), 'yyyy/MM/dd');
  274. }
  275. if (chartType === 'year') {
  276. this.startDate8 = dateUtils.formateDate(dateUtils.getCurrentYearFirstDate(day), 'yyyy/MM/dd');
  277. this.endDate8 = dateUtils.formateDate(dateUtils.getCurrentYearLastDate(day), 'yyyy/MM/dd');
  278. }
  279. return this.getProvinceData(chartType);
  280. },
  281. /**上一个 */
  282. pre(chartType) {
  283. let day;
  284. if (chartType === 'day') { // 日
  285. day = new Date(this.startDate1);
  286. day.setDate(day.getDate() - 1);
  287. }
  288. if (chartType === 'week') { // 周
  289. day = new Date(this.startDate2);
  290. day.setDate(day.getDate() - 7);
  291. }
  292. if (chartType === 'month') { // 月
  293. day = new Date(this.startDate3);
  294. day.setMonth(day.getMonth() - 1);
  295. }
  296. if (chartType === 'year') { // 年
  297. day = new Date(this.startDate4);
  298. day.setFullYear(day.getFullYear() - 1);
  299. }
  300. this.initDateRang(day, chartType);
  301. },
  302. pre2(chartType) {
  303. let day;
  304. if (chartType === 'day') { // 日
  305. day = new Date(this.startDate5);
  306. day.setDate(day.getDate() - 1);
  307. }
  308. if (chartType === 'week') { // 周
  309. day = new Date(this.startDate6);
  310. day.setDate(day.getDate() - 7);
  311. }
  312. if (chartType === 'month') { // 月
  313. day = new Date(this.startDate7);
  314. day.setMonth(day.getMonth() - 1);
  315. }
  316. if (chartType === 'year') { // 年
  317. day = new Date(this.startDate8);
  318. day.setFullYear(day.getFullYear() - 1);
  319. }
  320. this.initDateRang2(day, chartType);
  321. },
  322. /**下一个 */
  323. next(chartType) {
  324. let day;
  325. if (chartType === 'day') { // 日
  326. day = new Date(this.startDate1);
  327. day.setDate(day.getDate() + 1);
  328. }
  329. if (chartType === 'week') { // 周
  330. day = new Date(this.startDate2);
  331. day.setDate(day.getDate() + 7);
  332. }
  333. if (chartType === 'month') { // 月
  334. day = new Date(this.startDate3);
  335. day.setMonth(day.getMonth() + 1);
  336. }
  337. if (chartType === 'year') { // 年
  338. day = new Date(this.startDate4);
  339. day.setFullYear(day.getFullYear() + 1);
  340. }
  341. this.initDateRang(day, chartType);
  342. },
  343. next2(chartType) {
  344. let day;
  345. if (chartType === 'day') { // 日
  346. day = new Date(this.startDate5);
  347. day.setDate(day.getDate() + 1);
  348. }
  349. if (chartType === 'week') { // 周
  350. day = new Date(this.startDate6);
  351. day.setDate(day.getDate() + 7);
  352. }
  353. if (chartType === 'month') { // 月
  354. day = new Date(this.startDate7);
  355. day.setMonth(day.getMonth() + 1);
  356. }
  357. if (chartType === 'year') { // 年
  358. day = new Date(this.startDate8);
  359. day.setFullYear(day.getFullYear() + 1);
  360. }
  361. this.initDateRang2(day, chartType);
  362. },
  363. getStatisticsData(chartType) {
  364. const param = {
  365. 'chartType': chartType
  366. };
  367. if (chartType == 'day') {
  368. param['startDate'] = this.startDate1;
  369. param['endDate'] = this.startDate1;
  370. }
  371. if (chartType == 'week') {
  372. param['startDate'] = this.startDate2;
  373. param['endDate'] = this.endDate2;
  374. }
  375. if (chartType == 'month') {
  376. param['startDate'] = this.startDate3;
  377. param['endDate'] = this.endDate3;
  378. }
  379. if (chartType == 'year') {
  380. param['startDate'] = this.startDate4;
  381. param['endDate'] = this.endDate4;
  382. }
  383. if (this.adminId) { // 子组件,则拿传过来的参
  384. param['adminId'] = this.adminId;
  385. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  386. param['adminId'] = this.loginUser['id'];
  387. }
  388. if (this.equipmentId) {
  389. param['equipmentId'] = this.equipmentId;
  390. }
  391. return this.getEquipmentStatistics(param)
  392. .then(data => {
  393. uni.stopPullDownRefresh();
  394. if (param['chartType'] == 'day') {
  395. canvaColumn1 = this.initChart('canvaColumn1', data);
  396. }
  397. if (param['chartType'] == 'week') {
  398. canvaColumn2 = this.initChart('canvaColumn2', data);
  399. }
  400. if (param['chartType'] == 'month') {
  401. canvaColumn3 = this.initChart('canvaColumn3', data);
  402. }
  403. if (param['chartType'] == 'year') {
  404. canvaColumn4 = this.initChart('canvaColumn4', data);
  405. }
  406. }, _ => {
  407. uni.stopPullDownRefresh();
  408. if (param['chartType'] == 'day') {
  409. canvaColumn1 = this.initChart('canvaColumn1', {
  410. categories: ['暂无数据'],
  411. series: [{
  412. name: '销售个数',
  413. data: [0]
  414. }]
  415. });
  416. }
  417. if (param['chartType'] == 'week') {
  418. canvaColumn2 = this.initChart('canvaColumn2', {
  419. categories: ['暂无数据'],
  420. series: [{
  421. name: '销售个数',
  422. data: [0]
  423. }]
  424. });
  425. }
  426. if (param['chartType'] == 'month') {
  427. canvaColumn3 = this.initChart('canvaColumn3', {
  428. categories: ['暂无数据'],
  429. series: [{
  430. name: '销售个数',
  431. data: [0]
  432. }]
  433. });
  434. }
  435. if (param['chartType'] == 'year') {
  436. canvaColumn4 = this.initChart('canvaColumn4', {
  437. categories: ['暂无数据'],
  438. series: [{
  439. name: '销售个数',
  440. data: [0]
  441. }]
  442. });
  443. }
  444. });
  445. },
  446. getProvinceData(chartType) {
  447. const param = {
  448. 'chartType': chartType
  449. };
  450. if (chartType == 'day') {
  451. param['startDate'] = this.startDate5;
  452. param['endDate'] = this.startDate5;
  453. }
  454. if (chartType == 'week') {
  455. param['startDate'] = this.startDate6;
  456. param['endDate'] = this.endDate6;
  457. }
  458. if (chartType == 'month') {
  459. param['startDate'] = this.startDate7;
  460. param['endDate'] = this.endDate7;
  461. }
  462. if (chartType == 'year') {
  463. param['startDate'] = this.startDate8;
  464. param['endDate'] = this.endDate8;
  465. }
  466. if (this.adminId) { // 子组件,则拿传过来的参
  467. param['adminId'] = this.adminId;
  468. } else if ('admin' !== this.loginUser['username']) { //否则为主页,拿登录用户
  469. param['adminId'] = this.loginUser['id'];
  470. }
  471. if (this.equipmentId) {
  472. param['equipmentId'] = this.equipmentId;
  473. }
  474. return this.getProvince(param)
  475. .then(data => {
  476. uni.stopPullDownRefresh();
  477. if (param['chartType'] == 'day') {
  478. canvaColumn5 = this.initChart2('canvaColumn5', data);
  479. }
  480. if (param['chartType'] == 'week') {
  481. canvaColumn6 = this.initChart2('canvaColumn6', data);
  482. }
  483. if (param['chartType'] == 'month') {
  484. canvaColumn7 = this.initChart2('canvaColumn7', data);
  485. }
  486. if (param['chartType'] == 'year') {
  487. canvaColumn8 = this.initChart2('canvaColumn8', data);
  488. }
  489. }, _ => {
  490. uni.stopPullDownRefresh();
  491. if (param['chartType'] == 'day') {
  492. canvaColumn5 = this.initChart2('canvaColumn5', {
  493. categories: ['暂无数据'],
  494. series: [{
  495. name: '平均销售额',
  496. data: [0]
  497. }]
  498. });
  499. }
  500. if (param['chartType'] == 'week') {
  501. canvaColumn6 = this.initChart2('canvaColumn6', {
  502. categories: ['暂无数据'],
  503. series: [{
  504. name: '平均销售额',
  505. data: [0]
  506. }]
  507. });
  508. }
  509. if (param['chartType'] == 'month') {
  510. canvaColumn7 = this.initChart2('canvaColumn7', {
  511. categories: ['暂无数据'],
  512. series: [{
  513. name: '平均销售额',
  514. data: [0]
  515. }]
  516. });
  517. }
  518. if (param['chartType'] == 'year') {
  519. canvaColumn8 = this.initChart2('canvaColumn8', {
  520. categories: ['暂无数据'],
  521. series: [{
  522. name: '平均销售额',
  523. data: [0]
  524. }]
  525. });
  526. }
  527. });
  528. },
  529. initChart(canvasId, chartData) {
  530. return new uCharts({
  531. $this: _self,
  532. canvasId: canvasId,
  533. enableScroll: true,
  534. type: 'column',
  535. legend: true,
  536. fontSize: 11,
  537. background: '#FFFFFF', //y轴颜色
  538. pixelRatio: 1,
  539. animation: true,
  540. categories: chartData.categories,
  541. series: chartData.series,
  542. xAxis: {
  543. type: 'grid',
  544. gridType: 'dash',
  545. rotateLabel: true,
  546. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  547. scrollShow: true, //新增是否显示滚动条,默认false
  548. scrollAlign: 'left', //滚动条初始位置
  549. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  550. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  551. // disableGrid:true,
  552. },
  553. yAxis: {
  554. //disabled:true
  555. },
  556. dataLabel: true,
  557. width: _self.cWidth * _self.pixelRatio,
  558. height: _self.cHeight * _self.pixelRatio,
  559. extra: {
  560. column: {
  561. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  562. width: 18
  563. }
  564. }
  565. });
  566. },
  567. initChart2(canvasId, chartData) {
  568. return new uCharts({
  569. $this: _self,
  570. canvasId: canvasId,
  571. enableScroll: true,
  572. type: 'column',
  573. legend: true,
  574. fontSize: 11,
  575. background: '#FFFFFF', //y轴颜色
  576. pixelRatio: 1,
  577. animation: true,
  578. categories: chartData.categories,
  579. series: chartData.series,
  580. xAxis: {
  581. type: 'grid',
  582. gridType: 'dash',
  583. rotateLabel: true,
  584. itemCount: 4, //x轴单屏显示数据的数量,默认为5个
  585. scrollShow: true, //新增是否显示滚动条,默认false
  586. scrollAlign: 'left', //滚动条初始位置
  587. scrollBackgroundColor: '#F7F7FF', //默认为 #EFEBEF 滚动条颜色底色
  588. scrollColor: '#DEE7F7', //默认为 #A6A6A6 滚动条颜色
  589. // disableGrid:true,
  590. },
  591. yAxis: {
  592. //disabled:true
  593. },
  594. dataLabel: true,
  595. width: _self.cWidth2 * _self.pixelRatio,
  596. height: _self.cHeight2 * _self.pixelRatio,
  597. extra: {
  598. column: {
  599. // width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length
  600. width: 18
  601. }
  602. }
  603. });
  604. },
  605. touchLine1(e) {
  606. if (canvaColumn1) {
  607. canvaColumn1.scrollStart(e);
  608. }
  609. },
  610. moveLine1(e) {
  611. if (canvaColumn1) {
  612. canvaColumn1.scroll(e);
  613. }
  614. },
  615. touchEndLine1(e) {
  616. if (canvaColumn1) {
  617. canvaColumn1.scrollEnd(e);
  618. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  619. canvaColumn1.showToolTip(e, {
  620. format: function(item, category) {
  621. return category + ' ' + item.name + ':' + item.data
  622. }
  623. });
  624. }
  625. },
  626. touchLine2(e) {
  627. if (canvaColumn2) {
  628. canvaColumn2.scrollStart(e);
  629. }
  630. },
  631. moveLine2(e) {
  632. if (canvaColumn2) {
  633. canvaColumn2.scroll(e);
  634. }
  635. },
  636. touchEndLine2(e) {
  637. if (canvaColumn2) {
  638. canvaColumn2.scrollEnd(e);
  639. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  640. canvaColumn2.showToolTip(e, {
  641. format: function(item, category) {
  642. return category + ' ' + item.name + ':' + item.data
  643. }
  644. });
  645. }
  646. },
  647. touchLine3(e) {
  648. if (canvaColumn3) {
  649. canvaColumn3.scrollStart(e);
  650. }
  651. },
  652. moveLine3(e) {
  653. if (canvaColumn3) {
  654. canvaColumn3.scroll(e);
  655. }
  656. },
  657. touchEndLine3(e) {
  658. if (canvaColumn3) {
  659. canvaColumn3.scrollEnd(e);
  660. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  661. canvaColumn3.showToolTip(e, {
  662. format: function(item, category) {
  663. return category + ' ' + item.name + ':' + item.data
  664. }
  665. });
  666. }
  667. },
  668. touchLine4(e) {
  669. if (canvaColumn4) {
  670. canvaColumn4.scrollStart(e);
  671. }
  672. },
  673. moveLine4(e) {
  674. if (canvaColumn4) {
  675. canvaColumn4.scroll(e);
  676. }
  677. },
  678. touchEndLine4(e) {
  679. if (canvaColumn4) {
  680. canvaColumn4.scrollEnd(e);
  681. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  682. canvaColumn4.showToolTip(e, {
  683. format: function(item, category) {
  684. return category + ' ' + item.name + ':' + item.data
  685. }
  686. });
  687. }
  688. },
  689. touchLine5(e) {
  690. if (canvaColumn5) {
  691. canvaColumn5.scrollStart(e);
  692. }
  693. },
  694. moveLine5(e) {
  695. if (canvaColumn5) {
  696. canvaColumn5.scroll(e);
  697. }
  698. },
  699. touchEndLine5(e) {
  700. if (canvaColumn5) {
  701. canvaColumn5.scrollEnd(e);
  702. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  703. canvaColumn5.showToolTip(e, {
  704. format: function(item, category) {
  705. return category + ' ' + item.name + ':' + item.data
  706. }
  707. });
  708. }
  709. },
  710. touchLine6(e) {
  711. if (canvaColumn6) {
  712. canvaColumn6.scrollStart(e);
  713. }
  714. },
  715. moveLine6(e) {
  716. if (canvaColumn6) {
  717. canvaColumn6.scroll(e);
  718. }
  719. },
  720. touchEndLine6(e) {
  721. if (canvaColumn6) {
  722. canvaColumn6.scrollEnd(e);
  723. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  724. canvaColumn6.showToolTip(e, {
  725. format: function(item, category) {
  726. return category + ' ' + item.name + ':' + item.data
  727. }
  728. });
  729. }
  730. },
  731. touchLine7(e) {
  732. if (canvaColumn7) {
  733. canvaColumn7.scrollStart(e);
  734. }
  735. },
  736. moveLine7(e) {
  737. if (canvaColumn7) {
  738. canvaColumn7.scroll(e);
  739. }
  740. },
  741. touchEndLine7(e) {
  742. if (canvaColumn7) {
  743. canvaColumn7.scrollEnd(e);
  744. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  745. canvaColumn7.showToolTip(e, {
  746. format: function(item, category) {
  747. return category + ' ' + item.name + ':' + item.data
  748. }
  749. });
  750. }
  751. },
  752. touchLine8(e) {
  753. if (canvaColumn8) {
  754. canvaColumn8.scrollStart(e);
  755. }
  756. },
  757. moveLine8(e) {
  758. if (canvaColumn8) {
  759. canvaColumn8.scroll(e);
  760. }
  761. },
  762. touchEndLine8(e) {
  763. if (canvaColumn8) {
  764. canvaColumn8.scrollEnd(e);
  765. //下面是toolTip事件,如果滚动后不需要显示,可不填写
  766. canvaColumn8.showToolTip(e, {
  767. format: function(item, category) {
  768. return category + ' ' + item.name + ':' + item.data
  769. }
  770. });
  771. }
  772. },
  773. }
  774. }
  775. </script>
  776. <style>
  777. page {
  778. /* background: #F2F2F2; */
  779. background: #FFFFFF;
  780. width: 750upx;
  781. overflow-x: hidden;
  782. }
  783. .head {
  784. display: flex;
  785. flex-direction: row;
  786. background: #206DC3;
  787. width: 750upx;
  788. height: 120upx;
  789. }
  790. .title {
  791. /* border-left: 10upx solid #0ea391; */
  792. color: #363D44;
  793. font-size: 62upx;
  794. font-family: "PingFang-SC-Bold";
  795. text-align: center;
  796. margin: auto;
  797. }
  798. .ri {
  799. width: 690upx;
  800. height: 210upx;
  801. background: #FFFFFF;
  802. border-radius: 15upx;
  803. /* 上移 */
  804. transform: translateY(-90upx);
  805. text-align: center;
  806. margin: auto;
  807. display: flex;
  808. flex-direction: row;
  809. /* 阴影 */
  810. box-shadow: 0upx -1upx 20upx #D3D3D3;
  811. /* box-shadow:0px 0px 10px 5px #aaa; */
  812. }
  813. .riShell {
  814. display: flex;
  815. flex-direction: row;
  816. margin: auto;
  817. }
  818. .riTitle {
  819. display: flex;
  820. flex-direction: column;
  821. margin: auto;
  822. }
  823. .riqi {
  824. display: flex;
  825. flex-direction: column;
  826. margin: auto;
  827. }
  828. .fourTitle {
  829. width: 690upx;
  830. height: 294upx;
  831. display: flex;
  832. flex-direction: row;
  833. flex-wrap: wrap;
  834. background: #FFFFFF;
  835. box-shadow: 0upx 0upx 20upx #D3D3D3;
  836. margin: auto;
  837. border-radius: 15upx;
  838. transform: translateY(-60upx);
  839. }
  840. .four {
  841. display: flex;
  842. flex-direction: row;
  843. margin: auto;
  844. width: 48%;
  845. }
  846. .fourImg {
  847. width: 54upx;
  848. height: 54upx;
  849. }
  850. .qiun-padding {
  851. padding: 2%;
  852. width: 96%;
  853. }
  854. .qiun-wrap {
  855. display: flex;
  856. flex-wrap: wrap;
  857. }
  858. .qiun-rows {
  859. display: flex;
  860. flex-direction: row !important;
  861. }
  862. .qiun-columns {
  863. display: flex;
  864. flex-direction: column !important;
  865. }
  866. .qiun-common-mt {
  867. margin-top: 0upx;
  868. height: 160upx;
  869. }
  870. .qiun-bg-white {
  871. background: #FFFFFF;
  872. }
  873. .qiun-title-bar {
  874. width: 100%;
  875. /* padding: 10upx 2%; */
  876. flex-wrap: nowrap;
  877. border-radius: 15upx;
  878. }
  879. .qiun-title-dot-light {
  880. width: 92%;
  881. border-left: 20upx;
  882. border-left: 10upx solid #206DC3;
  883. padding-left: 10upx;
  884. height: 32upx;
  885. font-family: "PingFang-SC-Bold";
  886. font-weight: bold;
  887. margin: auto;
  888. font-size: 32upx;
  889. color: #363D44;
  890. }
  891. .dis {
  892. transform: translateY(-13upx);
  893. font-size: 32upx;
  894. font-family: "PingFang-SC-Bold";
  895. color: #363D44;
  896. }
  897. .shijian {
  898. padding-top: 30upx;
  899. height: 80upx;
  900. width: 690upx;
  901. margin: auto;
  902. box-shadow: 0upx 0upx 10upx #D3D3D3;
  903. }
  904. .line {
  905. background: #ECECEC;
  906. height: 20upx;
  907. }
  908. .qiun-charts {
  909. width: 690upx;
  910. height: 550upx;
  911. padding-top: 50upx;
  912. background-color: #FFFFFF;
  913. margin: auto;
  914. }
  915. .qiun-charts2 {
  916. width: 690upx;
  917. height: 370upx;
  918. padding-top: 50upx;
  919. background-color: #FFFFFF;
  920. margin: auto;
  921. }
  922. .charts {
  923. width: 690upx;
  924. height: 550upx;
  925. background-color: #FFFFFF;
  926. margin: auto;
  927. }
  928. .charts2 {
  929. width: 690upx;
  930. height: 370upx;
  931. background-color: #FFFFFF;
  932. margin: auto;
  933. }
  934. .preImg {
  935. position: absolute;
  936. right: 30upx;
  937. width: 71upx;
  938. height: 57upx;
  939. }
  940. .nextImg {
  941. position: absolute;
  942. right: 30upx;
  943. width: 71upx;
  944. height: 57upx;
  945. }
  946. </style>