forked from dcloudio/uni-app
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
增加echart示例、图片剪切示例、可滑动九宫格示例、修改部分文字描述、优化列表到详情示例的打开速度
- Loading branch information
Showing
20 changed files
with
1,407 additions
and
53 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
examples/hello-uniapp/components/echarts/echarts.simple.min.js
Large diffs are not rendered by default.
Oops, something went wrong.
152 changes: 152 additions & 0 deletions
152
examples/hello-uniapp/components/mpvue-echarts/src/echarts.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,152 @@ | ||
<template> | ||
<canvas | ||
v-if="canvasId" | ||
class="ec-canvas" | ||
:id="canvasId" | ||
:canvasId="canvasId" | ||
@touchstart="touchStart" | ||
@touchmove="touchMove" | ||
@touchend="touchEnd" | ||
@error="error"> | ||
</canvas> | ||
</template> | ||
|
||
<script> | ||
import WxCanvas from './wx-canvas'; | ||
export default { | ||
props: { | ||
echarts: { | ||
required: true, | ||
type: Object, | ||
default() { | ||
return null; | ||
}, | ||
}, | ||
onInit: { | ||
required: true, | ||
type: Function, | ||
default: null, | ||
}, | ||
canvasId: { | ||
type: String, | ||
default: 'ec-canvas', | ||
}, | ||
lazyLoad: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
disableTouch: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
throttleTouch: { | ||
type: Boolean, | ||
default: false, | ||
}, | ||
}, | ||
onReady() { | ||
if (!this.echarts) { | ||
console.warn('组件需绑定 echarts 变量,例:<ec-canvas id="mychart-dom-bar" ' | ||
+ 'canvas-id="mychart-bar" :echarts="echarts"></ec-canvas>'); | ||
return; | ||
} | ||
if (!this.lazyLoad) this.init(); | ||
}, | ||
methods: { | ||
init() { | ||
const version = wx.version.version.split('.').map(n => parseInt(n, 10)); | ||
const isValid = version[0] > 1 || (version[0] === 1 && version[1] > 9) | ||
|| (version[0] === 1 && version[1] === 9 && version[2] >= 91); | ||
if (!isValid) { | ||
console.error('微信基础库版本过低,需大于等于 1.9.91。' | ||
+ '参见:https://github.com/ecomfe/echarts-for-weixin' | ||
+ '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82'); | ||
return; | ||
} | ||
if (!this.onInit) { | ||
console.warn('请传入 onInit 函数进行初始化'); | ||
return; | ||
} | ||
const { canvasId } = this; | ||
this.ctx = wx.createCanvasContext(canvasId); | ||
const canvas = new WxCanvas(this.ctx, canvasId); | ||
this.echarts.setCanvasCreator(() => canvas); | ||
const query = wx.createSelectorQuery(); | ||
query.select(`#${canvasId}`).boundingClientRect((res) => { | ||
if (!res) { | ||
setTimeout(() => this.init(), 50); | ||
return; | ||
} | ||
this.chart = this.onInit(canvas, res.width, res.height); | ||
}).exec(); | ||
}, | ||
canvasToTempFilePath(opt) { | ||
const { canvasId } = this; | ||
this.ctx.draw(true, () => { | ||
wx.canvasToTempFilePath({ | ||
canvasId, | ||
...opt, | ||
}); | ||
}); | ||
}, | ||
touchStart(e) { | ||
const { disableTouch, chart } = this; | ||
if (disableTouch || !chart || !e.mp.touches.length) return; | ||
const touch = e.mp.touches[0]; | ||
chart._zr.handler.dispatch('mousedown', { | ||
zrX: touch.x, | ||
zrY: touch.y, | ||
}); | ||
chart._zr.handler.dispatch('mousemove', { | ||
zrX: touch.x, | ||
zrY: touch.y, | ||
}); | ||
}, | ||
touchMove(e) { | ||
const { | ||
disableTouch, throttleTouch, chart, lastMoveTime, | ||
} = this; | ||
if (disableTouch || !chart || !e.mp.touches.length) return; | ||
if (throttleTouch) { | ||
const currMoveTime = Date.now(); | ||
if (currMoveTime - lastMoveTime < 240) return; | ||
this.lastMoveTime = currMoveTime; | ||
} | ||
const touch = e.mp.touches[0]; | ||
chart._zr.handler.dispatch('mousemove', { | ||
zrX: touch.x, | ||
zrY: touch.y, | ||
}); | ||
}, | ||
touchEnd(e) { | ||
const { disableTouch, chart } = this; | ||
if (disableTouch || !chart) return; | ||
const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {}; | ||
chart._zr.handler.dispatch('mouseup', { | ||
zrX: touch.x, | ||
zrY: touch.y, | ||
}); | ||
chart._zr.handler.dispatch('click', { | ||
zrX: touch.x, | ||
zrY: touch.y, | ||
}); | ||
}, | ||
}, | ||
}; | ||
</script> | ||
|
||
<style scoped> | ||
.ec-canvas { | ||
width: 100%; | ||
height: 100%; | ||
} | ||
</style> |
73 changes: 73 additions & 0 deletions
73
examples/hello-uniapp/components/mpvue-echarts/src/wx-canvas.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
export default class WxCanvas { | ||
constructor(ctx, canvasId) { | ||
this.ctx = ctx; | ||
this.canvasId = canvasId; | ||
this.chart = null; | ||
|
||
WxCanvas.initStyle(ctx); | ||
this.initEvent(); | ||
} | ||
|
||
getContext(contextType) { | ||
return contextType === '2d' ? this.ctx : null; | ||
} | ||
|
||
setChart(chart) { | ||
this.chart = chart; | ||
} | ||
|
||
attachEvent() { | ||
// noop | ||
} | ||
|
||
detachEvent() { | ||
// noop | ||
} | ||
|
||
static initStyle(ctx) { | ||
const 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 = () => ctx.createCircularGradient(arguments); | ||
} | ||
|
||
initEvent() { | ||
this.event = {}; | ||
const eventNames = [{ | ||
wxName: 'touchStart', | ||
ecName: 'mousedown', | ||
}, { | ||
wxName: 'touchMove', | ||
ecName: 'mousemove', | ||
}, { | ||
wxName: 'touchEnd', | ||
ecName: 'mouseup', | ||
}, { | ||
wxName: 'touchEnd', | ||
ecName: 'click', | ||
}]; | ||
|
||
eventNames.forEach((name) => { | ||
this.event[name.wxName] = (e) => { | ||
const touch = e.mp.touches[0]; | ||
this.chart._zr.handler.dispatch(name.ecName, { | ||
zrX: name.wxName === 'tap' ? touch.clientX : touch.x, | ||
zrY: name.wxName === 'tap' ? touch.clientY : touch.y, | ||
}); | ||
}; | ||
}); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<template name="page-foot"> | ||
<view class="page-share-title"> | ||
<text>感谢{{name}}提供本示例,</text> | ||
<text class="submit" @tap="submit">我也提交</text> | ||
</view> | ||
</template> | ||
|
||
<script> | ||
export default { | ||
name: "page-foot", | ||
props: { | ||
name: { | ||
type: String, | ||
default: "" | ||
} | ||
}, | ||
methods: { | ||
submit() { | ||
uni.showModal({ | ||
content:"hello uni-app开源地址为https://github.com/dcloudio/uni-app/tree/master/examples,请在这个开源项目上贡献你的代码", | ||
showCancel:false | ||
}) | ||
} | ||
} | ||
} | ||
</script> | ||
<style> | ||
.page-share-title { | ||
text-align: center; | ||
font-size: 30px; | ||
color: #BEBEBE; | ||
margin: 20px 0; | ||
} | ||
.submit { | ||
border-bottom: 1px solid #BEBEBE; | ||
} | ||
</style> |
Oops, something went wrong.