小程序echarts图表全屏展示方案探讨与问题汇总总结

这里是遇到的一些问题汇总

怎么在微信小程序实现echarts横向展示，不是横屏，仅图表实现横向？

试图引用过wxcharts.js，让父级旋转90°，但手机预览时，图表不显示；另使用echarts，即便父级旋转90°，图表依然是纵向的，不会随着父级旋转

问题：想要在小程序中横屏展示图表，方便一屏能够展示更多信息。

如果通过旋转echarts组件的方式来实现，则会出现touch事件的坐标轴交换的问题。

如果通过交换x轴y轴来实现，则会出现toolbox组件和legend组件无法旋转的问题

解决方案：

小程序基础库2.4.0之后可以在json文件中配置pageOrientation来实现小程序的横屏，然后不用修改其他配置直接正常加载图表。这样就不会出现上述问题。

小程序echarts图表横屏展示问题 https://blog.csdn.net/LIsmooth/article/details/109328776

其实这里里面需要解决，就是绘制的长宽问题。

if (rotated) {
  this.chart = this.echarts.init(canvas, null, {
    width: height,
    height: width,
    devicePixelRatio: dpr, // new
  });
} else {
  this.chart = this.echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr, // new
  });
}

这样就解决了横屏问题。但是点击，还是错位的

private _touchEnd = (e) => {
  if (this.chart) {
    const touch = e.changedTouches ? e.changedTouches[0] : {};
    var handler = this.chart.getZr().handler;
    const {rotated} = this.props
    const {x, y} = touch;
    let zrX = x, zrY = y;
    if (rotated) {
      zrX = y;
      zrY = x
    }
    handler.dispatch('mouseup', {
      zrX,
      zrY
    });
    handler.dispatch('click', {
      zrX,
      zrY
    });
    handler.processGesture(wrapTouch(e, rotated), 'end');
  }
};

这样的话，就修正了旋转的问题……

echarts使用getZr()点击事件获取柱状图数据

当柱状图数据较少的时候，直接点击柱子不好点击，使用getZr()此种方法可以点击柱子所在的这一列（阴影部分），即可拿到对应数据

chart.setOption(option);
chart.off('click'); //防止触发两次点击事件
chart.getZr().on('click', (params) => {
  let pointInPixel = [params.offsetX, params.offsetY];
  if (chart.containPixel('grid', pointInPixel)) {
    let pointInGrid = chart.convertFromPixel({
      seriesIndex: 0
    }, pointInPixel);
    let xIndex = pointInGrid[0]; //索引
    let handleIndex = Number(xIndex);
    let seriesObj = chart.getOption(); //图表object对象
    console.log(handleIndex, seriesObj);
  }
})

这个方案解决来源于：https://blog.csdn.net/weixin_54366356/article/details/117324448

转载本站文章《小程序echarts图表全屏展示方案探讨与问题汇总总结》,
请注明出处：https://www.zhoulujun.cn/html/webfront/AppDev/taro/8730.html