图表插件:echarts-for-weixin

下载

首先，下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。

其中，ec-canvas 是我们提供的组件，其他文件是如何使用该组件的示例。

ec-canvas 目录下有一个 echarts.js，默认我们会在每次 echarts-for-weixin 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载最新发布版，或者从官网自定义构建以减小文件大小。

引入组件

在创建项目之后，可以将下载的 ecomfe/echarts-for-weixin 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 ec-canvas 目录到新建的项目下，然后做相应的调整。

如果采用完全替换的方式，需要将 project.config.json 中的 appid 替换成在公众平台申请的项目 id。pages 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 app.json 中删除对应页面。

如果仅拷贝 ec-canvas 目录，则将ec-canvas 目录看作是自定义组件使用即可。

创建图表

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

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

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 配置项文档。对于不熟悉 ECharts 的用户，可以参见 5 分钟上手 ECharts 教程。

完整的例子请参见 ecomfe/echarts-for-weixin 项目。

参考链接：

微信小程序中使用echarts

uni-app图表插件：ucharts

demo.ucharts.cn/#/

UI框架插件:vant-weapp

安装准备

初始化文件

npm init -y

安装node包

npm install --production

安装UI框架（以Vant为例）

npm i vant-weapp -S --production
然后在微信开发者工具中：详情>使用NPM模块；工具>构建npm;

构建成功

构建成功之后会生成miniprogram_npm，UI组件会在这个目录下。

使用

在要使用组件的页面配置json(以button组件为例）或者配置在全局app.json中

app.json:

 "usingComponents": {
   		"van-button":"/miniprogram_npm/vant-weapp/button",
      "NotData":"/pCompontents/notData/index"
 }

然后在WXML中就可以使用标签了；

<van-button style="" type='primary'>vant按钮</van-button>

小程序uni-app开发插件