feat: add custom charts

components/CustomChart/CustomChart.vue

+<template>
+	<uni-ec-canvas class="uni-ec-canvas" id="custom-chart" ref="customChartCanvas" canvas-id="custom-chart"
+		:ec="ec"></uni-ec-canvas>
+</template>
+
+<script>
+	import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
+	import echartElementData from '@/mixins/echartElementData.js'
+	import {
+		DATAZOOM_DEFAULT
+	} from '@/mixins/zoomConfig.js'
+	import {
+		svg
+	} from '@/mixins/svg.js'
+	import {
+		geoCoordMapList
+	} from '@/uni-ec-canvas/geoCoordMap.js'
+	let chart = null
+	let lastCount = 0 // 记录datazoom最后一次滑动的数值数量
+
+	export default {
+		mixins: [echartElementData],
+		data() {
+			return {
+				ec: {
+					lazyLoad: true,
+					option: {}
+				},
+				timers: [],
+				currentIndex: -1
+			}
+		},
+		components: {
+			uniEcCanvas
+		},
+		created() {},
+		mounted() {
+			this.$refs['customChartCanvas'].init(this.inited)
+		},
+		methods: {
+			inited(canvas, width, height, canvasDpr) {
+				chart = this.$echarts.init(canvas, null, {
+					width: width,
+					height: height,
+					devicePixelRatio: canvasDpr
+				})
+				canvas.setChart(chart)
+				const {
+					dataList
+				} = this.elementData
+				const seniorConfig = this.elementInfo.option.seniorConfig
+				this.ec.option = this.$u.common.converFunction(seniorConfig, dataList, geoCoordMapList)
+				console.log(this.ec.option)
+				chart.setOption(this.ec.option)
+				const that = this
+				chart.on('click', event => {
+					that.handleEchartsClick(event)
+				})
+
+				// 处理自动动态排序
+				const sort = that.elementInfo.option.sort
+				if (sort.enable && that.ec.option) {
+					if (sort.autoSort) {
+						that.autoSort()
+					} else {
+						const toolbox = that.ec.option.toolbox ? that.ec.option.toolbox : {}
+						that.ec.option.toolbox = {
+							...toolbox,
+							itemSize: 20,
+							show: true,
+							feature: {
+								mySort: {
+									show: true,
+									title: '开始',
+									icon: svg.playIcon,
+									onclick: () => {
+										that.autoSort()
+									}
+								}
+							}
+						}
+						chart.setOption(that.ec.option)
+					}
+				}
+				return chart
+			},
+
+			autoSort() {
+				const toolbox = this.ec.option.toolbox
+				if (toolbox && toolbox.feature && toolbox.feature.mySort) {
+					if (toolbox.feature.mySort.icon === svg.playIcon) {
+						toolbox.feature.mySort.title = '暂停'
+						toolbox.feature.mySort.icon = svg.pauseIcon
+					} else {
+						toolbox.feature.mySort.title = '开始'
+						toolbox.feature.mySort.icon = svg.playIcon
+						this.timers.forEach(timer => {
+							clearTimeout(timer)
+						})
+						this.timers = []
+						return
+					}
+				}
+				const sort = this.elementInfo.option.sort
+				const timeInterval = sort.timeInterval || 2000
+				var dataList = this.elementData.dataList
+				if (sort.sortConfig) {
+					dataList = this.$u.common.converFunction(sort.sortConfig, this.elementData.dataList, {})
+				}
+				const startIndex = this.currentIndex
+				dataList.forEach((value, index) => {
+					if (index > startIndex) {
+						const timer = setTimeout(() => {
+							this.ec.option.series[0].data = value.data;
+							if (value.categories) {
+								this.ec.option.yAxis.data = value.categories
+							}
+							if (value.title && this.ec.option.graphic) {
+								this.ec.option.graphic.elements[0].style.text = value.title
+							}
+							this.currentIndex = index
+							if (index === dataList.length - 1) {
+								this.currentIndex = 0
+								toolbox.feature.mySort.title = '开始'
+								toolbox.feature.mySort.icon = svgIcon.playIcon
+								this.timers.forEach(timer => {
+									clearTimeout(timer)
+								})
+								this.timers = []
+							}
+							chart.setOption(this.ec.option)
+						}, timeInterval * (index - (startIndex === -1 ? 0 : startIndex + 1)))
+						this.timers.push(timer)
+					}
+				})
+			},
+
+			initChart() {
+				// 等待子组件完全挂载完成---chart初始化完成
+				this.$nextTick().then(() => {
+
+					// 重新setOption，使得设置的formatter生效
+					// chart.setOption({
+					// 	series: dealSeries
+					// })
+
+				})
+			},
+		}
+
+	}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

mixins/echartElementData.js

