微信小程序echarts-for-weixin使用之竖屏横屏切换图表重新绘制 | 8月更文挑战

·  阅读 370
微信小程序echarts-for-weixin使用之竖屏横屏切换图表重新绘制 | 8月更文挑战

这是我参与8月更文挑战的第5天,活动详情查看:8月更文挑战

图表Echart使用

1、克隆:git clone https://gitee.com/hhhero/echarts-for-weixin.git
2、复制ec-canvas文件夹到小程序中,一般放pages同级目录中,看项目目录设计吧

3、这时候你看到的并没有echarts.min.js,而是全量的echarts.js,这时候可以定制Echarts你所需要的图表,然后在 其它选项中选择代码压缩 下载即可得到echarts.min.js

4、修改ec-canvas.js导入文件名称
import *as echarts from './echarts.min';

5、小程序page中使用

// .json文件
"usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
复制代码
// .wxml文件
<ec-canvas  style="height: 500rpx;width: 100%;" id="mychart-first"
  canvas-id="mychart-first" ec="{{ ecEchart }}"></ec-canvas>
复制代码
// .js文件
let options = {
    barOption: { 
        // 配置项
        // ... 
    }
}
// 存放绘制对象
let myChart = { 
    chartOne: null
}
function init({canvas, width, height, dpr, optionKey}) {
  let chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  chart.showLoading(); // 首次显示加载动画
  canvas.setChart(chart);
  let option = options[optionKey]
  chart.setOption(option);
  chart.hideLoading(); // 隐藏加载动画
  return chart;
}

function initOneChart(canvas, width, height, dpr) {
  myChart.chartOne = init({canvas,width,height,dpr,optionKey: 'barOption'});
  return myChart.chartOne;
}

Page({
    data:{
        ecEchart: {
          onInit: initOneChart
        }
    },
    onReady() {
        this.getEcharts()
    },
    getEcharts() {
      
        let setOne = {
            xAxis: {
              data: [] //异步请求返回数据,如 ['2021-08-01','2021-08-02',...]
            },
            series: [{
              name: '收入分析',
              data: [] // 异步请求返回数据,如 [12,33,...]
            }]
        }

        myChart.chartOne.setOption(setOne);
    }
})
复制代码

收工,如下图所示:

存在问题

  • 问题一:页面滚动,图表像是添加了position: fixed;一样,不跟随父级滚动。
    引发原因:在挂在图表元素的某个父级,存在以下样式,导致
height:100vh;
overflow-y:auto;
overflow-x:hidden;
复制代码


解决:把样式height:100vh;去除。

  • 问题二:手机横屏,图表做不到重新绘制,导致模糊等情况,如下图,图二x轴坐标上显示有些变扭曲。
    :-: 图一:

    :-: 图二:

    解决:
    第一步:.json文件添加 "pageOrientation":"auto", 允许横屏;
    第二步:.js文件添加 onResize(res){},监听手机横屏变化,以便做相应处理;
    第三步:经过上面两步,以为直接 chart.resize()就可以了吗?小程序并不这么友好啊!!!坑出现了。
    还需要配合以下几步:重新绘制需要 wx.nextTick(() => {}) // 视图更新完成,使得chart不等undefined 、 视图wx:if 和 chart.setOption(options);
    说明:视图通过wx:if控制组件,配合setOption(options)才能实现(横屏)重新绘制,除此之外也没有发现其他方法了。

    :-: 竖屏效果:

    :-: 横屏效果:

其他信息

GitHub: github.com/wwmingly/ec…

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改