[微信小程序] 使用AntV F2 绘制双Y轴

F2的官方给了一个示例 https://github.com/antvis/wx-f2 ，但是不够清晰和简洁，所以我自己简单改造了一下，供大家参考

代码运行环境是在 微信小程序里 执行的，按照官方文档的写法，放在了 “data” 对象里

wxml 代码：

<view class="f2-chart 要设置高度">
	<f2 id="chartView" onInit="{{ onInitChart }}" />
</view>

js 代码

Page({
	data: {
		// 动态改变chart数据 getCurrentPages()[0].data.chartData
		chartData: [],
		// 小程序里的初始化
		onInitChart(F2, config) {
			// 后边如果要更改data的值则需要用组件的实例 this.selectComponent('#chartView')
		    const chart = new F2.Chart(config)
		    // 图表数据，格式要对上，数值类型必须是数字不能是字符串。要用小程序里的数据则改为getCurrentPages()[0].data.chartData
		    const data = [
			    { day: '2020/12/01', value1: 500, value2: 51 }
			    { day: '2020/12/02', value1: 600, value2: 66 }
			    { day: '2020/12/03', value1: 300, value2: 34 }
		    ]
		    // 装载数据data, 开启自定义列配置
		    chart.source(data, {
		        day: {
		        	type: 'timeCat', //timeCat时间类型，其余参见官方说明的Scale参数
		        	sortable: false, //关闭排序，优化加载速度
		        	tickCount: 7, //坐标轴上刻度点的个数
		        	mask: 'MM-DD' //格式化日期显示
		        },
		        value1: {
		        	type: 'linear', //连续的数字类型，其余参见官方说明的Scale参数
		        	alias: '消耗', //指定该数据字段的显示别名
		        	tickCount: 5, //坐标轴上刻度点的个数
		        }，
		        value2: {
		        	type: 'linear', //连续的数字类型，其余参见官方说明的Scale参数
		        	alias: '曝光数', //指定该数据字段的显示别名
		        	tickCount: 5, //坐标轴上刻度点的个数
		        }
		    })
		    // 图例配置
		    chart.legend({
		    	custom: true, //开启用户自定义图例，false时使用程序默认配置
		    	position: "top", //设置图例的显示位置
		    	items: [ //图例项，该属性是一个对象数组
		    		{
		    			name: "消耗",
		    			marker: { symbol: "circle", fill: "red" }
		    		},
		    		{
		    			name: "曝光数",
		    			marker: { symbol: "circle", fill: "blue" }
		    		}
		    	]
		    })
		    // 坐标轴配置 根据自己的需要配置就好，参照官方文档Axis参数
		    chart.axis('day', {})
		    // 绘制图形line线条，指定X坐标day和Y坐标value1，颜色填充red
		    chart.line().position('day*value1').color('red')
		    // 绘制图形point点，指定X坐标day和Y坐标value1，颜色填充red
		    chart.point().position('day*value1').color('red')
		    // 绘制图形line线条，指定X坐标day和Y坐标value2，颜色填充blue
		    chart.line().position('day*value2').color('blue')
		    // 绘制图形point点，指定X坐标day和Y坐标value2，颜色填充blue
		    chart.point().position('day*value2').color('blue')
		    // 渲染图表
		    chart.render()
		    // 需要把chart return 出来
		    return chart
		}
	}
	// 生命周期函数
	onLoad: function(options) {},
	// 改变图表数据
	changeChartData: function() {
		const ary = '这里获取后端发送AJAX请求回来的数据，并改造格式'
		const chartComponent = this.selectComponent('#chartView')
		chartComponent.chart.changeData(ary)
	}
})