Skip to content

Latest commit

 

History

History
126 lines (95 loc) · 3.95 KB

README.md

File metadata and controls

126 lines (95 loc) · 3.95 KB
Raw

wepy-f2

F2的在微信小程序原生和wepy框架下的插件，支持F2的所有功能，欢迎拍砖优化

快速体验在wepy的使用效果

  • 微信扫码体验 先别扫呢，打算放公司我负责的小程序，一想有点怕被人有打广告，，😂，，，稍后在贴一下自己的小程序吧，

本文参考了微信小程序的自定义组件的结构与echarts-for-weixin 的封装思路，同样吸收了wepy的调用原生组件的方式

最最关键是借鉴了antvis/wx-f2, 感谢以上项目coder的奉献，站在的巨人的肩膀上就是一个字，爽。

快速使用流程

书归正传

  1. 下载本项目，放到自己的项目的一个路径下，我就选了pages同级的目录了。提供一下我的目录供大家参考
src__
	├─ components
	├── mixins
	├── pages                			 // pages 在wepy生成的下的
	│   ├── pageA
	│   ├── pageB
	│   ├── pageC
	│   └── pageD                 
	│       ├── pageD-a.wpy  
	│       ├── pageD-b.wpy           
	│       └── pageD-c.wpy          
	├── wepy-f2 
	│                       // wepy-f2，如果下载的是wepy-f2-master,你就把文件夹名的master去掉
	├── static

  1. 在你所要用的wpy里，要做一下重要配置即可

    ** Step1 页面config 和import f2

     import F2 from '@/wepy-f2/lib/f2'。
 // 下文会用到F2，第一步先引进来
 // config的配置
 config = {
 	"usingComponents": {
 		"wepy-f2": "../../../wepy-f2/wepy-f2"
 	}
 }

    ** Step2 template里

     // template
 <template>
 	<wepy-f2 id="mycanvas" canvas-id="column" ></wepy-f2>  
 	// id='mycanvas' 是你要自定义的，一定要定义不要名字去，此id 必须填写
 	// 如果想要更改大小的生成的图的大小，也就是canvas大小，可以继续看
 	<wepy-f2 id="mycanvas" canvas-id="column" width="500" height="500" ></wepy-f2>  // 这是长宽都是px单位
 </template>

    在这一步里，就是id最重要，为了区分页面多个情况，请设置id，一定要设置不一样的id， 一定要，重要的事情说多了就是管用

    ** Step3 在methods方法外，记住是initChart 跟methods同级，它不在methods中。

    ```js
// initchart里写自己要用的图形配置什么的，详情请参考 [f2的api](https://www.yuque.com/antv/f2)		
initChart(canvas, width, height, soucreData) {
	let chart = null  
    chart = new F2.Chart({
      el: canvas,
      width,
      height
    });
    chart.source(soucreData, {
      date: {
        formatter: function (val) {
          return val.slice(val.indexOf('-') + 1)
        },
        range: [0,1]
      },
      score: {
      }
    });
    chart.axis('date', {
       grid: {
         lineDash: null,
         stroke: '#e8e8e8',
         lineWidth: 1
       }
     }) // 坐标轴配置
    chart.tooltip({
      showCrosshairs: true
    })
    chart.line({connectNulls: true}).position('date*score').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF')
    chart.area().position('date*score').color('l(0) 0:#F2C587 0.5:#ED7973 1:#8659AF');
    chart.point().position('date*score').color('red')
    chart.render();
	return chart
}

    

** Step4 前三都是为此步调用而存

  * 可以在methods里的方法调用，也可以在methods的同级调用， 不管在哪里请用，按照以下调用

 
	```js
 // 调用放法 
this.$wxpage.selectComponent('#mycanvas').init(this.initChart, sourceData)
this.$wxpage.selectComponent('#mycanvas') ‘#mycanvas’是选择在第二步里的id，我再次又一次提及，这个id很重要吧！！
init(this.initChart, sourceData), initChart这个函数方法携带了chart的配置，sourceData携带了原数据