|
|
<template>
|
|
|
<view class="canvasId-wk">
|
|
|
<!-- #ifdef H5 || APP -->
|
|
|
|
|
|
<canvas
|
|
|
:style="{
|
|
|
width: w,
|
|
|
height: h
|
|
|
}"
|
|
|
v-if="cid"
|
|
|
class="ec-canvas"
|
|
|
:id="cid"
|
|
|
:canvasId="cid"
|
|
|
@touchstart="touchStart"
|
|
|
@touchmove="touchMove"
|
|
|
@touchend="touchEnd"
|
|
|
@error="$emit('error',$event)"
|
|
|
></canvas>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifndef MP-WEIXIN || H5 || APP || MP-ALIPAY -->
|
|
|
|
|
|
<canvas
|
|
|
:style="{
|
|
|
width: w,
|
|
|
height: h
|
|
|
}"
|
|
|
v-if="canvasId"
|
|
|
class="ec-canvas"
|
|
|
id="ec-canvas"
|
|
|
canvasId="ec-canvas"
|
|
|
@touchstart="touchStart"
|
|
|
@touchmove="touchMove"
|
|
|
@touchend="touchEnd"
|
|
|
@error="$emit('error',$event)"
|
|
|
></canvas>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifdef MP-WEIXIN || MP-ALIPAY-->
|
|
|
|
|
|
<canvas
|
|
|
:style="{
|
|
|
width: w,
|
|
|
height: h
|
|
|
}"
|
|
|
v-if="canvasId"
|
|
|
type="2d"
|
|
|
class="ec-canvas"
|
|
|
id="ec-canvas"
|
|
|
canvasId="ec-canvas"
|
|
|
@touchstart="touchStart"
|
|
|
@touchmove="touchMove"
|
|
|
@touchend="touchEnd"
|
|
|
@error="$emit('error',$event)"
|
|
|
></canvas>
|
|
|
<!-- #endif -->
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
/**
|
|
|
* Echart图表
|
|
|
* @param {Number|String} width = [] 默认100%,纯数字时，单位为rpx
|
|
|
* @param {Number|String} height = [] 默认500,纯数字时，单位为rpx,不允许百分比。
|
|
|
* @param {Object} echarts = [] 默认null,百度echart.js插件，默认可以使用本库自带，详见文档。
|
|
|
* @param {Function} init 图表初始化后执行触发事件返回{width,height,chart}
|
|
|
* @param {Function} error 出错时触发。
|
|
|
*/
|
|
|
|
|
|
import WxCanvas from '@/tm-vuetify/tool/function/uni-echarts-canvas.js';
|
|
|
import * as echarts from '@/tm-vuetify/tool/function/echarts.min.js';
|
|
|
function wrapTouch(e) {
|
|
|
for (let i = 0; i < e.mp.touches.length; i += 1) {
|
|
|
const touch = e.mp.touches[i];
|
|
|
touch.offsetX = touch.x;
|
|
|
touch.offsetY = touch.y;
|
|
|
}
|
|
|
return e;
|
|
|
}
|
|
|
|
|
|
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;
|
|
|
}
|
|
|
export default {
|
|
|
name:"tm-echarts",
|
|
|
props: {
|
|
|
width: {
|
|
|
type: String | Number,
|
|
|
default: '100%'
|
|
|
},
|
|
|
height: {
|
|
|
type: String | Number,
|
|
|
default: '500'
|
|
|
},
|
|
|
canvasId: {
|
|
|
type: String,
|
|
|
default: 'ec-canvas'
|
|
|
},
|
|
|
lazyLoad: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
disableTouch: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
throttleTouch: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
echarts,
|
|
|
cid:'ec-canvas'
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
this.cid = this.$tm.guid();
|
|
|
},
|
|
|
destroyed() {
|
|
|
try{
|
|
|
this.echarts=null;
|
|
|
this.chart.clear()
|
|
|
this.chart = null;
|
|
|
|
|
|
}catch(e){
|
|
|
//TODO handle the exception
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
w: function() {
|
|
|
if (this.width == 0 || this.width == '') {
|
|
|
return '100%';
|
|
|
}
|
|
|
let reg = /(vw|vh|rem|em|\%|upx|rpx|auto|px)/g;
|
|
|
if (reg.test(this.width)) {
|
|
|
return this.width;
|
|
|
}
|
|
|
return this.width + 'rpx';
|
|
|
},
|
|
|
h: function() {
|
|
|
let reg = /(vw|vh|rem|em|\%|upx|rpx|auto|px)/g;
|
|
|
if (reg.test(this.height)) {
|
|
|
return this.height;
|
|
|
}
|
|
|
return this.height + 'rpx';
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
mounted() {
|
|
|
if (!this.echarts) {
|
|
|
console.warn('未引用echarts');
|
|
|
return;
|
|
|
}
|
|
|
if (!this.lazyLoad) {
|
|
|
this.$nextTick(function() {
|
|
|
try{
|
|
|
this.init();
|
|
|
}catch(e){
|
|
|
//TODO handle the exception
|
|
|
console.error("echarts错误提醒:",e)
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
//初始化
|
|
|
init() {
|
|
|
// #ifdef MP-WEIXIN
|
|
|
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;
|
|
|
}
|
|
|
// #endif
|
|
|
let canvasId = this.canvasId;
|
|
|
// #ifdef H5 || APP-PLUS || APP-VUE
|
|
|
canvasId = this.cid;
|
|
|
// #endif
|
|
|
// #ifndef MP-WEIXIN || MP-ALIPAY
|
|
|
|
|
|
this.ctx = uni.createCanvasContext(canvasId, this);
|
|
|
const canvas = new WxCanvas(this.ctx, canvasId, false);
|
|
|
|
|
|
this.echarts.setCanvasCreator(() => canvas);
|
|
|
const query = uni.createSelectorQuery().in(this);
|
|
|
query.select(`#${canvasId}`)
|
|
|
.boundingClientRect(res => {
|
|
|
if (!res) {
|
|
|
setTimeout(() => this.init(), 100);
|
|
|
return;
|
|
|
}
|
|
|
const { width, height } = res;
|
|
|
const canvasDpr = uni.getSystemInfoSync().pixelRatio
|
|
|
this.chart = this.echarts.init(canvas, null, {
|
|
|
width: width,
|
|
|
height: height
|
|
|
});
|
|
|
|
|
|
canvas.setChart(this.chart);
|
|
|
|
|
|
const { handler } = this.chart.getZr();
|
|
|
this.handler = handler;
|
|
|
this.processGesture = handler.proxy.processGesture || (() => {});
|
|
|
|
|
|
this.$emit('init', {
|
|
|
width: res.width,
|
|
|
height: res.height,
|
|
|
chart: this.chart
|
|
|
});
|
|
|
})
|
|
|
.exec();
|
|
|
// #endif
|
|
|
|
|
|
// #ifdef MP-WEIXIN || MP-ALIPAY
|
|
|
|
|
|
const query = uni.createSelectorQuery().in(this)
|
|
|
query
|
|
|
.select('.ec-canvas')
|
|
|
.fields({ node: true, size: true })
|
|
|
.exec(res => {
|
|
|
const canvasNode = res[0].node
|
|
|
this.canvasNode = canvasNode
|
|
|
|
|
|
const canvasDpr = uni.getSystemInfoSync().pixelRatio
|
|
|
const canvasWidth = res[0].width
|
|
|
const canvasHeight = res[0].height
|
|
|
|
|
|
const ctx = canvasNode.getContext('2d')
|
|
|
|
|
|
const canvas = new WxCanvas(ctx, canvasId, true,canvasNode);
|
|
|
this.echarts.setCanvasCreator(() => {
|
|
|
return canvas
|
|
|
})
|
|
|
this.chart = this.echarts.init(canvas, null, {
|
|
|
width: canvasWidth,
|
|
|
height: canvasHeight,
|
|
|
devicePixelRatio:canvasDpr
|
|
|
});
|
|
|
canvas.setChart(this.chart);
|
|
|
const { handler } = this.chart.getZr();
|
|
|
this.handler = handler;
|
|
|
this.processGesture = handler.proxy.processGesture || (() => {});
|
|
|
this.$emit('init', {
|
|
|
width: canvasWidth,
|
|
|
height: canvasHeight,
|
|
|
chart: this.chart
|
|
|
});
|
|
|
|
|
|
})
|
|
|
|
|
|
// #endif
|
|
|
},
|
|
|
//配置图表数据
|
|
|
setOption(dJson) {
|
|
|
if (!this.chart){
|
|
|
uni.$tm.toast("chart未初始化")
|
|
|
return false;
|
|
|
}
|
|
|
this.chart.setOption({...dJson},{notMerge:true});
|
|
|
return true;
|
|
|
},
|
|
|
//获取图表对象。
|
|
|
getChart(FunName,arg){
|
|
|
if (!this.chart){
|
|
|
uni.$tm.toast("chart未初始化")
|
|
|
return false;
|
|
|
}
|
|
|
return this.chart;
|
|
|
},
|
|
|
resize(){
|
|
|
|
|
|
let t = this;
|
|
|
return new Promise((res,rej)=>{
|
|
|
if (!t.chart){
|
|
|
uni.$tm.toast("chart未初始化")
|
|
|
rej(false);
|
|
|
return false;
|
|
|
}
|
|
|
let canvasId = t.canvasId;
|
|
|
// #ifdef H5 || APP-PLUS || APP-VUE
|
|
|
canvasId = t.cid;
|
|
|
// #endif
|
|
|
|
|
|
const query = uni.createSelectorQuery().in(t);
|
|
|
query.select(`.canvasId-wk`)
|
|
|
.boundingClientRect(op => {
|
|
|
const { width, height } = op;
|
|
|
t.chart.resize({width:width,height:height})
|
|
|
res(true);
|
|
|
}).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];
|
|
|
this.handler.dispatch('mousedown', {
|
|
|
zrX: touch.x,
|
|
|
zrY: touch.y
|
|
|
});
|
|
|
this.handler.dispatch('mousemove', {
|
|
|
zrX: touch.x,
|
|
|
zrY: touch.y
|
|
|
});
|
|
|
this.processGesture(wrapTouch(e), 'start');
|
|
|
},
|
|
|
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];
|
|
|
this.handler.dispatch('mousemove', {
|
|
|
zrX: touch.x,
|
|
|
zrY: touch.y
|
|
|
});
|
|
|
this.processGesture(wrapTouch(e), 'change');
|
|
|
},
|
|
|
touchEnd(e) {
|
|
|
const { disableTouch, chart } = this;
|
|
|
if (disableTouch || !chart) return;
|
|
|
const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
|
|
|
this.handler.dispatch('mouseup', {
|
|
|
zrX: touch.x,
|
|
|
zrY: touch.y
|
|
|
});
|
|
|
this.handler.dispatch('click', {
|
|
|
zrX: touch.x,
|
|
|
zrY: touch.y
|
|
|
});
|
|
|
this.processGesture(wrapTouch(e), 'end');
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.ec-canvas {
|
|
|
width: 100%;
|
|
|
height: 375rpx;
|
|
|
}
|
|
|
</style>
|