@visactor/taro-vchart
Version:
Taro VChart 图表组件
163 lines (158 loc) • 7.5 kB
JavaScript
var __awaiter = this && this.__awaiter || function(thisArg, _arguments, P, generator) {
return new (P || (P = Promise))((function(resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
}
function step(result) {
var value;
result.done ? resolve(result.value) : (value = result.value, value instanceof P ? value : new P((function(resolve) {
resolve(value);
}))).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
}));
};
import React from "react";
import { View, Canvas } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { TTCanvas, style_cs_canvas, style_cs_canvas_hidden, style_cs_tooltip_canvas, style_container } from "../../utils";
export class GeneralChart extends React.Component {
componentDidMount() {
return __awaiter(this, void 0, void 0, (function*() {
if (this.props.chartConstructor || console.error("props.chartConstructor is not found"),
!this.props.spec || !this.props.canvasId) return this.props.spec || console.warn("props.spec are not found"),
void (this.props.canvasId || console.warn("props.canvasId are not found"));
// 获取domRef
const getDomRef = () => __awaiter(this, void 0, void 0, (function*() {
return new Promise((resolve => {
Taro.nextTick((() => {
Taro.createSelectorQuery().select(`#${this.props.canvasId}_draw_canvas`).boundingClientRect((domref => {
resolve(domref);
})).exec();
}));
}));
}))
/**
* TODO:
* 这里是一个很不优雅的写法
* 具体背景为: 用户在加载页面后, 立刻创建图表, 会报取不domRef的错误.
* 具体原因是Taro.nextTick()仅执行一次时, 在飞书小程序无法正确取到Dom节点. 经过测试, 调用2次就可以保持正确.
* 因此在这里被迫做了一个for循环, 多次尝试. 至多取100次.
*
* 此外, 这里也无法使用onReady进行操作, 具体请参考: http://taro-docs.jd.com/taro/docs/react-page#onready-
* 此问题目前仅出现在飞书小程序, 字节小程序正常.
*/;
for (let i = 0; i < 100; i++) {
// 获取domRef
const domref = yield getDomRef();
if (null != domref) {
// 初始化图表
Taro.getSystemInfo({
success: res => {
this.init({
domref: domref,
dpr: res.pixelRatio
});
},
fail: res => {
console.error(new Error("taro 暂不支持该环境")), console.log(res);
}
});
break;
}
}
}));
}
componentDidUpdate(prevProps) {
this.ttCanvas && this.ttCanvas.chartInstance && JSON.stringify(prevProps.spec) !== JSON.stringify(this.props.spec) && this.ttCanvas.updateSpec(this.props);
}
componentWillUnmount() {
this.ttCanvas && this.ttCanvas.release();
}
init({domref: domref, dpr: dpr = 2}) {
return __awaiter(this, void 0, void 0, (function*() {
if (domref) {
if ("wx" === this.props.mode || "tt" === this.props.mode) {
// 微信小程序和TT小程序环境特殊处理
const canvasIdLists = [ `${this.props.canvasId}_draw_canvas`, `${this.props.canvasId}_tooltip_canvas`, `${this.props.canvasId}_hidden_canvas` ], {chartConstructor: chartConstructor} = this.props, {vglobal: vglobal} = chartConstructor;
vglobal && (yield vglobal.setEnv(this.props.mode, {
domref: domref,
force: !0,
canvasIdLists: canvasIdLists,
freeCanvasIdx: 2,
component: void 0,
forceUpdate: !0
}));
}
domref.id = this.props.canvasId, this.ttCanvas = new TTCanvas({
chartConstructor: this.props.chartConstructor,
dpr: dpr,
domref: domref,
spec: this.props.spec,
events: this.props.events,
options: this.props.options,
mode: this.props.mode,
onChartInit: chart => {
var _a;
(null === (_a = this.props) || void 0 === _a ? void 0 : _a.onChartInit) && this.props.onChartInit(chart);
},
onChartReady: chart => {
var _a;
(null === (_a = this.props) || void 0 === _a ? void 0 : _a.onChartReady) && this.props.onChartReady(chart);
},
onChartUpdate: chart => {
var _a;
(null === (_a = this.props) || void 0 === _a ? void 0 : _a.onChartUpdate) && this.props.onChartUpdate(chart);
}
});
} else console.error(`未找到 #${this.props.canvasId} 组件`);
}));
}
render() {
const handleEvent = event => {
if (this.ttCanvas && this.ttCanvas.chartInstance) {
const chartInstance = this.ttCanvas.chartInstance;
Object.defineProperty(event, "target", {
writable: !1,
value: chartInstance.getCanvas()
}), chartInstance.getStage().window.dispatchEvent(event);
}
}, {canvasId: canvasId, style: style = {}} = this.props, type = "wx" === this.props.mode || "tt" === this.props.mode ? "2d" : void 0;
return React.createElement(View, {
key: canvasId,
style: Object.assign(Object.assign(Object.assign({}, style_container), style), {
padding: 0
})
}, React.createElement(Canvas, {
type: type,
style: Object.assign({}, style_cs_tooltip_canvas),
onTouchStart: handleEvent,
onTouchMove: handleEvent,
onTouchEnd: handleEvent,
id: `${canvasId}_tooltip_canvas`,
canvasId: `${canvasId}_tooltip_canvas`
}), React.createElement(Canvas, {
type: type,
style: style_cs_canvas,
id: `${canvasId}_draw_canvas`,
canvasId: `${canvasId}_draw_canvas`
}), React.createElement(Canvas, {
type: type,
style: Object.assign(Object.assign({}, style_cs_canvas), style_cs_canvas_hidden),
id: `${canvasId}_hidden_canvas`,
canvasId: `${canvasId}_hidden_canvas`
}));
}
}
//# sourceMappingURL=index.js.map