微信小程序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…