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)
}
})