| | |
| | | |
| | | <template> |
| | | <view class="c-echarts"> |
| | | 123 |
| | | <canvas |
| | | class="c-echarts-canvas" |
| | | type="2d" |
| | | :id="canvasId" |
| | | :canvasId="canvasId" |
| | | :bindtouchstart="evt => disableTouch ? null : touchStart(evt)" |
| | | :bindtouchmove="evt => disableTouch ? null : touchMove(evt)" |
| | | :bindtouchend="evt => disableTouch ? null : touchEnd(evt)" |
| | | @touchstart="evt => disableTouch ? null : touchStart(evt)" |
| | | @touchmove="evt => disableTouch ? null : touchMove(evt)" |
| | | @touchend="evt => disableTouch ? null : touchEnd(evt)" |
| | | ></canvas> |
| | | </view> |
| | | </template> |
| | |
| | | props: { |
| | | canvasId: { |
| | | type: String, |
| | | default: 'ec-canvas-' + ++canvasCount + '-' + parseInt(Math.random() * 10000), |
| | | default: () => |
| | | 'ec-canvas-' + ++canvasCount + '-' + parseInt(Math.random() * 10000), |
| | | }, |
| | | disableTouch: { |
| | | type: Boolean, |
| | |
| | | }); |
| | | canvas.setChart(this.chart); |
| | | this.onReady && this.onReady(this.chart); |
| | | this.chart.setOption({ |
| | | tooltip: { |
| | | backgroundColor: 'rgba(50,50,50,0.7)', |
| | | textStyle: { |
| | | color: '#ffffff', |
| | | }, |
| | | // 重新修正浮窗位置 |
| | | position: (pos, params, dom, rect, size) => { |
| | | const [pX, pY] = pos; |
| | | const [contX, contY] = size.contentSize; |
| | | const [viewX, viewY] = size.viewSize; |
| | | const contentPoint = {}; |
| | | // 鼠标在左侧时 tooltip 显示到右侧 |
| | | if (pX < viewX / 2) { |
| | | contentPoint.right = Math.max(viewX - pX - contX, 0); |
| | | } |
| | | // 鼠标在右侧时 tooltip 显示到左侧。 |
| | | else { |
| | | contentPoint.left = Math.max(pX - contX, 0); |
| | | } |
| | | // 限制不超过底部边界 |
| | | if (pY + contY <= viewY) { |
| | | contentPoint.top = pY; |
| | | } else { |
| | | contentPoint.top = viewY - contY; |
| | | } |
| | | return contentPoint; |
| | | }, |
| | | }, |
| | | }); |
| | | }); |
| | | }, 100); |
| | | }, |