14 changed files with 544 additions and 2 deletions
@ -0,0 +1,284 @@ |
|||
import WxCanvas from './wx-canvas'; |
|||
import * as echarts from './echarts'; |
|||
|
|||
let ctx; |
|||
|
|||
function compareVersion(v1, v2) { |
|||
v1 = v1.split('.') |
|||
v2 = v2.split('.') |
|||
const len = Math.max(v1.length, v2.length) |
|||
|
|||
while (v1.length < len) { |
|||
v1.push('0') |
|||
} |
|||
while (v2.length < len) { |
|||
v2.push('0') |
|||
} |
|||
|
|||
for (let i = 0; i < len; i++) { |
|||
const num1 = parseInt(v1[i]) |
|||
const num2 = parseInt(v2[i]) |
|||
|
|||
if (num1 > num2) { |
|||
return 1 |
|||
} else if (num1 < num2) { |
|||
return -1 |
|||
} |
|||
} |
|||
return 0 |
|||
} |
|||
|
|||
Component({ |
|||
properties: { |
|||
canvasId: { |
|||
type: String, |
|||
value: 'ec-canvas' |
|||
}, |
|||
|
|||
ec: { |
|||
type: Object |
|||
}, |
|||
|
|||
forceUseOldCanvas: { |
|||
type: Boolean, |
|||
value: false |
|||
} |
|||
}, |
|||
|
|||
data: { |
|||
isUseNewCanvas: false |
|||
}, |
|||
|
|||
ready: function () { |
|||
// Disable prograssive because drawImage doesn't support DOM as parameter
|
|||
// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
|
|||
echarts.registerPreprocessor(option => { |
|||
if (option && option.series) { |
|||
if (option.series.length > 0) { |
|||
option.series.forEach(series => { |
|||
series.progressive = 0; |
|||
}); |
|||
} |
|||
else if (typeof option.series === 'object') { |
|||
option.series.progressive = 0; |
|||
} |
|||
} |
|||
}); |
|||
|
|||
if (!this.data.ec) { |
|||
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' |
|||
+ 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'); |
|||
return; |
|||
} |
|||
|
|||
if (!this.data.ec.lazyLoad) { |
|||
this.init(); |
|||
} |
|||
}, |
|||
|
|||
methods: { |
|||
init: function (callback) { |
|||
const version = wx.getSystemInfoSync().SDKVersion |
|||
|
|||
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0; |
|||
const forceUseOldCanvas = this.data.forceUseOldCanvas; |
|||
const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas; |
|||
this.setData({ isUseNewCanvas }); |
|||
|
|||
if (forceUseOldCanvas && canUseNewCanvas) { |
|||
console.warn('开发者强制使用旧canvas,建议关闭'); |
|||
} |
|||
|
|||
if (isUseNewCanvas) { |
|||
// console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
|
|||
// 2.9.0 可以使用 <canvas type="2d"></canvas>
|
|||
this.initByNewWay(callback); |
|||
} else { |
|||
const isValid = compareVersion(version, '1.9.91') >= 0 |
|||
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; |
|||
} else { |
|||
console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'); |
|||
this.initByOldWay(callback); |
|||
} |
|||
} |
|||
}, |
|||
|
|||
initByOldWay(callback) { |
|||
// 1.9.91 <= version < 2.9.0：原来的方式初始化
|
|||
ctx = wx.createCanvasContext(this.data.canvasId, this); |
|||
const canvas = new WxCanvas(ctx, this.data.canvasId, false); |
|||
|
|||
if (echarts.setPlatformAPI) { |
|||
echarts.setPlatformAPI({ |
|||
createCanvas: () => canvas, |
|||
}); |
|||
} else { |
|||
echarts.setCanvasCreator(() => canvas); |
|||
}; |
|||
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
|
|||
const canvasDpr = 1 |
|||
var query = wx.createSelectorQuery().in(this); |
|||
query.select('.ec-canvas').boundingClientRect(res => { |
|||
if (typeof callback === 'function') { |
|||
this.chart = callback(canvas, res.width, res.height, canvasDpr); |
|||
} |
|||
else if (this.data.ec && typeof this.data.ec.onInit === 'function') { |
|||
this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr); |
|||
} |
|||
else { |
|||
this.triggerEvent('init', { |
|||
canvas: canvas, |
|||
width: res.width, |
|||
height: res.height, |
|||
canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
|
|||
}); |
|||
} |
|||
}).exec(); |
|||
}, |
|||
|
|||
initByNewWay(callback) { |
|||
// version >= 2.9.0：使用新的方式初始化
|
|||
const query = wx.createSelectorQuery().in(this) |
|||
query |
|||
.select('.ec-canvas') |
|||
.fields({ node: true, size: true }) |
|||
.exec(res => { |
|||
const canvasNode = res[0].node |
|||
this.canvasNode = canvasNode |
|||
|
|||
const canvasDpr = wx.getSystemInfoSync().pixelRatio |
|||
const canvasWidth = res[0].width |
|||
const canvasHeight = res[0].height |
|||
|
|||
const ctx = canvasNode.getContext('2d') |
|||
|
|||
const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode) |
|||
if (echarts.setPlatformAPI) { |
|||
echarts.setPlatformAPI({ |
|||
createCanvas: () => canvas, |
|||
loadImage: (src, onload, onerror) => { |
|||
if (canvasNode.createImage) { |
|||
const image = canvasNode.createImage(); |
|||
image.onload = onload; |
|||
image.onerror = onerror; |
|||
image.src = src; |
|||
return image; |
|||
} |
|||
console.error('加载图片依赖 `Canvas.createImage()` API，要求小程序基础库版本在 2.7.0 及以上。'); |
|||
// PENDING fallback?
|
|||
} |
|||
}) |
|||
} else { |
|||
echarts.setCanvasCreator(() => canvas) |
|||
} |
|||
|
|||
if (typeof callback === 'function') { |
|||
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr) |
|||
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') { |
|||
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr) |
|||
} else { |
|||
this.triggerEvent('init', { |
|||
canvas: canvas, |
|||
width: canvasWidth, |
|||
height: canvasHeight, |
|||
dpr: canvasDpr |
|||
}) |
|||
} |
|||
}) |
|||
}, |
|||
canvasToTempFilePath(opt) { |
|||
if (this.data.isUseNewCanvas) { |
|||
// 新版
|
|||
const query = wx.createSelectorQuery().in(this) |
|||
query |
|||
.select('.ec-canvas') |
|||
.fields({ node: true, size: true }) |
|||
.exec(res => { |
|||
const canvasNode = res[0].node |
|||
opt.canvas = canvasNode |
|||
wx.canvasToTempFilePath(opt) |
|||
}) |
|||
} else { |
|||
// 旧的
|
|||
if (!opt.canvasId) { |
|||
opt.canvasId = this.data.canvasId; |
|||
} |
|||
ctx.draw(true, () => { |
|||
wx.canvasToTempFilePath(opt, this); |
|||
}); |
|||
} |
|||
}, |
|||
|
|||
touchStart(e) { |
|||
if (this.chart && e.touches.length > 0) { |
|||
var touch = e.touches[0]; |
|||
var handler = this.chart.getZr().handler; |
|||
handler.dispatch('mousedown', { |
|||
zrX: touch.x, |
|||
zrY: touch.y, |
|||
preventDefault: () => {}, |
|||
stopImmediatePropagation: () => {}, |
|||
stopPropagation: () => {} |
|||
}); |
|||
handler.dispatch('mousemove', { |
|||
zrX: touch.x, |
|||
zrY: touch.y, |
|||
preventDefault: () => {}, |
|||
stopImmediatePropagation: () => {}, |
|||
stopPropagation: () => {} |
|||
}); |
|||
handler.processGesture(wrapTouch(e), 'start'); |
|||
} |
|||
}, |
|||
|
|||
touchMove(e) { |
|||
if (this.chart && e.touches.length > 0) { |
|||
var touch = e.touches[0]; |
|||
var handler = this.chart.getZr().handler; |
|||
handler.dispatch('mousemove', { |
|||
zrX: touch.x, |
|||
zrY: touch.y, |
|||
preventDefault: () => {}, |
|||
stopImmediatePropagation: () => {}, |
|||
stopPropagation: () => {} |
|||
}); |
|||
handler.processGesture(wrapTouch(e), 'change'); |
|||
} |
|||
}, |
|||
|
|||
touchEnd(e) { |
|||
if (this.chart) { |
|||
const touch = e.changedTouches ? e.changedTouches[0] : {}; |
|||
var handler = this.chart.getZr().handler; |
|||
handler.dispatch('mouseup', { |
|||
zrX: touch.x, |
|||
zrY: touch.y, |
|||
preventDefault: () => {}, |
|||
stopImmediatePropagation: () => {}, |
|||
stopPropagation: () => {} |
|||
}); |
|||
handler.dispatch('click', { |
|||
zrX: touch.x, |
|||
zrY: touch.y, |
|||
preventDefault: () => {}, |
|||
stopImmediatePropagation: () => {}, |
|||
stopPropagation: () => {} |
|||
}); |
|||
handler.processGesture(wrapTouch(e), 'end'); |
|||
} |
|||
} |
|||
} |
|||
}); |
|||
|
|||
function wrapTouch(event) { |
|||
for (let i = 0; i < event.touches.length; ++i) { |
|||
const touch = event.touches[i]; |
|||
touch.offsetX = touch.x; |
|||
touch.offsetY = touch.y; |
|||
} |
|||
return event; |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
{ |
|||
"component": true, |
|||
"usingComponents": {} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
<!-- 新的：接口对其了H5 --> |
|||
<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> |
|||
<!-- 旧的 --> |
|||
<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas> |
|||
@ -0,0 +1,4 @@ |
|||
.ec-canvas { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,111 @@ |
|||
export default class WxCanvas { |
|||
constructor(ctx, canvasId, isNew, canvasNode) { |
|||
this.ctx = ctx; |
|||
this.canvasId = canvasId; |
|||
this.chart = null; |
|||
this.isNew = isNew |
|||
if (isNew) { |
|||
this.canvasNode = canvasNode; |
|||
} |
|||
else { |
|||
this._initStyle(ctx); |
|||
} |
|||
|
|||
// this._initCanvas(zrender, ctx);
|
|||
|
|||
this._initEvent(); |
|||
} |
|||
|
|||
getContext(contextType) { |
|||
if (contextType === '2d') { |
|||
return this.ctx; |
|||
} |
|||
} |
|||
|
|||
// canvasToTempFilePath(opt) {
|
|||
// if (!opt.canvasId) {
|
|||
// opt.canvasId = this.canvasId;
|
|||
// }
|
|||
// return wx.canvasToTempFilePath(opt, this);
|
|||
// }
|
|||
|
|||
setChart(chart) { |
|||
this.chart = chart; |
|||
} |
|||
|
|||
addEventListener() { |
|||
// noop
|
|||
} |
|||
|
|||
attachEvent() { |
|||
// noop
|
|||
} |
|||
|
|||
detachEvent() { |
|||
// noop
|
|||
} |
|||
|
|||
_initCanvas(zrender, ctx) { |
|||
zrender.util.getContext = function () { |
|||
return ctx; |
|||
}; |
|||
|
|||
zrender.util.$override('measureText', function (text, font) { |
|||
ctx.font = font || '12px sans-serif'; |
|||
return ctx.measureText(text); |
|||
}); |
|||
} |
|||
|
|||
_initStyle(ctx) { |
|||
ctx.createRadialGradient = () => { |
|||
return 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.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, |
|||
preventDefault: () => {}, |
|||
stopImmediatePropagation: () => {}, |
|||
stopPropagation: () => {} |
|||
}); |
|||
}; |
|||
}); |
|||
} |
|||
|
|||
set width(w) { |
|||
if (this.canvasNode) this.canvasNode.width = w |
|||
} |
|||
set height(h) { |
|||
if (this.canvasNode) this.canvasNode.height = h |
|||
} |
|||
|
|||
get width() { |
|||
if (this.canvasNode) |
|||
return this.canvasNode.width |
|||
return 0 |
|||
} |
|||
get height() { |
|||
if (this.canvasNode) |
|||
return this.canvasNode.height |
|||
return 0 |
|||
} |
|||
} |
|||
@ -0,0 +1,64 @@ |
|||
import * as echarts from '../components/ec-canvas/echarts'; |
|||
|
|||
const app = getApp(); |
|||
|
|||
function initChart(canvas, width, height, dpr) { |
|||
const chart = echarts.init(canvas, null, { |
|||
width: 300, |
|||
height: 300, |
|||
devicePixelRatio: dpr // new
|
|||
}); |
|||
canvas.setChart(chart); |
|||
|
|||
var option = { |
|||
backgroundColor: "#ffffff", |
|||
series: [{ |
|||
label: { |
|||
normal: { |
|||
fontSize: 14 |
|||
} |
|||
}, |
|||
type: 'pie', |
|||
center: ['50%', '50%'], |
|||
radius: ['20%', '40%'], |
|||
data: [{ |
|||
value: 55, |
|||
name: '北京' |
|||
}, { |
|||
value: 20, |
|||
name: '武汉' |
|||
}, { |
|||
value: 10, |
|||
name: '杭州' |
|||
}, { |
|||
value: 20, |
|||
name: '广州' |
|||
}, { |
|||
value: 38, |
|||
name: '上海' |
|||
}] |
|||
}] |
|||
}; |
|||
|
|||
chart.setOption(option); |
|||
return chart; |
|||
} |
|||
|
|||
Page({ |
|||
onShareAppMessage: function (res) { |
|||
return { |
|||
title: 'ECharts 可以在微信小程序中使用啦！', |
|||
path: '/pages/index/index', |
|||
success: function () { }, |
|||
fail: function () { } |
|||
} |
|||
}, |
|||
data: { |
|||
ec: { |
|||
onInit: initChart |
|||
} |
|||
}, |
|||
|
|||
onReady() { |
|||
} |
|||
}); |
|||
@ -0,0 +1,5 @@ |
|||
{ |
|||
"usingComponents": { |
|||
"ec-canvas": "../components/ec-canvas/ec-canvas" |
|||
} |
|||
} |
|||
@ -0,0 +1,4 @@ |
|||
<!--index.wxml--> |
|||
<view class="pie"> |
|||
<ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas> |
|||
</view> |
|||
@ -0,0 +1,5 @@ |
|||
/**index.wxss**/ |
|||
.pie { |
|||
width: 300px; |
|||
height: 300px; |
|||
} |
|||
Loading…
Reference in new issue