背景介绍

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

echarts

• 依赖包下载本地
  

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

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

• 引入组件

  1 2 3 4 5

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

• 配置option、wxml等

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  <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

  1	npm init -y

• 配置npm构建
  
  

• 尝试构建是否成功
  

• 移除es6语法糖-runtime模块
  

  1	npm install @antv/wx-f2 --save

• 再次构建
  

• 编写wxml、js

  1 2 3

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

• 引入组件

  1 2 3 4 5

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

• 展示结果
  

个人使用总结

• echarts

  • api 文档完善，技术成熟
  • 封装的程度高些，入手门槛高点

• F2

  • 后起之秀，样式美观
  • api 未知问题，可能未发现，高度定制的需要谨慎
  • 入手门槛不高，容易理解

Demo代码已上传GitHub

• 传送门