### 图表Echart使用 ***** 1、克隆：`git clone https://gitee.com/hhhero/echarts-for-weixin.git` 2、复制`ec-canvas`文件夹到小程序中，一般放pages同级目录中，看项目目录设计吧  3、这时候你看到的并没有`echarts.min.js`，而是全量的`echarts.js`，这时候可以[定制Echarts](https://echarts.apache.org/zh/builder.html)你所需要的图表，然后在 其它选项中选择代码压缩 下载即可得到`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](https://github.com/wwmingly/ec-echart-wx)： https://github.com/wwmingly/ec-echart-wx