《微信小程序》-图表组件方案调研wxml忘了width、height，会白板哦项目跟路径，添加package.json

背景介绍

* 目前不支持svg
* 主要以canvas为主

echarts

依赖包下载本地

git clone https://github.com/ecomfe/echarts-for-weixin.git

复制ec-canvas,到小程序项目根路径下

引入组件

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

配置option、wxml等

<view class="container">
    <ec-canvas id="mychart-dom-bar" style="width:100%;height:300px;" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

//option
var option = {
    title: {
    text: 'ECharts 入门示例- Bar'
    },
    tooltip: {},
    legend: {
    top:30,
    data: ['销量']
    },
    xAxis: {
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
    }]
}

展示结果
注意点
- wxml忘了width、height，会白板哦

F2

项目跟路径，添加package.json
```
npm init -y
```
配置npm构建
尝试构建是否成功
移除es6语法糖-runtime模块
```
npm install @antv/wx-f2 --save
```
再次构建

编写wxml、js

<view class="container">
 <f2 class="f2-chart" onInit="{{onInitChart}}" />
</view>

引入组件

{
    "usingComponents": {
      "f2": "@antv/wx-f2"
    }
}

展示结果

个人使用总结

echarts
- api 文档完善，技术成熟
- 封装的程度高些，入手门槛高点
F2
- 后起之秀，样式美观
- api 未知问题，可能未发现，高度定制的需要谨慎
- 入手门槛不高，容易理解

Demo代码已上传GitHub

传送门