Zhuyi731 / echarts-for-wx-uniapp

uni-app echarts vue2小程序专用
331 stars 37 forks source link

windows 系统,小程序开发者工具,不显示也不报错 #10

Closed IFnGSiYu closed 4 years ago

IFnGSiYu commented 4 years ago

windows 系统,小程序开发者工具,不显示也不报错,是什么原因啊

Zhuyi731 commented 4 years ago

应该是数据问题你可以看一下 这个issue

IFnGSiYu commented 4 years ago

现在显示了,是数据问题,但是显示后地图板块没有点击效果,折线或者其他的都是一样没效果

IFnGSiYu commented 4 years ago

@touchstart @touchmove @touchend事件没有调用是什么原因

Zhuyi731 commented 4 years ago

@touchstart @touchmove @touchend事件没有调用是什么原因

可以把你的配置发一下吗。

IFnGSiYu commented 4 years ago

我重启了HBuilder touch事件调用了,但是wrapTouch还是没有调用,地图板块点击没效果 ec: { lazyLoad: false, option: { tooltip: { trigger: 'item', formatter: '{b}: {c}' }, visualMap: { min: 0, max: 250, left: 'left', top: 'bottom', text: ['高', '低'], // 文本,默认为数值文本 calculable: true, inRange: { color: ['#a6bfff', '#5b87ff', '#2f5bd2'] } }, series: [{ type: 'map', map: 'hunan', zoom: 1.2, label: { show: true, normal: { show: true }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { areaColor: '#2f5bd2', normal: { borderColor: '#b1acc8', borderWidth: 2, areaColor: '#fff', }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, animation: false, data: [ { name: '长沙市', value: 100 }, { name: '株洲市', value: 10 }, { name: '湘潭市', value: 20 }, { name: '衡阳市', value: 30 }, { name: '邵阳市', value: 40 }, { name: '岳阳市', value: 50 }, { name: '常德市', value: 100 }, { name: '张家界市', value: 250 }, { name: '益阳市', value: 25 }, { name: '郴州市', value: 15 }, { name: '永州市', value: 1 }, { name: '怀化市', value: 4 }, { name: '娄底市', value: 35 }, { name: '湘西土家族苗族自治州', value: 35 } ]

                    }],

                }
            },
Zhuyi731 commented 4 years ago

我重启了HBuilder touch事件调用了,但是wrapTouch还是没有调用,地图板块点击没效果 ec: { lazyLoad: false, option: { tooltip: { trigger: 'item', formatter: '{b}: {c}' }, visualMap: { min: 0, max: 250, left: 'left', top: 'bottom', text: ['高', '低'], // 文本,默认为数值文本 calculable: true, inRange: { color: ['#a6bfff', '#5b87ff', '#2f5bd2'] } }, series: [{ type: 'map', map: 'hunan', zoom: 1.2, label: { show: true, normal: { show: true }, emphasis: { textStyle: { color: '#fff' } } }, itemStyle: { areaColor: '#2f5bd2', normal: { borderColor: '#b1acc8', borderWidth: 2, areaColor: '#fff', }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } }, animation: false, data: [ { name: '长沙市', value: 100 }, { name: '株洲市', value: 10 }, { name: '湘潭市', value: 20 }, { name: '衡阳市', value: 30 }, { name: '邵阳市', value: 40 }, { name: '岳阳市', value: 50 }, { name: '常德市', value: 100 }, { name: '张家界市', value: 250 }, { name: '益阳市', value: 25 }, { name: '郴州市', value: 15 }, { name: '永州市', value: 1 }, { name: '怀化市', value: 4 }, { name: '娄底市', value: 35 }, { name: '湘西土家族苗族自治州', value: 35 } ]

                  }],

              }
          },

你事件在哪绑定的? 事件是不能通过在option里直接设置的,因为uni-app会吧data里的function去除。需要获取$curChart图表实例来绑定事件。

IFnGSiYu commented 4 years ago

我看原生的没有绑定事件点击板块就有效果的,uniapp是必须要绑定事件然后通过图表实例是改变颜色添加效果吗?

Zhuyi731 commented 4 years ago

我看原生的没有绑定事件点击板块就有效果的,uniapp是必须要绑定事件然后通过图表实例是改变颜色添加效果吗?

不是的,默认就应该有效果。这个我要等回家具体自己测一下才能给你答复。之前也出现过扇形图点击没有效果的情况,这是小程序的问题。

IFnGSiYu commented 4 years ago
        touchEnd(e) {
            **console.log("touchEnd", e)**
            if (this.ec.stopTouchEvent) {
                **console.log("touchEnd", "0000")**
                e.preventDefault();
                e.stopPropagation();
                return;
            }
            this.$emit("touchend", e);
            if (this.$curChart) {
                **console.log("touchEnd", "1111")**
                const touch = e.changedTouches ? e.changedTouches[0] : {};
                var handler = this.$curChart.getZr().handler;
                if (handler) {
                    **console.log("touchEnd", "2222")**
                    handler.dispatch("mouseup", {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                    handler.dispatch("click", {
                        zrX: touch.x,
                        zrY: touch.y
                    });
                    handler.processGesture(wrapTouch(e), "end");
                }
            }
        },

我测试发现只打印了第一个参数e,后面的0000 1111 2222 都没有打印,这个会影响默认效果吗

IFnGSiYu commented 4 years ago

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 // }); handler.dispatch('mousemove', {//原生中touchStart这个方法不调用就没有效果 其他不影响 zrX: touch.x, zrY: touch.y }); // handler.processGesture(wrapTouch(e), 'start'); } }, 封装的uniapp里面是没有调用的

            console.log(this.$curChart)==undefined//导致下面的判断false,没有调用
            console.log(e.touches.length)
            if (this.$curChart && e.touches.length > 0) {
IFnGSiYu commented 4 years ago

我解决了问题 if (typeof callback === "function") { console.log("callback111111111111111") that.$curChart = callback( canvas, canvasWidth, canvasHeight, canvasDpr ); } else if (that.ec) { console.log("callback1222222222222222222222") that.$curChart = that.initChart(canvas, canvasWidth, canvasHeight, canvasDpr); console.log(that.$curChart)//这里是没有接收到that.$curChart , } else { console.log("callback333333333333333333") that.triggerEvent("init", { canvas: canvas, width: canvasWidth, height: canvasHeight, devicePixelRatio: canvasDpr }); } 原生里面是在initChart方法里面返回了return chart; 所以,uniapp版在initChart方法里面返回了return this.$curChart就可以了 你那边更新一下,然后也感谢你的封装,谢谢!