@@ -32,11 +32,13 @@ export default {
 		 */
 		async handleDynamicData (value) {
 			const that = this
-			let { dataUrl, dataMethod, dataFormatter, dataProcessing, dataConfig } = { ...value }
+			let { dataUrl, dataMethod, dataFormatter, dataProcessing, dataConfig, queryProcessing } = { ...value }
 			if (!dataUrl.length) {
 	      return
 			}
-
+ 			if (queryProcessing) {
+			    dataFormatter = that.$u.common.converFunction(queryProcessing, dataFormatter, value.queryFormatter)
+			}
 			if(value.queryFormatter) dataFormatter = {...dataFormatter, ...value.queryFormatter}
 			dataUrl = dataUrl.replace(/^(\/(dashboardCharts|dashboardAPI))?/, '')
 			dataFormatter = that.$u.common.filterRequestParams({...dataFormatter})

mixins/svg.js

 export const svg = {
 	enterFull: "M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z",
-	exitFull: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
+	exitFull: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z",
+	playIcon: 'M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM641.355986 496.239856 458.681591 367.804917c-8.391765-5.8333-19.649011 0.102339-19.649011 10.336198l0 256.869878c0 10.23386 11.257246 16.169498 19.649011 10.336198l182.776734-128.434939C648.622027 511.897661 648.519688 501.254447 641.355986 496.239856z',
+	pauseIcon: 'M909.892465 331.781731c-21.798121-51.476314-52.909055-97.631021-92.514092-137.236058-39.605037-39.605037-85.862083-70.818309-137.236058-92.514092-53.21607-22.514491-109.809314-33.976414-168.142315-33.976414S397.176094 79.414751 343.857685 102.031581c-51.476314 21.798121-97.631021 52.909055-137.236058 92.514092s-70.818309 85.862083-92.514092 137.236058c-22.514491 53.21607-33.976414 109.809314-33.976414 168.142315s11.461923 114.823906 33.976414 168.142315c21.798121 51.476314 52.909055 97.631021 92.514092 137.236058 39.605037 39.605037 85.862083 70.818309 137.236058 92.514092 53.21607 22.514491 109.809314 33.976414 168.142315 33.976414s114.823906-11.461923 168.142315-33.976414c51.476314-21.798121 97.631021-52.909055 137.236058-92.514092 39.605037-39.605037 70.818309-85.862083 92.514092-137.236058 22.514491-53.21607 33.976414-109.809314 33.976414-168.142315S932.509294 385.10014 909.892465 331.781731zM512 886.763942c-213.273636 0-386.839896-173.56626-386.839896-386.839896s173.56626-386.839896 386.839896-386.839896 386.839896 173.56626 386.839896 386.839896S725.273636 886.763942 512 886.763942zM440.055966 369.442335c-12.485309 0-22.514491 10.029182-22.514491 22.514491l0 248.68279c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491L462.570458 391.956826C462.570458 379.471517 452.541275 369.442335 440.055966 369.442335zM570.025984 369.442335c-12.485309 0-22.514491 10.029182-22.514491 22.514491l0 248.68279c0 12.485309 10.029182 22.514491 22.514491 22.514491s22.514491-10.029182 22.514491-22.514491L592.540476 391.956826C592.540476 379.471517 582.511293 369.442335 570.025984 369.442335z'
 }
\ No newline at end of file

pages/details/details.vue

@@ -68,6 +68,8 @@
 				<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
 				<!-- <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table> -->
 				<Folder v-if="element.type == 'folder'" :elementInfo="element"></Folder>
+				<!-- 自定义图表 -->
+				<CustomChart v-if="element.type == 'CustomChart'" :elementInfo="element"></CustomChart>			
 			</view>
 		</template>
 		<ModelData

pages/index/index.vue

@@ -58,6 +58,8 @@
 				<NormalTable v-if="element.type == 'NormalTable'" :elementInfo="element"></NormalTable>
 				<!-- <Table v-if="element.type == 'NormalTable'" :elementInfo="element"></Table> -->
 				<Folder v-if="element.type == 'folder'" :elementInfo="element"></Folder>
+				<!-- 自定义图表 -->
+				<CustomChart v-if="element.type == 'CustomChart'" :elementInfo="element"></CustomChart>
 			</view>
 		</template>
 

project.config.json

@@ -34,7 +34,7 @@
     "minifyWXML": true
   },
   "compileType": "miniprogram",
-  "libVersion": "2.21.0",
+  "libVersion": "trial",
   "appid": "wx06342b31eebe8da7",
   "projectname": "ec-report-refactor",
   "debugOptions": {

uni-ec-canvas/wx-canvas.js

@@ -6,7 +6,8 @@ export default class WxCanvas {
     this.isNew = isNew
     if (isNew) {
       this.canvasNode = canvasNode;
-    } else {
+    }
+    else {
       this._initStyle(ctx);
     }
 
@@ -32,6 +33,10 @@ export default class WxCanvas {
     this.chart = chart;
   }
 
+  addEventListener() {
+    // noop
+  }
+
   attachEvent() {
     // noop
   }
@@ -52,23 +57,6 @@ export default class WxCanvas {
   }
 
   _initStyle(ctx) {
-    var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
-      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
-      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'
-    ];
-
-    styles.forEach(style => {
-      Object.defineProperty(ctx, style, {
-        set: value => {
-          if (style !== 'fillStyle' && style !== 'strokeStyle' ||
-            value !== 'none' && value !== null
-          ) {
-            ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
-          }
-        }
-      });
-    });
-
     ctx.createRadialGradient = () => {
       return ctx.createCircularGradient(arguments);
     };
@@ -89,13 +77,15 @@ export default class WxCanvas {
       wxName: 'touchEnd',
       ecName: 'click'
     }];
-
     eventNames.forEach(name => {
       this.event[name.wxName] = e => {
         const touch = e.touches[0];
         this.chart.getZr().handler.dispatch(name.ecName, {
           zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
-          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
         });
       };
     });