构建小程序步骤

从git库中拉下来的小程序项目需要构建npm包

//初始化
npm init
//安装依赖
npm install
安装完依赖后把node_modules和package.json文件复制一份放到miniprogram文件中，然后点击开发者工具中的工具->构建npm就可以构建了，构建成功后就可以把miniprogram文件下的node_modules和package.json文件删除就可以了

小程序项目中echarts图表的使用

引入图表

网上有提供小程序的echarts插件，将整个项目clone到本地，把项目中的ec-canvas文件复制一份到自己的项目中的专门放置组件的文件夹下

然后再在需要使用的页面json文件中引入

就可以在页面中使用了

//wxml
<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

//ts
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

这对于所有 ECharts 图表都是通用的，用户只需要修改上面 option 的内容，即可改变图表。option 的使用方法参见echarts配置手册完整的例子请参见ecomfe/echarts-for-weixin 项目

文件太大怎么办？

插件默认提供的 ECharts 文件是最新版本的包含所有组件文件。可以下载不同版本的 ECharts 进行替换。建议调试时使用未压缩版本，发布时使用压缩版本，否则文件会太大无法发布。发布时，如果对文件大小要求更高，可以在 echarts定制网页下载仅包含必要组件的包，并且选择压缩。下载的文件要替换 ec-canvas文件下的echarts.js，注意一定需要重命名为 echarts.js。此外，还可考虑使用微信小程序的分包策略

小程序使用echarts报错 t.addEventListener 未定义

下载定制后的echarts.js文件会报 t.addEventListener 未定义这个错。推测是5.2.2包没有更新问题，重新更新解决。下载下来的原始js文件解决方法：

echarts层级太高，遮盖页面，影响功能

echarts图表的层级是最高的，如果只是用wx:if来控制图表的显示和隐藏是不行的，即使是隐藏了，但是还是占着位置的，影响了页面的功能使用。在此项目中的解决办法就是使用hidden属性和css来控制显示隐藏

//wxml
     <view class="{{indexEchartsClass}}" hidden="{{hiddenChart}}">
          <ec-canvas class="ec-canvas" ec="{{ec}}" />
      </view>

//ts
page({
data: {
    hiddenChart: true,
    indexEchartsClass: 'index-echarts-hide',
  },

    if (括号里是控制图表显示和隐藏的条件)) {
      this.setData({
        hiddenChart: false,
        indexEchartsClass: 'index-echarts',
      })
    }
})

//wxss
.index-echarts {
  width: 100%;
  height: 800rpx;
}
.index-echarts-hide {
  height: 100%;
  width: 0rpx;
}

小程序项目开发总结--小程序项目中echarts图表的使用