江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1625 lines
54 KiB

1 year ago
  1. <!--
  2. * qiun-data-charts 秋云高性能跨全端图表组件
  3. * Copyright (c) 2021 QIUN® 秋云 https://www.ucharts.cn All rights reserved.
  4. * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
  5. * 复制使用请保留本段注释感谢支持开源
  6. * 为方便更多开发者使用如有更好的建议请提交码云 Pull Requests
  7. *
  8. * uCharts®官方网站
  9. * https://www.uCharts.cn
  10. *
  11. * 开源地址:
  12. * https://gitee.com/uCharts/uCharts
  13. *
  14. * uni-app插件市场地址
  15. * http://ext.dcloud.net.cn/plugin?id=271
  16. *
  17. -->
  18. <template>
  19. <view class="chartsview" :id="'ChartBoxId'+cid">
  20. <view v-if="mixinDatacomLoading">
  21. <!-- 自定义加载状态请改这里 -->
  22. <qiun-loading :loadingType="loadingType" />
  23. </view>
  24. <view v-if="mixinDatacomErrorMessage && errorShow" @tap="reloading">
  25. <!-- 自定义错误提示请改这里 -->
  26. <qiun-error :errorMessage="errorMessage" />
  27. </view>
  28. <!-- APP和H5采用renderjs渲染图表 -->
  29. <!-- #ifdef APP-VUE || H5 -->
  30. <block v-if="echarts">
  31. <view
  32. :style="{ background: background }"
  33. style="width: 100%;height: 100%;"
  34. :data-directory="directory"
  35. :id="'EC'+cid"
  36. :prop="echartsOpts"
  37. :change:prop="rdcharts.ecinit"
  38. :resize="echartsResize"
  39. :change:resize="rdcharts.ecresize"
  40. v-show="showchart"
  41. />
  42. </block>
  43. <block v-else>
  44. <view
  45. v-on:tap="rdcharts.tap"
  46. v-on:mousemove="rdcharts.mouseMove"
  47. v-on:mousedown="rdcharts.mouseDown"
  48. v-on:mouseup="rdcharts.mouseUp"
  49. v-on:touchstart="rdcharts.touchStart"
  50. v-on:touchmove="rdcharts.touchMove"
  51. v-on:touchend="rdcharts.touchEnd"
  52. :id="'UC'+cid"
  53. :prop="uchartsOpts"
  54. :change:prop="rdcharts.ucinit"
  55. >
  56. <canvas
  57. :id="cid"
  58. :canvasId="cid"
  59. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  60. :disable-scroll="disableScroll"
  61. @error="_error"
  62. v-show="showchart"
  63. />
  64. </view>
  65. </block>
  66. <!-- #endif -->
  67. <!-- 支付宝小程序 -->
  68. <!-- #ifdef MP-ALIPAY -->
  69. <block v-if="ontouch">
  70. <canvas
  71. :id="cid"
  72. :canvasId="cid"
  73. :width="cWidth * pixel"
  74. :height="cHeight * pixel"
  75. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  76. :disable-scroll="disScroll"
  77. @tap="_tap"
  78. @touchstart="_touchStart"
  79. @touchmove="_touchMove"
  80. @touchend="_touchEnd"
  81. @error="_error"
  82. v-show="showchart"
  83. />
  84. </block>
  85. <block v-if="!ontouch">
  86. <canvas
  87. :id="cid"
  88. :canvasId="cid"
  89. :width="cWidth * pixel"
  90. :height="cHeight * pixel"
  91. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  92. :disable-scroll="disScroll"
  93. @tap="_tap"
  94. @error="_error"
  95. v-show="showchart"
  96. />
  97. </block>
  98. <!-- #endif -->
  99. <!-- 其他小程序通过vue渲染图表 -->
  100. <!-- #ifdef MP-WEIXIN || MP-BAIDU || MP-QQ || MP-TOUTIAO || MP-KUAISHOU || MP-LARK || MP-JD || MP-360 -->
  101. <block v-if="type2d">
  102. <view v-if="ontouch" @tap="_tap">
  103. <canvas
  104. :id="cid"
  105. :canvasId="cid"
  106. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  107. type="2d"
  108. :disable-scroll="disScroll"
  109. @touchstart="_touchStart"
  110. @touchmove="_touchMove"
  111. @touchend="_touchEnd"
  112. @error="_error"
  113. v-show="showchart"
  114. />
  115. </view>
  116. <view v-if="!ontouch" @tap="_tap">
  117. <canvas
  118. :id="cid"
  119. :canvasId="cid"
  120. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  121. type="2d"
  122. :disable-scroll="disScroll"
  123. @error="_error"
  124. v-show="showchart"
  125. />
  126. </view>
  127. </block>
  128. <block v-if="!type2d">
  129. <view v-if="ontouch" @tap="_tap">
  130. <canvas
  131. :id="cid"
  132. :canvasId="cid"
  133. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  134. @touchstart="_touchStart"
  135. @touchmove="_touchMove"
  136. @touchend="_touchEnd"
  137. :disable-scroll="disScroll"
  138. @error="_error"
  139. v-if="showchart"
  140. />
  141. </view>
  142. <view v-if="!ontouch" >
  143. <canvas
  144. :id="cid"
  145. :canvasId="cid"
  146. :style="{ width: cWidth + 'px', height: cHeight + 'px', background: background }"
  147. :disable-scroll="disScroll"
  148. @tap="_tap"
  149. @error="_error"
  150. v-if="showchart"
  151. />
  152. </view>
  153. </block>
  154. <!-- #endif -->
  155. </view>
  156. </template>
  157. <script>
  158. import uCharts from '../../js_sdk/u-charts/u-charts.js';
  159. import cfu from '../../js_sdk/u-charts/config-ucharts.js';
  160. // #ifdef APP-VUE || H5
  161. import cfe from '../../js_sdk/u-charts/config-echarts.js';
  162. // #endif
  163. function deepCloneAssign(origin = {}, ...args) {
  164. for (let i in args) {
  165. for (let key in args[i]) {
  166. if (args[i].hasOwnProperty(key)) {
  167. origin[key] = args[i][key] && typeof args[i][key] === 'object' ? deepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
  168. }
  169. }
  170. }
  171. return origin;
  172. }
  173. function formatterAssign(args,formatter) {
  174. for (let key in args) {
  175. if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){
  176. formatterAssign(args[key],formatter)
  177. }else if(key === 'format' && typeof args[key] === 'string'){
  178. args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
  179. }
  180. }
  181. return args;
  182. }
  183. // 时间转换函数,为了匹配uniClinetDB读取出的时间与categories不同
  184. function getFormatDate(date) {
  185. var seperator = "-";
  186. var year = date.getFullYear();
  187. var month = date.getMonth() + 1;
  188. var strDate = date.getDate();
  189. if (month >= 1 && month <= 9) {
  190. month = "0" + month;
  191. }
  192. if (strDate >= 0 && strDate <= 9) {
  193. strDate = "0" + strDate;
  194. }
  195. var currentdate = year + seperator + month + seperator + strDate;
  196. return currentdate;
  197. }
  198. var lastMoveTime = null;
  199. /**
  200. * 防抖
  201. *
  202. * @param { Function } fn 要执行的方法
  203. * @param { Number } wait 防抖多少毫秒
  204. *
  205. * vue 中使用注意不能使用箭头函数否则this指向不对并且不能再次封装如
  206. * move(){ // 错误调用方式
  207. * debounce(function () {
  208. * console.log(this.title);
  209. * }, 1000)};
  210. * 应该直接使用// 正确调用方式
  211. * move: debounce(function () {
  212. * console.log(this.title);
  213. * }, 1000)
  214. */
  215. function debounce(fn, wait) {
  216. let timer = false;
  217. return function() {
  218. clearTimeout(timer);
  219. timer && clearTimeout(timer);
  220. timer = setTimeout(() => {
  221. timer = false;
  222. fn.apply(this, arguments); // 把参数传进去
  223. }, wait);
  224. };
  225. }
  226. export default {
  227. name: 'qiun-data-charts',
  228. mixins: [uniCloud.mixinDatacom],
  229. props: {
  230. type: {
  231. type: String,
  232. default: null
  233. },
  234. canvasId: {
  235. type: String,
  236. default: 'uchartsid'
  237. },
  238. canvas2d: {
  239. type: Boolean,
  240. default: false
  241. },
  242. background: {
  243. type: String,
  244. default: 'rgba(0,0,0,0)'
  245. },
  246. animation: {
  247. type: Boolean,
  248. default: true
  249. },
  250. chartData: {
  251. type: Object,
  252. default() {
  253. return {
  254. categories: [],
  255. series: []
  256. };
  257. }
  258. },
  259. opts: {
  260. type: Object,
  261. default() {
  262. return {};
  263. }
  264. },
  265. eopts: {
  266. type: Object,
  267. default() {
  268. return {};
  269. }
  270. },
  271. loadingType: {
  272. type: Number,
  273. default: 2
  274. },
  275. errorShow: {
  276. type: Boolean,
  277. default: true
  278. },
  279. errorReload: {
  280. type: Boolean,
  281. default: true
  282. },
  283. errorMessage: {
  284. type: String,
  285. default: null
  286. },
  287. inScrollView: {
  288. type: Boolean,
  289. default: false
  290. },
  291. reshow: {
  292. type: Boolean,
  293. default: false
  294. },
  295. reload: {
  296. type: Boolean,
  297. default: false
  298. },
  299. disableScroll: {
  300. type: Boolean,
  301. default: false
  302. },
  303. optsWatch: {
  304. type: Boolean,
  305. default: true
  306. },
  307. onzoom: {
  308. type: Boolean,
  309. default: false
  310. },
  311. ontap: {
  312. type: Boolean,
  313. default: true
  314. },
  315. ontouch: {
  316. type: Boolean,
  317. default: false
  318. },
  319. onmouse: {
  320. type: Boolean,
  321. default: true
  322. },
  323. onmovetip: {
  324. type: Boolean,
  325. default: false
  326. },
  327. echartsH5: {
  328. type: Boolean,
  329. default: false
  330. },
  331. echartsApp: {
  332. type: Boolean,
  333. default: false
  334. },
  335. tooltipShow: {
  336. type: Boolean,
  337. default: true
  338. },
  339. tooltipFormat: {
  340. type: String,
  341. default: undefined
  342. },
  343. tooltipCustom: {
  344. type: Object,
  345. default: undefined
  346. },
  347. startDate: {
  348. type: String,
  349. default: undefined
  350. },
  351. endDate: {
  352. type: String,
  353. default: undefined
  354. },
  355. textEnum: {
  356. type: Array,
  357. default () {
  358. return []
  359. }
  360. },
  361. groupEnum: {
  362. type: Array,
  363. default () {
  364. return []
  365. }
  366. },
  367. pageScrollTop: {
  368. type: Number,
  369. default: 0
  370. },
  371. directory: {
  372. type: String,
  373. default: '/'
  374. },
  375. tapLegend: {
  376. type: Boolean,
  377. default: true
  378. },
  379. menus: {
  380. type: Array,
  381. default () {
  382. return []
  383. }
  384. }
  385. },
  386. data() {
  387. return {
  388. cid: 'uchartsid',
  389. inWx: false,
  390. inAli: false,
  391. inTt: false,
  392. inBd: false,
  393. inH5: false,
  394. inApp: false,
  395. inWin: false,
  396. type2d: true,
  397. disScroll: false,
  398. openmouse: false,
  399. pixel: 1,
  400. cWidth: 375,
  401. cHeight: 250,
  402. showchart: false,
  403. echarts: false,
  404. echartsResize:{
  405. state:false
  406. },
  407. uchartsOpts: {},
  408. echartsOpts: {},
  409. drawData:{},
  410. lastDrawTime:null,
  411. };
  412. },
  413. created(){
  414. this.cid = this.canvasId
  415. if (this.canvasId == 'uchartsid' || this.canvasId == '') {
  416. let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
  417. let len = t.length
  418. let id = ''
  419. for (let i = 0; i < 32; i++) {
  420. id += t.charAt(Math.floor(Math.random() * len))
  421. }
  422. this.cid = id
  423. }
  424. const systemInfo = uni.getSystemInfoSync()
  425. if(systemInfo.platform === 'windows' || systemInfo.platform === 'mac'){
  426. this.inWin = true;
  427. }
  428. // #ifdef MP-WEIXIN
  429. this.inWx = true;
  430. if (this.canvas2d === false || systemInfo.platform === 'windows' || systemInfo.platform === 'mac') {
  431. this.type2d = false;
  432. }else{
  433. this.type2d = true;
  434. this.pixel = systemInfo.pixelRatio;
  435. }
  436. // #endif
  437. //非微信小程序端强制关闭canvas2d模式
  438. // #ifndef MP-WEIXIN
  439. this.type2d = false;
  440. // #endif
  441. // #ifdef MP-TOUTIAO || MP-LARK || MP-ALIPAY
  442. this.type2d = this.canvas2d;
  443. // #endif
  444. // #ifdef MP-ALIPAY
  445. this.inAli = true;
  446. this.pixel = systemInfo.pixelRatio;
  447. // #endif
  448. // #ifdef MP-BAIDU
  449. this.inBd = true;
  450. // #endif
  451. // #ifdef MP-TOUTIAO
  452. this.inTt = true;
  453. // #endif
  454. this.disScroll = this.disableScroll;
  455. },
  456. mounted() {
  457. // #ifdef APP-VUE
  458. this.inApp = true;
  459. if (this.echartsApp === true) {
  460. this.echarts = true;
  461. this.openmouse = false;
  462. }
  463. // #endif
  464. // #ifdef APP-NVUE
  465. this.inApp = true;
  466. this.mixinDatacomLoading = false
  467. this.mixinDatacomErrorMessage = "暂不支持NVUE"
  468. // #endif
  469. // #ifdef H5
  470. this.inH5 = true;
  471. if(this.inWin === true){
  472. this.openmouse = this.onmouse;
  473. }
  474. if (this.echartsH5 === true) {
  475. this.echarts = true;
  476. }
  477. // #endif
  478. this.$nextTick(()=>{
  479. this.beforeInit();
  480. })
  481. // #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || APP-VUE
  482. const time = this.inH5 ? 500 : 200;
  483. const _this = this;
  484. uni.onWindowResize(
  485. debounce(function(res) {
  486. if (_this.mixinDatacomLoading == true) {
  487. return;
  488. }
  489. let errmsg = _this.mixinDatacomErrorMessage;
  490. if (errmsg !== null && errmsg !== 'null' && errmsg !== '') {
  491. return;
  492. }
  493. if (_this.echarts) {
  494. _this.echartsResize.state = !_this.echartsResize.state;
  495. } else {
  496. _this.resizeHandler();
  497. }
  498. }, time)
  499. );
  500. // #endif
  501. },
  502. destroyed(){
  503. if(this.echarts === true){
  504. delete cfe.option[this.cid]
  505. delete cfe.instance[this.cid]
  506. }else{
  507. delete cfu.option[this.cid]
  508. delete cfu.instance[this.cid]
  509. }
  510. // #ifndef MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
  511. uni.offWindowResize(()=>{})
  512. // #endif
  513. },
  514. watch: {
  515. chartDataProps: {
  516. handler(val, oldval) {
  517. if (typeof val === 'object') {
  518. if (JSON.stringify(val) !== JSON.stringify(oldval)) {
  519. this._clearChart();
  520. if (val.series && val.series.length > 0) {
  521. this.beforeInit();
  522. }else{
  523. this.mixinDatacomLoading = true;
  524. this.showchart = false;
  525. this.mixinDatacomErrorMessage = null;
  526. }
  527. }
  528. } else {
  529. this.mixinDatacomLoading = false;
  530. this._clearChart();
  531. this.showchart = false;
  532. this.mixinDatacomErrorMessage = '参数错误:chartData数据类型错误';
  533. }
  534. },
  535. immediate: false,
  536. deep: true
  537. },
  538. localdata:{
  539. handler(val, oldval) {
  540. if (JSON.stringify(val) !== JSON.stringify(oldval)) {
  541. if (val.length > 0) {
  542. this.beforeInit();
  543. }else{
  544. this.mixinDatacomLoading = true;
  545. this._clearChart();
  546. this.showchart = false;
  547. this.mixinDatacomErrorMessage = null;
  548. }
  549. }
  550. },
  551. immediate: false,
  552. deep: true
  553. },
  554. optsProps: {
  555. handler(val, oldval) {
  556. if (typeof val === 'object') {
  557. if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === false && this.optsWatch == true) {
  558. this.checkData(this.drawData);
  559. }
  560. } else {
  561. this.mixinDatacomLoading = false;
  562. this._clearChart();
  563. this.showchart = false;
  564. this.mixinDatacomErrorMessage = '参数错误:opts数据类型错误';
  565. }
  566. },
  567. immediate: false,
  568. deep: true
  569. },
  570. eoptsProps: {
  571. handler(val, oldval) {
  572. if (typeof val === 'object') {
  573. if (JSON.stringify(val) !== JSON.stringify(oldval) && this.echarts === true) {
  574. this.checkData(this.drawData);
  575. }
  576. } else {
  577. this.mixinDatacomLoading = false;
  578. this.showchart = false;
  579. this.mixinDatacomErrorMessage = '参数错误:eopts数据类型错误';
  580. }
  581. },
  582. immediate: false,
  583. deep: true
  584. },
  585. reshow(val, oldval) {
  586. if (val === true && this.mixinDatacomLoading === false) {
  587. setTimeout(() => {
  588. this.mixinDatacomErrorMessage = null;
  589. this.echartsResize.state = !this.echartsResize.state;
  590. this.checkData(this.drawData);
  591. }, 200);
  592. }
  593. },
  594. reload(val, oldval) {
  595. if (val === true) {
  596. this.showchart = false;
  597. this.mixinDatacomErrorMessage = null;
  598. this.reloading();
  599. }
  600. },
  601. mixinDatacomErrorMessage(val, oldval) {
  602. if (val) {
  603. this.emitMsg({name: 'error', params: {type:"error", errorShow: this.errorShow, msg: val, id: this.cid}});
  604. if(this.errorShow){
  605. console.log('[秋云图表组件]' + val);
  606. }
  607. }
  608. },
  609. errorMessage(val, oldval) {
  610. if (val && this.errorShow && val !== null && val !== 'null' && val !== '') {
  611. this.showchart = false;
  612. this.mixinDatacomLoading = false;
  613. this.mixinDatacomErrorMessage = val;
  614. } else {
  615. this.showchart = false;
  616. this.mixinDatacomErrorMessage = null;
  617. this.reloading();
  618. }
  619. }
  620. },
  621. computed: {
  622. optsProps() {
  623. return JSON.parse(JSON.stringify(this.opts));
  624. },
  625. eoptsProps() {
  626. return JSON.parse(JSON.stringify(this.eopts));
  627. },
  628. chartDataProps() {
  629. return JSON.parse(JSON.stringify(this.chartData));
  630. },
  631. },
  632. methods: {
  633. beforeInit(){
  634. this.mixinDatacomErrorMessage = null;
  635. if (typeof this.chartData === 'object' && this.chartData != null && this.chartData.series !== undefined && this.chartData.series.length > 0) {
  636. //拷贝一下chartData,为了opts变更后统一数据来源
  637. this.drawData = deepCloneAssign({}, this.chartData);
  638. this.mixinDatacomLoading = false;
  639. this.showchart = true;
  640. this.checkData(this.chartData);
  641. }else if(this.localdata.length>0){
  642. this.mixinDatacomLoading = false;
  643. this.showchart = true;
  644. this.localdataInit(this.localdata);
  645. }else if(this.collection !== ''){
  646. this.mixinDatacomLoading = false;
  647. this.getCloudData();
  648. }else{
  649. this.mixinDatacomLoading = true;
  650. }
  651. },
  652. localdataInit(resdata){
  653. //替换enum类型为正确的描述
  654. if(this.groupEnum.length>0){
  655. for (let i = 0; i < resdata.length; i++) {
  656. for (let j = 0; j < this.groupEnum.length; j++) {
  657. if(resdata[i].group === this.groupEnum[j].value){
  658. resdata[i].group = this.groupEnum[j].text
  659. }
  660. }
  661. }
  662. }
  663. if(this.textEnum.length>0){
  664. for (let i = 0; i < resdata.length; i++) {
  665. for (let j = 0; j < this.textEnum.length; j++) {
  666. if(resdata[i].text === this.textEnum[j].value){
  667. resdata[i].text = this.textEnum[j].text
  668. }
  669. }
  670. }
  671. }
  672. let needCategories = false;
  673. let tmpData = {categories:[], series:[]}
  674. let tmpcategories = []
  675. let tmpseries = [];
  676. //拼接categories
  677. if(this.echarts === true){
  678. needCategories = cfe.categories.includes(this.type)
  679. }else{
  680. needCategories = cfu.categories.includes(this.type)
  681. }
  682. if(needCategories === true){
  683. //如果props中的chartData带有categories,则优先使用chartData的categories
  684. if(this.chartData && this.chartData.categories && this.chartData.categories.length>0){
  685. tmpcategories = this.chartData.categories
  686. }else{
  687. //如果是日期类型的数据,不管是本地数据还是云数据,都按起止日期自动拼接categories
  688. if(this.startDate && this.endDate){
  689. let idate = new Date(this.startDate)
  690. let edate = new Date(this.endDate)
  691. while (idate <= edate) {
  692. tmpcategories.push(getFormatDate(idate))
  693. idate = idate.setDate(idate.getDate() + 1)
  694. idate = new Date(idate)
  695. }
  696. //否则从结果中去重并拼接categories
  697. }else{
  698. let tempckey = {};
  699. resdata.map(function(item, index) {
  700. if (item.text != undefined && !tempckey[item.text]) {
  701. tmpcategories.push(item.text)
  702. tempckey[item.text] = true
  703. }
  704. });
  705. }
  706. }
  707. tmpData.categories = tmpcategories
  708. }
  709. //拼接series
  710. let tempskey = {};
  711. resdata.map(function(item, index) {
  712. if (item.group != undefined && !tempskey[item.group]) {
  713. tmpseries.push({ name: item.group, data: [] });
  714. tempskey[item.group] = true;
  715. }
  716. });
  717. //如果没有获取到分组名称(可能是带categories的数据,也可能是不带的饼图类)
  718. if (tmpseries.length == 0) {
  719. tmpseries = [{ name: '默认分组', data: [] }];
  720. //如果是需要categories的图表类型
  721. if(needCategories === true){
  722. for (let j = 0; j < tmpcategories.length; j++) {
  723. let seriesdata = 0;
  724. for (let i = 0; i < resdata.length; i++) {
  725. if (resdata[i].text == tmpcategories[j]) {
  726. seriesdata = resdata[i].value;
  727. }
  728. }
  729. tmpseries[0].data.push(seriesdata);
  730. }
  731. //如果是饼图类的图表类型
  732. }else{
  733. for (let i = 0; i < resdata.length; i++) {
  734. tmpseries[0].data.push({"name": resdata[i].text,"value": resdata[i].value});
  735. }
  736. }
  737. //如果有分组名
  738. } else {
  739. for (let k = 0; k < tmpseries.length; k++) {
  740. //如果有categories
  741. if (tmpcategories.length > 0) {
  742. for (let j = 0; j < tmpcategories.length; j++) {
  743. let seriesdata = 0;
  744. for (let i = 0; i < resdata.length; i++) {
  745. if (tmpseries[k].name == resdata[i].group && resdata[i].text == tmpcategories[j]) {
  746. seriesdata = resdata[i].value;
  747. }
  748. }
  749. tmpseries[k].data.push(seriesdata);
  750. }
  751. //如果传了group而没有传text,即没有categories(正常情况下这种数据是不符合数据要求规范的)
  752. } else {
  753. for (let i = 0; i < resdata.length; i++) {
  754. if (tmpseries[k].name == resdata[i].group) {
  755. tmpseries[k].data.push(resdata[i].value);
  756. }
  757. }
  758. }
  759. }
  760. }
  761. tmpData.series = tmpseries
  762. //拷贝一下chartData,为了opts变更后统一数据来源
  763. this.drawData = deepCloneAssign({}, tmpData);
  764. this.checkData(tmpData)
  765. },
  766. reloading() {
  767. if(this.errorReload === false){
  768. return;
  769. }
  770. this.showchart = false;
  771. this.mixinDatacomErrorMessage = null;
  772. if (this.collection !== '') {
  773. this.mixinDatacomLoading = false;
  774. this.onMixinDatacomPropsChange(true);
  775. } else {
  776. this.beforeInit();
  777. }
  778. },
  779. checkData(anyData) {
  780. let cid = this.cid
  781. //复位opts或eopts
  782. if(this.echarts === true){
  783. cfe.option[cid] = deepCloneAssign({}, this.eopts);
  784. cfe.option[cid].id = cid;
  785. cfe.option[cid].type = this.type;
  786. }else{
  787. if (this.type && cfu.type.includes(this.type)) {
  788. cfu.option[cid] = deepCloneAssign({}, cfu[this.type], this.opts);
  789. cfu.option[cid].canvasId = cid;
  790. } else {
  791. this.mixinDatacomLoading = false;
  792. this.showchart = false;
  793. this.mixinDatacomErrorMessage = '参数错误:props参数中type类型不正确';
  794. }
  795. }
  796. //挂载categories和series
  797. let newData = deepCloneAssign({}, anyData);
  798. if (newData.series !== undefined && newData.series.length > 0) {
  799. this.mixinDatacomErrorMessage = null;
  800. if (this.echarts === true) {
  801. cfe.option[cid].chartData = newData;
  802. this.$nextTick(()=>{
  803. this.init()
  804. })
  805. }else{
  806. cfu.option[cid].categories = newData.categories;
  807. cfu.option[cid].series = newData.series;
  808. this.$nextTick(()=>{
  809. this.init()
  810. })
  811. }
  812. }
  813. },
  814. resizeHandler() {
  815. //渲染防抖
  816. let currTime = Date.now();
  817. let lastDrawTime = this.lastDrawTime?this.lastDrawTime:currTime-3000;
  818. let duration = currTime - lastDrawTime;
  819. if (duration < 1000) return;
  820. let chartdom = uni
  821. .createSelectorQuery()
  822. // #ifndef MP-ALIPAY
  823. .in(this)
  824. // #endif
  825. .select('#ChartBoxId'+this.cid)
  826. .boundingClientRect(data => {
  827. this.showchart = true;
  828. if (data.width > 0 && data.height > 0) {
  829. if (data.width !== this.cWidth || data.height !== this.cHeight) {
  830. this.checkData(this.drawData)
  831. }
  832. }
  833. })
  834. .exec();
  835. },
  836. getCloudData() {
  837. if (this.mixinDatacomLoading == true) {
  838. return;
  839. }
  840. this.mixinDatacomLoading = true;
  841. this.mixinDatacomGet()
  842. .then(res => {
  843. this.mixinDatacomResData = res.result.data;
  844. this.localdataInit(this.mixinDatacomResData);
  845. })
  846. .catch(err => {
  847. this.mixinDatacomLoading = false;
  848. this.showchart = false;
  849. this.mixinDatacomErrorMessage = '请求错误:' + err;
  850. });
  851. },
  852. onMixinDatacomPropsChange(needReset, changed) {
  853. if (needReset == true && this.collection !== '') {
  854. this.showchart = false;
  855. this.mixinDatacomErrorMessage = null;
  856. this._clearChart();
  857. this.getCloudData();
  858. }
  859. },
  860. _clearChart() {
  861. let cid = this.cid
  862. if (this.echarts !== true && cfu.option[cid] && cfu.option[cid].context) {
  863. const ctx = cfu.option[cid].context;
  864. if(typeof ctx === "object" && !!!cfu.option[cid].update){
  865. ctx.clearRect(0, 0, this.cWidth*this.pixel, this.cHeight*this.pixel);
  866. ctx.draw();
  867. }
  868. }
  869. },
  870. init() {
  871. let cid = this.cid
  872. let chartdom = uni
  873. .createSelectorQuery()
  874. // #ifndef MP-ALIPAY
  875. .in(this)
  876. // #endif
  877. .select('#ChartBoxId'+cid)
  878. .boundingClientRect(data => {
  879. if (data.width > 0 && data.height > 0) {
  880. this.mixinDatacomLoading = false;
  881. this.showchart = true;
  882. this.lastDrawTime = Date.now();
  883. this.cWidth = data.width;
  884. this.cHeight = data.height;
  885. if(this.echarts !== true){
  886. cfu.option[cid].background = this.background == 'rgba(0,0,0,0)' ? '#FFFFFF' : this.background;
  887. cfu.option[cid].canvas2d = this.type2d;
  888. cfu.option[cid].pixelRatio = this.pixel;
  889. cfu.option[cid].animation = this.animation;
  890. cfu.option[cid].width = data.width * this.pixel;
  891. cfu.option[cid].height = data.height * this.pixel;
  892. cfu.option[cid].onzoom = this.onzoom;
  893. cfu.option[cid].ontap = this.ontap;
  894. cfu.option[cid].ontouch = this.ontouch;
  895. cfu.option[cid].onmouse = this.openmouse;
  896. cfu.option[cid].onmovetip = this.onmovetip;
  897. cfu.option[cid].tooltipShow = this.tooltipShow;
  898. cfu.option[cid].tooltipFormat = this.tooltipFormat;
  899. cfu.option[cid].tooltipCustom = this.tooltipCustom;
  900. cfu.option[cid].inScrollView = this.inScrollView;
  901. cfu.option[cid].lastDrawTime = this.lastDrawTime;
  902. cfu.option[cid].tapLegend = this.tapLegend;
  903. }
  904. //如果是H5或者App端,采用renderjs渲染图表
  905. if (this.inH5 || this.inApp) {
  906. if (this.echarts == true) {
  907. cfe.option[cid].ontap = this.ontap;
  908. cfe.option[cid].onmouse = this.openmouse;
  909. cfe.option[cid].tooltipShow = this.tooltipShow;
  910. cfe.option[cid].tooltipFormat = this.tooltipFormat;
  911. cfe.option[cid].tooltipCustom = this.tooltipCustom;
  912. cfe.option[cid].lastDrawTime = this.lastDrawTime;
  913. this.echartsOpts = deepCloneAssign({}, cfe.option[cid]);
  914. } else {
  915. cfu.option[cid].rotateLock = cfu.option[cid].rotate;
  916. this.uchartsOpts = deepCloneAssign({}, cfu.option[cid]);
  917. }
  918. //如果是小程序端,采用uCharts渲染
  919. } else {
  920. cfu.option[cid] = formatterAssign(cfu.option[cid],cfu.formatter)
  921. this.mixinDatacomErrorMessage = null;
  922. this.mixinDatacomLoading = false;
  923. this.showchart = true;
  924. this.$nextTick(()=>{
  925. if (this.type2d === true) {
  926. const query = uni.createSelectorQuery().in(this)
  927. query
  928. .select('#' + cid)
  929. .fields({ node: true, size: true })
  930. .exec(res => {
  931. if (res[0]) {
  932. const canvas = res[0].node;
  933. const ctx = canvas.getContext('2d');
  934. cfu.option[cid].context = ctx;
  935. cfu.option[cid].rotateLock = cfu.option[cid].rotate;
  936. if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
  937. this._updataUChart(cid)
  938. }else{
  939. canvas.width = data.width * this.pixel;
  940. canvas.height = data.height * this.pixel;
  941. canvas._width = data.width * this.pixel;
  942. canvas._height = data.height * this.pixel;
  943. setTimeout(()=>{
  944. cfu.option[cid].context.restore();
  945. cfu.option[cid].context.save();
  946. this._newChart(cid)
  947. },100)
  948. }
  949. } else {
  950. this.showchart = false;
  951. this.mixinDatacomErrorMessage = '参数错误:开启2d模式后,未获取到dom节点,canvas-id:' + cid;
  952. }
  953. });
  954. } else {
  955. if(this.inAli){
  956. cfu.option[cid].rotateLock = cfu.option[cid].rotate;
  957. }
  958. cfu.option[cid].context = uni.createCanvasContext(cid, this);
  959. if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
  960. this._updataUChart(cid)
  961. }else{
  962. setTimeout(()=>{
  963. cfu.option[cid].context.restore();
  964. cfu.option[cid].context.save();
  965. this._newChart(cid)
  966. },100)
  967. }
  968. }
  969. })
  970. }
  971. } else {
  972. this.mixinDatacomLoading = false;
  973. this.showchart = false;
  974. if (this.reshow == true) {
  975. this.mixinDatacomErrorMessage = '布局错误:未获取到父元素宽高尺寸!canvas-id:' + cid;
  976. }
  977. }
  978. })
  979. .exec();
  980. },
  981. saveImage(){
  982. uni.canvasToTempFilePath({
  983. canvasId: this.cid,
  984. success: res=>{
  985. //#ifdef H5
  986. var a = document.createElement("a");
  987. a.href = res.tempFilePath;
  988. a.download = this.cid;
  989. a.target = '_blank'
  990. a.click();
  991. //#endif
  992. //#ifndef H5
  993. uni.saveImageToPhotosAlbum({
  994. filePath: res.tempFilePath,
  995. success: function () {
  996. uni.showToast({
  997. title: '保存成功',
  998. duration: 2000
  999. });
  1000. }
  1001. });
  1002. //#endif
  1003. }
  1004. },this);
  1005. },
  1006. getImage(){
  1007. if(this.type2d == false){
  1008. uni.canvasToTempFilePath({
  1009. canvasId: this.cid,
  1010. success: res=>{
  1011. this.emitMsg({name: 'getImage', params: {type:"getImage", base64: res.tempFilePath}});
  1012. }
  1013. },this);
  1014. }else{
  1015. const query = uni.createSelectorQuery().in(this)
  1016. query
  1017. .select('#' + this.cid)
  1018. .fields({ node: true, size: true })
  1019. .exec(res => {
  1020. if (res[0]) {
  1021. const canvas = res[0].node;
  1022. this.emitMsg({name: 'getImage', params: {type:"getImage", base64: canvas.toDataURL('image/png')}});
  1023. }
  1024. });
  1025. }
  1026. },
  1027. // #ifndef APP-VUE || H5
  1028. _newChart(cid) {
  1029. if (this.mixinDatacomLoading == true) {
  1030. return;
  1031. }
  1032. this.showchart = true;
  1033. cfu.instance[cid] = new uCharts(cfu.option[cid]);
  1034. cfu.instance[cid].addEventListener('renderComplete', () => {
  1035. this.emitMsg({name: 'complete', params: {type:"complete", complete: true, id: cid, opts: cfu.instance[cid].opts}});
  1036. cfu.instance[cid].delEventListener('renderComplete')
  1037. });
  1038. cfu.instance[cid].addEventListener('scrollLeft', () => {
  1039. this.emitMsg({name: 'scrollLeft', params: {type:"scrollLeft", scrollLeft: true, id: cid, opts: cfu.instance[cid].opts}});
  1040. });
  1041. cfu.instance[cid].addEventListener('scrollRight', () => {
  1042. this.emitMsg({name: 'scrollRight', params: {type:"scrollRight", scrollRight: true, id: cid, opts: cfu.instance[cid].opts}});
  1043. });
  1044. },
  1045. _updataUChart(cid) {
  1046. cfu.instance[cid].updateData(cfu.option[cid])
  1047. },
  1048. _tooltipDefault(item, category, index, opts) {
  1049. if (category) {
  1050. let data = item.data
  1051. if(typeof item.data === "object"){
  1052. data = item.data.value
  1053. }
  1054. return category + ' ' + item.name + ':' + data;
  1055. } else {
  1056. if (item.properties && item.properties.name) {
  1057. return item.properties.name;
  1058. } else {
  1059. return item.name + ':' + item.data;
  1060. }
  1061. }
  1062. },
  1063. _showTooltip(e) {
  1064. let cid = this.cid
  1065. let tc = cfu.option[cid].tooltipCustom
  1066. if (tc && tc !== undefined && tc !== null) {
  1067. let offset = undefined;
  1068. if (tc.x >= 0 && tc.y >= 0) {
  1069. offset = { x: tc.x, y: tc.y + 10 };
  1070. }
  1071. cfu.instance[cid].showToolTip(e, {
  1072. index: tc.index,
  1073. offset: offset,
  1074. textList: tc.textList,
  1075. formatter: (item, category, index, opts) => {
  1076. if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
  1077. return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
  1078. } else {
  1079. return this._tooltipDefault(item, category, index, opts);
  1080. }
  1081. }
  1082. });
  1083. } else {
  1084. cfu.instance[cid].showToolTip(e, {
  1085. formatter: (item, category, index, opts) => {
  1086. if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
  1087. return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
  1088. } else {
  1089. return this._tooltipDefault(item, category, index, opts);
  1090. }
  1091. }
  1092. });
  1093. }
  1094. },
  1095. _tap(e,move) {
  1096. let cid = this.cid
  1097. let currentIndex = null;
  1098. let legendIndex = null;
  1099. if (this.inScrollView === true || this.inAli) {
  1100. let chartdom = uni
  1101. .createSelectorQuery()
  1102. // #ifndef MP-ALIPAY
  1103. .in(this)
  1104. .select('#ChartBoxId'+cid)
  1105. // #endif
  1106. // #ifdef MP-ALIPAY
  1107. .select('#'+this.cid)
  1108. // #endif
  1109. .boundingClientRect(data => {
  1110. e.changedTouches=[];
  1111. if (this.inAli) {
  1112. e.changedTouches.unshift({ x: e.detail.clientX - data.left, y: e.detail.clientY - data.top});
  1113. }else{
  1114. e.changedTouches.unshift({ x: e.detail.x - data.left, y: e.detail.y - data.top - this.pageScrollTop});
  1115. }
  1116. if(move){
  1117. if (this.tooltipShow === true) {
  1118. this._showTooltip(e);
  1119. }
  1120. }else{
  1121. currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
  1122. legendIndex = cfu.instance[cid].getLegendDataIndex(e);
  1123. if(this.tapLegend === true){
  1124. cfu.instance[cid].touchLegend(e);
  1125. }
  1126. if (this.tooltipShow === true) {
  1127. this._showTooltip(e);
  1128. }
  1129. this.emitMsg({name: 'getIndex', params: { type:"getIndex", event:{ x: e.detail.x - data.left, y: e.detail.y - data.top }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});
  1130. }
  1131. })
  1132. .exec();
  1133. } else {
  1134. if(move){
  1135. if (this.tooltipShow === true) {
  1136. this._showTooltip(e);
  1137. }
  1138. }else{
  1139. e.changedTouches=[];
  1140. e.changedTouches.unshift({ x: e.detail.x - e.currentTarget.offsetLeft, y: e.detail.y - e.currentTarget.offsetTop });
  1141. currentIndex = cfu.instance[cid].getCurrentDataIndex(e);
  1142. legendIndex = cfu.instance[cid].getLegendDataIndex(e);
  1143. if(this.tapLegend === true){
  1144. cfu.instance[cid].touchLegend(e);
  1145. }
  1146. if (this.tooltipShow === true) {
  1147. this._showTooltip(e);
  1148. }
  1149. this.emitMsg({name: 'getIndex', params: {type:"getIndex", event:{ x: e.detail.x, y: e.detail.y - e.currentTarget.offsetTop }, currentIndex: currentIndex, legendIndex: legendIndex, id: cid, opts: cfu.instance[cid].opts}});
  1150. }
  1151. }
  1152. },
  1153. _touchStart(e) {
  1154. let cid = this.cid
  1155. lastMoveTime=Date.now();
  1156. if(cfu.option[cid].enableScroll === true && e.touches.length == 1){
  1157. cfu.instance[cid].scrollStart(e);
  1158. }
  1159. this.emitMsg({name:'getTouchStart', params:{type:"touchStart", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});
  1160. },
  1161. _touchMove(e) {
  1162. let cid = this.cid
  1163. let currMoveTime = Date.now();
  1164. let duration = currMoveTime - lastMoveTime;
  1165. let touchMoveLimit = cfu.option[cid].touchMoveLimit || 24;
  1166. if (duration < Math.floor(1000 / touchMoveLimit)) return;//每秒60帧
  1167. lastMoveTime = currMoveTime;
  1168. if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
  1169. cfu.instance[cid].scroll(e);
  1170. }
  1171. if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
  1172. this._tap(e,true)
  1173. }
  1174. if(this.ontouch === true && cfu.option[cid].enableScroll === true && this.onzoom === true && e.changedTouches.length == 2){
  1175. cfu.instance[cid].dobuleZoom(e);
  1176. }
  1177. this.emitMsg({name: 'getTouchMove', params: {type:"touchMove", event:e.changedTouches[0], id: cid, opts: cfu.instance[cid].opts}});
  1178. },
  1179. _touchEnd(e) {
  1180. let cid = this.cid
  1181. if(cfu.option[cid].enableScroll === true && e.touches.length == 0){
  1182. cfu.instance[cid].scrollEnd(e);
  1183. }
  1184. this.emitMsg({name:'getTouchEnd', params:{type:"touchEnd", event:e.changedTouches[0], id:cid, opts: cfu.instance[cid].opts}});
  1185. if(this.ontap === true && cfu.option[cid].enableScroll === false && this.onmovetip === true){
  1186. this._tap(e,true)
  1187. }
  1188. },
  1189. // #endif
  1190. _error(e) {
  1191. this.mixinDatacomErrorMessage = e.detail.errMsg;
  1192. },
  1193. emitMsg(msg) {
  1194. this.$emit(msg.name, msg.params);
  1195. },
  1196. getRenderType() {
  1197. //防止如果开启echarts且父元素为v-if的情况renderjs监听不到prop变化的问题
  1198. if(this.echarts===true && this.mixinDatacomLoading===false){
  1199. this.beforeInit()
  1200. }
  1201. },
  1202. toJSON(){
  1203. return this
  1204. }
  1205. }
  1206. };
  1207. </script>
  1208. <!-- #ifdef APP-VUE || H5 -->
  1209. <script module="rdcharts" lang="renderjs">
  1210. import uChartsRD from '../../js_sdk/u-charts/u-charts.js';
  1211. import cfu from '../../js_sdk/u-charts/config-ucharts.js';
  1212. import cfe from '../../js_sdk/u-charts/config-echarts.js';
  1213. var that = {};
  1214. var rootdom = null;
  1215. function rddeepCloneAssign(origin = {}, ...args) {
  1216. for (let i in args) {
  1217. for (let key in args[i]) {
  1218. if (args[i].hasOwnProperty(key)) {
  1219. origin[key] = args[i][key] && typeof args[i][key] === 'object' ? rddeepCloneAssign(Array.isArray(args[i][key]) ? [] : {}, origin[key], args[i][key]) : args[i][key];
  1220. }
  1221. }
  1222. }
  1223. return origin;
  1224. }
  1225. function rdformatterAssign(args,formatter) {
  1226. for (let key in args) {
  1227. if(args.hasOwnProperty(key) && args[key] !== null && typeof args[key] === 'object'){
  1228. rdformatterAssign(args[key],formatter)
  1229. }else if(key === 'format' && typeof args[key] === 'string'){
  1230. args['formatter'] = formatter[args[key]] ? formatter[args[key]] : undefined;
  1231. }
  1232. }
  1233. return args;
  1234. }
  1235. export default {
  1236. data() {
  1237. return {
  1238. rid:null
  1239. }
  1240. },
  1241. mounted() {
  1242. rootdom = {top:0,left:0}
  1243. // #ifdef H5
  1244. let dm = document.querySelectorAll('uni-main')[0]
  1245. if(dm === undefined){
  1246. dm = document.querySelectorAll('uni-page-wrapper')[0]
  1247. }
  1248. rootdom = {top:dm.offsetTop,left:dm.offsetLeft}
  1249. // #endif
  1250. setTimeout(()=>{
  1251. if(this.rid === null){
  1252. this.$ownerInstance && this.$ownerInstance.callMethod('getRenderType')
  1253. }
  1254. },200)
  1255. },
  1256. destroyed(){
  1257. delete cfu.option[this.rid]
  1258. delete cfu.instance[this.rid]
  1259. delete cfe.option[this.rid]
  1260. delete cfe.instance[this.rid]
  1261. },
  1262. methods: {
  1263. //==============以下是ECharts的方法====================
  1264. ecinit(newVal, oldVal, owner, instance){
  1265. let cid = JSON.stringify(newVal.id)
  1266. this.rid = cid
  1267. that[cid] = this.$ownerInstance || instance
  1268. let eopts = JSON.parse(JSON.stringify(newVal))
  1269. let type = eopts.type;
  1270. //载入并覆盖默认配置
  1271. if (type && cfe.type.includes(type)) {
  1272. cfe.option[cid] = rddeepCloneAssign({}, cfe[type], eopts);
  1273. }else{
  1274. cfe.option[cid] = rddeepCloneAssign({}, eopts);
  1275. }
  1276. let newData = eopts.chartData;
  1277. if(newData){
  1278. //挂载categories和series
  1279. if(cfe.option[cid].xAxis && cfe.option[cid].xAxis.type && cfe.option[cid].xAxis.type === 'category'){
  1280. cfe.option[cid].xAxis.data = newData.categories
  1281. }
  1282. if(cfe.option[cid].yAxis && cfe.option[cid].yAxis.type && cfe.option[cid].yAxis.type === 'category'){
  1283. cfe.option[cid].yAxis.data = newData.categories
  1284. }
  1285. cfe.option[cid].series = []
  1286. for (var i = 0; i < newData.series.length; i++) {
  1287. cfe.option[cid].seriesTemplate = cfe.option[cid].seriesTemplate ? cfe.option[cid].seriesTemplate : {}
  1288. let Template = rddeepCloneAssign({},cfe.option[cid].seriesTemplate,newData.series[i])
  1289. cfe.option[cid].series.push(Template)
  1290. }
  1291. }
  1292. if (typeof window.echarts === 'object') {
  1293. this.newEChart()
  1294. }else{
  1295. const script = document.createElement('script')
  1296. // #ifdef APP-VUE
  1297. script.src = './uni_modules/qiun-data-charts/static/app-plus/echarts.min.js';
  1298. // #endif
  1299. // #ifdef H5
  1300. const { origin } = window.location;
  1301. let base_url = "";
  1302. // #ifdef VUE2
  1303. base_url = process.env.BASE_URL;
  1304. // #endif
  1305. // #ifdef VUE3
  1306. base_url = import.meta.env.BASE_URL;
  1307. // #endif
  1308. const rooturl = origin + base_url;
  1309. script.src = rooturl + 'uni_modules/qiun-data-charts/static/h5/echarts.min.js';
  1310. // #endif
  1311. script.onload = this.newEChart
  1312. document.head.appendChild(script)
  1313. }
  1314. },
  1315. ecresize(newVal, oldVal, owner, instance){
  1316. if(cfe.instance[this.rid]){
  1317. cfe.instance[this.rid].resize()
  1318. }
  1319. },
  1320. newEChart(){
  1321. let cid = this.rid
  1322. if(cfe.instance[cid] === undefined){
  1323. cfe.instance[cid] = echarts.init(that[cid].$el.children[0])
  1324. //ontap开启后才触发click事件
  1325. if(cfe.option[cid].ontap === true){
  1326. cfe.instance[cid].on('click', resdata => {
  1327. let event = JSON.parse(JSON.stringify({
  1328. x:resdata.event.offsetX,y:resdata.event.offsetY
  1329. }))
  1330. that[cid].callMethod('emitMsg',{name:"getIndex", params:{type:"getIndex", event:event, currentIndex:resdata.dataIndex, value:resdata.data, seriesName: resdata.seriesName,id:cid}})
  1331. })
  1332. // 增加ECharts的highlight消息,实现按下移动返回索引功能。add by onefish 创建于 2021-12-11 09:50
  1333. cfe.instance[cid].on('highlight', resdata => {
  1334. that[cid].callMethod('emitMsg',{name:"getHighlight", params:{type:"highlight", res:resdata, id:cid}})
  1335. })
  1336. }
  1337. this.updataEChart(cid,cfe.option[cid])
  1338. }else{
  1339. this.updataEChart(cid,cfe.option[cid])
  1340. }
  1341. },
  1342. updataEChart(cid,option){
  1343. //替换option内format属性为formatter的预定义方法
  1344. option = rdformatterAssign(option,cfe.formatter)
  1345. if(option.tooltip){
  1346. option.tooltip.show = option.tooltipShow?true:false;
  1347. option.tooltip.position = this.tooltipPosition()
  1348. //tooltipFormat方法,替换组件的tooltipFormat为config-echarts.js内对应的方法
  1349. if (typeof option.tooltipFormat === 'string' && cfe.formatter[option.tooltipFormat]) {
  1350. option.tooltip.formatter = option.tooltip.formatter ? option.tooltip.formatter : cfe.formatter[option.tooltipFormat]
  1351. }
  1352. }
  1353. // 颜色渐变添加的方法
  1354. if (option.series) {
  1355. for (let i in option.series) {
  1356. let linearGradient = option.series[i].linearGradient
  1357. if (linearGradient) {
  1358. option.series[i].color = new echarts.graphic.LinearGradient(linearGradient[0],linearGradient[1],linearGradient[2],linearGradient[3],linearGradient[4])
  1359. }
  1360. }
  1361. }
  1362. cfe.instance[cid].setOption(option, option.notMerge)
  1363. cfe.instance[cid].on('finished', function(){
  1364. that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid}})
  1365. if(cfe.instance[cid]){
  1366. cfe.instance[cid].off('finished')
  1367. }
  1368. });
  1369. //修复init初始化实例获取宽高不正确问题
  1370. if(
  1371. typeof that[cid].$el.children[0].clientWidth != 'undefined' &&
  1372. (
  1373. Math.abs( that[cid].$el.children[0].clientWidth - cfe.instance[cid].getWidth() )>3 ||
  1374. Math.abs( that[cid].$el.children[0].clientHeight - cfe.instance[cid].getHeight() )>3
  1375. )
  1376. ){this.ecresize();}
  1377. },
  1378. tooltipPosition(){
  1379. return (point, params, dom, rect, size) => {
  1380. let x = point[0]
  1381. let y = point[1]
  1382. let viewWidth = size.viewSize[0]
  1383. let viewHeight = size.viewSize[1]
  1384. let boxWidth = size.contentSize[0]
  1385. let boxHeight = size.contentSize[1]
  1386. let posX = x + 30
  1387. let posY = y + 30
  1388. if (posX + boxWidth > viewWidth) {
  1389. posX = x - boxWidth - 30
  1390. }
  1391. if (posY + boxHeight > viewHeight) {
  1392. posY = y - boxHeight - 30
  1393. }
  1394. return [posX, posY]
  1395. }
  1396. },
  1397. //==============以下是uCharts的方法====================
  1398. ucinit(newVal, oldVal, owner, instance){
  1399. if(JSON.stringify(newVal) == JSON.stringify(oldVal)){
  1400. return;
  1401. }
  1402. if(!newVal.canvasId){
  1403. return;
  1404. }
  1405. let cid = JSON.parse(JSON.stringify(newVal.canvasId))
  1406. this.rid = cid
  1407. that[cid] = this.$ownerInstance || instance
  1408. cfu.option[cid] = JSON.parse(JSON.stringify(newVal))
  1409. cfu.option[cid] = rdformatterAssign(cfu.option[cid],cfu.formatter)
  1410. let canvasdom = document.getElementById(cid)
  1411. if(canvasdom && canvasdom.children[0]){
  1412. cfu.option[cid].context = canvasdom.children[0].getContext("2d")
  1413. if(cfu.instance[cid] && cfu.option[cid] && cfu.option[cid].update === true){
  1414. this.updataUChart()
  1415. }else{
  1416. setTimeout(()=>{
  1417. cfu.option[cid].context.restore();
  1418. cfu.option[cid].context.save();
  1419. this.newUChart()
  1420. },100)
  1421. }
  1422. }
  1423. },
  1424. newUChart() {
  1425. let cid = this.rid
  1426. cfu.instance[cid] = new uChartsRD(cfu.option[cid])
  1427. cfu.instance[cid].addEventListener('renderComplete', () => {
  1428. that[cid].callMethod('emitMsg',{name:"complete",params:{type:"complete",complete:true,id:cid, opts: cfu.instance[cid].opts}})
  1429. cfu.instance[cid].delEventListener('renderComplete')
  1430. });
  1431. cfu.instance[cid].addEventListener('scrollLeft', () => {
  1432. that[cid].callMethod('emitMsg',{name:"scrollLeft",params:{type:"scrollLeft",scrollLeft:true,id:cid, opts: cfu.instance[cid].opts}})
  1433. });
  1434. cfu.instance[cid].addEventListener('scrollRight', () => {
  1435. that[cid].callMethod('emitMsg',{name:"scrollRight",params:{type:"scrollRight",scrollRight:true,id:cid, opts: cfu.instance[cid].opts}})
  1436. });
  1437. },
  1438. updataUChart() {
  1439. let cid = this.rid
  1440. cfu.instance[cid].updateData(cfu.option[cid])
  1441. },
  1442. tooltipDefault(item, category, index, opts) {
  1443. if (category) {
  1444. let data = item.data
  1445. if(typeof item.data === "object"){
  1446. data = item.data.value
  1447. }
  1448. return category + ' ' + item.name + ':' + data;
  1449. } else {
  1450. if (item.properties && item.properties.name) {
  1451. return item.properties.name ;
  1452. } else {
  1453. return item.name + ':' + item.data;
  1454. }
  1455. }
  1456. },
  1457. showTooltip(e,cid) {
  1458. let tc = cfu.option[cid].tooltipCustom
  1459. if (tc && tc !== undefined && tc !== null) {
  1460. let offset = undefined;
  1461. if (tc.x >= 0 && tc.y >= 0) {
  1462. offset = { x: tc.x, y: tc.y + 10 };
  1463. }
  1464. cfu.instance[cid].showToolTip(e, {
  1465. index: tc.index,
  1466. offset: offset,
  1467. textList: tc.textList,
  1468. formatter: (item, category, index, opts) => {
  1469. if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
  1470. return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
  1471. } else {
  1472. return this.tooltipDefault(item, category, index, opts);
  1473. }
  1474. }
  1475. });
  1476. } else {
  1477. cfu.instance[cid].showToolTip(e, {
  1478. formatter: (item, category, index, opts) => {
  1479. if (typeof cfu.option[cid].tooltipFormat === 'string' && cfu.formatter[cfu.option[cid].tooltipFormat]) {
  1480. return cfu.formatter[cfu.option[cid].tooltipFormat](item, category, index, opts);
  1481. } else {
  1482. return this.tooltipDefault(item, category, index, opts);
  1483. }
  1484. }
  1485. });
  1486. }
  1487. },
  1488. tap(e) {
  1489. let cid = this.rid
  1490. let ontap = cfu.option[cid].ontap
  1491. let tooltipShow = cfu.option[cid].tooltipShow
  1492. let tapLegend = cfu.option[cid].tapLegend
  1493. if(ontap == false) return;
  1494. let currentIndex=null
  1495. let legendIndex=null
  1496. let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
  1497. let tmpe = {}
  1498. if(e.detail.x){//tap或者click的事件
  1499. tmpe = { x: e.detail.x - rchartdom.left, y:e.detail.y - rchartdom.top + rootdom.top}
  1500. }else{//mouse的事件
  1501. tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
  1502. }
  1503. e.changedTouches = [];
  1504. e.changedTouches.unshift(tmpe)
  1505. currentIndex=cfu.instance[cid].getCurrentDataIndex(e)
  1506. legendIndex=cfu.instance[cid].getLegendDataIndex(e)
  1507. if(tapLegend === true){
  1508. cfu.instance[cid].touchLegend(e);
  1509. }
  1510. if(tooltipShow==true){
  1511. this.showTooltip(e,cid)
  1512. }
  1513. that[cid].callMethod('emitMsg',{name:"getIndex",params:{type:"getIndex",event:tmpe,currentIndex:currentIndex,legendIndex:legendIndex,id:cid, opts: cfu.instance[cid].opts}})
  1514. },
  1515. touchStart(e) {
  1516. let cid = this.rid
  1517. let ontouch = cfu.option[cid].ontouch
  1518. if(ontouch == false) return;
  1519. if(cfu.option[cid].enableScroll === true && e.touches.length == 1){
  1520. cfu.instance[cid].scrollStart(e);
  1521. }
  1522. that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"touchStart",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
  1523. },
  1524. touchMove(e) {
  1525. let cid = this.rid
  1526. let ontouch = cfu.option[cid].ontouch
  1527. if(ontouch == false) return;
  1528. if(cfu.option[cid].enableScroll === true && e.changedTouches.length == 1){
  1529. cfu.instance[cid].scroll(e);
  1530. }
  1531. if(cfu.option[cid].ontap === true && cfu.option[cid].enableScroll === false && cfu.option[cid].onmovetip === true){
  1532. let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
  1533. let tmpe = { x: e.changedTouches[0].clientX - rchartdom.left, y:e.changedTouches[0].clientY - rchartdom.top + rootdom.top}
  1534. e.changedTouches.unshift(tmpe)
  1535. if(cfu.option[cid].tooltipShow === true){
  1536. this.showTooltip(e,cid)
  1537. }
  1538. }
  1539. if(ontouch === true && cfu.option[cid].enableScroll === true && cfu.option[cid].onzoom === true && e.changedTouches.length == 2){
  1540. cfu.instance[cid].dobuleZoom(e);
  1541. }
  1542. that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"touchMove",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
  1543. },
  1544. touchEnd(e) {
  1545. let cid = this.rid
  1546. let ontouch = cfu.option[cid].ontouch
  1547. if(ontouch == false) return;
  1548. if(cfu.option[cid].enableScroll === true && e.touches.length == 0){
  1549. cfu.instance[cid].scrollEnd(e);
  1550. }
  1551. that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"touchEnd",event:e.changedTouches[0],id:cid, opts: cfu.instance[cid].opts}})
  1552. },
  1553. mouseDown(e) {
  1554. let cid = this.rid
  1555. let onmouse = cfu.option[cid].onmouse
  1556. if(onmouse == false) return;
  1557. let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
  1558. let tmpe = {}
  1559. tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
  1560. e.changedTouches = [];
  1561. e.changedTouches.unshift(tmpe)
  1562. cfu.instance[cid].scrollStart(e)
  1563. cfu.option[cid].mousedown=true;
  1564. that[cid].callMethod('emitMsg',{name:"getTouchStart",params:{type:"mouseDown",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
  1565. },
  1566. mouseMove(e) {
  1567. let cid = this.rid
  1568. let onmouse = cfu.option[cid].onmouse
  1569. let tooltipShow = cfu.option[cid].tooltipShow
  1570. if(onmouse == false) return;
  1571. let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
  1572. let tmpe = {}
  1573. tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
  1574. e.changedTouches = [];
  1575. e.changedTouches.unshift(tmpe)
  1576. if(cfu.option[cid].mousedown){
  1577. cfu.instance[cid].scroll(e)
  1578. that[cid].callMethod('emitMsg',{name:"getTouchMove",params:{type:"mouseMove",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
  1579. }else if(cfu.instance[cid]){
  1580. if(tooltipShow==true){
  1581. this.showTooltip(e,cid)
  1582. }
  1583. }
  1584. },
  1585. mouseUp(e) {
  1586. let cid = this.rid
  1587. let onmouse = cfu.option[cid].onmouse
  1588. if(onmouse == false) return;
  1589. let rchartdom = document.getElementById('UC'+cid).getBoundingClientRect()
  1590. let tmpe = {}
  1591. tmpe = { x: e.clientX - rchartdom.left, y:e.clientY - rchartdom.top + rootdom.top}
  1592. e.changedTouches = [];
  1593. e.changedTouches.unshift(tmpe)
  1594. cfu.instance[cid].scrollEnd(e)
  1595. cfu.option[cid].mousedown=false;
  1596. that[cid].callMethod('emitMsg',{name:"getTouchEnd",params:{type:"mouseUp",event:tmpe,id:cid, opts: cfu.instance[cid].opts}})
  1597. },
  1598. }
  1599. }
  1600. </script>
  1601. <!-- #endif -->
  1602. <style scoped>
  1603. .chartsview {
  1604. width: 100%;
  1605. height: 100%;
  1606. display: flex;
  1607. flex: 1;
  1608. justify-content: center;
  1609. align-items: center;
  1610. }
  1611. </style>