sws
/
carInsightSystem_wxapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
dev
xiaowen 3 years ago
parent d0002e6b39
commit d4859665d1
3 changed files with 217 additions and 215 deletions
Show Stats Download Patch File Download Diff File

2
components/option/stackingLineOption.js
Unescape View File

@ -10,7 +10,7 @@ export default function brokenLines(dName = [], dValue = [], dColor = [], dx = [
color: "#fff", //设置文字颜色 color: "#fff", //设置文字颜色
}, },
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;", extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
confine: true confine: true,
}, },
legend: { legend: {
icon: 'rectangle', //data图标样式 icon: 'rectangle', //data图标样式

427
ec-canvas/ec-canvas.js
Unescape View File

@ -4,262 +4,267 @@ import * as echarts from './echarts';
let ctx; let ctx;
function compareVersion(v1, v2) { function compareVersion(v1, v2) {
v1 = v1.split('.') v1 = v1.split('.')
v2 = v2.split('.') v2 = v2.split('.')
const len = Math.max(v1.length, v2.length) const len = Math.max(v1.length, v2.length)
while (v1.length < len) { while (v1.length < len) {
v1.push('0') v1.push('0')
} }
while (v2.length < len) { while (v2.length < len) {
v2.push('0') v2.push('0')
} }
for (let i = 0; i < len; i++) { for (let i = 0; i < len; i++) {
const num1 = parseInt(v1[i]) const num1 = parseInt(v1[i])
const num2 = parseInt(v2[i]) const num2 = parseInt(v2[i])
if (num1 > num2) { if (num1 > num2) {
return 1 return 1
} else if (num1 < num2) { } else if (num1 < num2) {
return -1 return -1
}
} }
} return 0
return 0
} }
Component({ Component({
properties: { properties: {
canvasId: { canvasId: {
type: String, type: String,
value: 'ec-canvas' value: 'ec-canvas'
}, },
ec: {
type: Object
},
ec: { forceUseOldCanvas: {
type: Object type: Boolean,
value: false
}
}, },
forceUseOldCanvas: { data: {
type: Boolean, isUseNewCanvas: false,
value: false isEnd: false,
} },
},
data: { ready: function () {
isUseNewCanvas: false // 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;
}
}
});
ready: function () { if (!this.data.ec) {
// Disable prograssive because drawImage doesn't support DOM as parameter console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' +
// See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
echarts.registerPreprocessor(option => { return;
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) { if (!this.data.ec.lazyLoad) {
console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" ' this.init();
+ 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>'); }
return; },
}
if (!this.data.ec.lazyLoad) {
this.init();
}
},
methods: { methods: {
init: function (callback) { init: function (callback) {
const version = wx.getSystemInfoSync().SDKVersion const version = wx.getSystemInfoSync().SDKVersion
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0; const forceUseOldCanvas = this.data.forceUseOldCanvas;
const forceUseOldCanvas = this.data.forceUseOldCanvas; const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas; this.setData({
this.setData({ isUseNewCanvas }); isUseNewCanvas
});
if (forceUseOldCanvas && canUseNewCanvas) { if (forceUseOldCanvas && canUseNewCanvas) {
console.warn('开发者强制使用旧canvas,建议关闭'); console.warn('开发者强制使用旧canvas,建议关闭');
} }
if (isUseNewCanvas) { if (isUseNewCanvas) {
// console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>'); // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
// 2.9.0 可以使用 <canvas type="2d"></canvas> // 2.9.0 可以使用 <canvas type="2d"></canvas>
this.initByNewWay(callback); 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 { } else {
console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能'); const isValid = compareVersion(version, '1.9.91') >= 0
this.initByOldWay(callback); 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) { initByOldWay(callback) {
// 1.9.91 <= version < 2.9.0：原来的方式初始化 // 1.9.91 <= version < 2.9.0：原来的方式初始化
ctx = wx.createCanvasContext(this.data.canvasId, this); ctx = wx.createCanvasContext(this.data.canvasId, this);
const canvas = new WxCanvas(ctx, this.data.canvasId, false); const canvas = new WxCanvas(ctx, this.data.canvasId, false);
echarts.setCanvasCreator(() => { echarts.setCanvasCreator(() => {
return canvas; return canvas;
}); });
// const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
const canvasDpr = 1 const canvasDpr = 1
var query = wx.createSelectorQuery().in(this); var query = wx.createSelectorQuery().in(this);
query.select('.ec-canvas').boundingClientRect(res => { query.select('.ec-canvas').boundingClientRect(res => {
if (typeof callback === 'function') { if (typeof callback === 'function') {
this.chart = callback(canvas, res.width, res.height, canvasDpr); this.chart = callback(canvas, res.width, res.height, canvasDpr);
} } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
else if (this.data.ec && typeof this.data.ec.onInit === 'function') { this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr); } else {
} this.triggerEvent('init', {
else { canvas: canvas,
this.triggerEvent('init', { width: res.width,
canvas: canvas, height: res.height,
width: res.width, canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
height: res.height, });
canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init }
}); }).exec();
}
}).exec();
}, },
initByNewWay(callback) { initByNewWay(callback) {
// version >= 2.9.0：使用新的方式初始化 // version >= 2.9.0：使用新的方式初始化
const query = wx.createSelectorQuery().in(this) const query = wx.createSelectorQuery().in(this)
query query
.select('.ec-canvas') .select('.ec-canvas')
.fields({ node: true, size: true }) .fields({
.exec(res => { node: true,
const canvasNode = res[0].node size: true
this.canvasNode = canvasNode })
.exec(res => {
const canvasNode = res[0].node
this.canvasNode = canvasNode
const canvasDpr = wx.getSystemInfoSync().pixelRatio const canvasDpr = wx.getSystemInfoSync().pixelRatio
const canvasWidth = res[0].width const canvasWidth = res[0].width
const canvasHeight = res[0].height const canvasHeight = res[0].height
const ctx = canvasNode.getContext('2d') const ctx = canvasNode.getContext('2d')
const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode) const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
echarts.setCanvasCreator(() => { echarts.setCanvasCreator(() => {
return canvas return canvas
}) })
if (typeof callback === 'function') { if (typeof callback === 'function') {
this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr) this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
} else if (this.data.ec && typeof this.data.ec.onInit === 'function') { } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr) this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
} else { } else {
this.triggerEvent('init', { this.triggerEvent('init', {
canvas: canvas, canvas: canvas,
width: canvasWidth, width: canvasWidth,
height: canvasHeight, height: canvasHeight,
dpr: canvasDpr dpr: canvasDpr
})
}
}) })
}
})
}, },
canvasToTempFilePath(opt) { canvasToTempFilePath(opt) {
if (this.data.isUseNewCanvas) { if (this.data.isUseNewCanvas) {
// 新版 // 新版
const query = wx.createSelectorQuery().in(this) const query = wx.createSelectorQuery().in(this)
query query
.select('.ec-canvas') .select('.ec-canvas')
.fields({ node: true, size: true }) .fields({
.exec(res => { node: true,
const canvasNode = res[0].node size: true
opt.canvas = canvasNode })
wx.canvasToTempFilePath(opt) .exec(res => {
}) const canvasNode = res[0].node
} else { opt.canvas = canvasNode
// 旧的 wx.canvasToTempFilePath(opt)
if (!opt.canvasId) { })
opt.canvasId = this.data.canvasId; } else {
// 旧的
if (!opt.canvasId) {
opt.canvasId = this.data.canvasId;
}
ctx.draw(true, () => {
wx.canvasToTempFilePath(opt, this);
});
} }
ctx.draw(true, () => {
wx.canvasToTempFilePath(opt, this);
});
}
}, },
touchStart(e) { touchStart(e) {
if (this.chart && e.touches.length > 0) { if (this.chart && e.touches.length > 0) {
var touch = e.touches[0]; var touch = e.touches[0];
var handler = this.chart.getZr().handler; var handler = this.chart.getZr().handler;
handler.dispatch('mousedown', { handler.dispatch('mousedown', {
zrX: touch.x, zrX: touch.x,
zrY: touch.y, zrY: touch.y,
preventDefault: () => {}, preventDefault: () => {},
stopImmediatePropagation: () => {}, stopImmediatePropagation: () => {},
stopPropagation: () => {} stopPropagation: () => {}
}); });
handler.dispatch('mousemove', { handler.dispatch('mousemove', {
zrX: touch.x, zrX: touch.x,
zrY: touch.y, zrY: touch.y,
preventDefault: () => {}, preventDefault: () => {},
stopImmediatePropagation: () => {}, stopImmediatePropagation: () => {},
stopPropagation: () => {} stopPropagation: () => {}
}); });
handler.processGesture(wrapTouch(e), 'start'); handler.processGesture(wrapTouch(e), 'start');
} }
}, },
touchMove(e) { touchMove(e) {
if (this.chart && e.touches.length > 0) { if (this.chart && e.touches.length > 0) {
var touch = e.touches[0]; var touch = e.touches[0];
var handler = this.chart.getZr().handler; var handler = this.chart.getZr().handler;
handler.dispatch('mousemove', { handler.dispatch('mousemove', {
zrX: touch.x, zrX: touch.x,
zrY: touch.y, zrY: touch.y,
preventDefault: () => {}, preventDefault: () => {},
stopImmediatePropagation: () => {}, stopImmediatePropagation: () => {},
stopPropagation: () => {} stopPropagation: () => {}
}); });
handler.processGesture(wrapTouch(e), 'change'); handler.processGesture(wrapTouch(e), 'change');
} }
}, },
touchEnd(e) { touchEnd(e) {
if (this.chart) { if (this.chart) {
const touch = e.changedTouches ? e.changedTouches[0] : {}; const touch = e.changedTouches ? e.changedTouches[0] : {};
var handler = this.chart.getZr().handler; var handler = this.chart.getZr().handler;
handler.dispatch('mouseup', { handler.dispatch('mouseup', {
zrX: touch.x, zrX: touch.x,
zrY: touch.y, zrY: touch.y,
preventDefault: () => {}, preventDefault: () => {},
stopImmediatePropagation: () => {}, stopImmediatePropagation: () => {},
stopPropagation: () => {} stopPropagation: () => {}
}); });
handler.dispatch('click', { handler.dispatch('click', {
zrX: touch.x, zrX: touch.x,
zrY: touch.y, zrY: touch.y,
preventDefault: () => {}, preventDefault: () => {},
stopImmediatePropagation: () => {}, stopImmediatePropagation: () => {},
stopPropagation: () => {} stopPropagation: () => {}
}); });
handler.processGesture(wrapTouch(e), 'end'); handler.processGesture(wrapTouch(e), 'end');
} }
} }
} }
}); });
function wrapTouch(event) { function wrapTouch(event) {
for (let i = 0; i < event.touches.length; ++i) { for (let i = 0; i < event.touches.length; ++i) {
const touch = event.touches[i]; const touch = event.touches[i];
touch.offsetX = touch.x; touch.offsetX = touch.x;
touch.offsetY = touch.y; touch.offsetY = touch.y;
} }
return event; return event;
} }

3
ec-canvas/wx-canvas.js
Unescape View File

@ -10,9 +10,7 @@ export default class WxCanvas {
else { else {
this._initStyle(ctx); this._initStyle(ctx);
} }
// this._initCanvas(zrender, ctx); // this._initCanvas(zrender, ctx);
this._initEvent(); this._initEvent();
} }
@ -49,7 +47,6 @@ export default class WxCanvas {
zrender.util.getContext = function () { zrender.util.getContext = function () {
return ctx; return ctx;
}; };
zrender.util.$override('measureText', function (text, font) { zrender.util.$override('measureText', function (text, font) {
ctx.font = font || '12px sans-serif'; ctx.font = font || '12px sans-serif';
return ctx.measureText(text); return ctx.measureText(text);

Write Preview
Loading…
Cancel
Save