1.根据官方文档仅有的部分内容,可知,不管是折线图,柱状图还是饼图,数据都要使用它规定的数据格式才可以。
下面开始写我所用到的图表
1.双Y轴双折线图的写法
效果:
//注意部分:数据带有双引号,Y轴上不会从小到大排列
import F2 from '../../../f2-canvas/lib/f2';
const app = getApp()
let chart = null;
function initChart(canvas, width, height,) { // 使用 F2 绘制图表
const data =[{time:'07:00:00--07:59:69', kdj:200, kll:199},
{time:'07:00:00--07:59:69', kdj:200, kll:199},
{time:'07:00:00--07:59:69', kdj:200, kll:199}
{time:'07:00:00--07:59:69', kdj:200, kll:199}
]; //这里是我新展示的假数据,数据格式就是这个格式
console.log(data);
chart = new F2.Chart({
el: canvas,
width,
height,
options:{
legend:true
}
});
if(data.length<=4){
chart.source(data, {
time: {
alias: '日期',
tickCount: 2,
},
kdj: {
alias: '客单价',
tickCount:4,
},
kll: {
alias: '客流量',
tickCount:4,
}
});
}else{
chart.source(data, {
time: {
alias: '日期', // 列定义,定义该属性显示的别名
tickCount: 3,
},
kdj: {
alias: '客单价',
tickCount:7,
},
kll: {
alias: '客流量',
tickCount:7,
}
});
}
// 图例
chart.legend({
custom: true,
position: "top",
flipPage: false,
items: [
{
name: "客单价",
marker: {
symbol: "square",
fill: "#8e95fe"
},
},
{
name: "客流量",
marker: {
symbol: "circle",
fill: "#fcdb57"
},
}
]
});
chart.axis('kll', {
grid: null
});
chart.line().position('time*kdj').color('#8e95fe').shape('left');
chart.point().position('time*kdj').color('#8e95fe');
chart.line().position('time*kll').color('#fcdb57').shape('right');
chart.point().position('time*kll').color('#fcdb57');
chart.render();
return chart;
}
Page({
data: {
opts: {
onInit: initChart
}
},
onReady() {
}
});
如果后台返回的数据带有双引号,可以处理一下(这里是我把我的数据处理成需要使用的数据格式)
var that=this;
var list=that.data.dataList;
var newlist=[];
for (var i = 0; i < list.length; i++) { //去掉数组中个别数据的双引号
var obj=list[i]
for (var prop in obj) {
if(prop=="kdj"){
if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {
obj[prop] = +obj[prop];
}
}
if(prop=="kll"){
if (obj.hasOwnProperty(prop) && obj[prop] !== null && !isNaN(obj[prop])) {
obj[prop] = +obj[prop];
}
}
}
newlist.push(obj)
}
//这样打印出来的数据就不会有双引号了
2, wxml内容部分
使用 ff-canvas 组件,其中 opts 是一个我们在 index.js 中定义的对象,必设属性,它使得图表能够在页面加载后被初始化并设置。
<view class="pieSelect">
<ff-canvas canvas-id="column" opts="{{opts}}"></ff-canvas>
</view>
//这里ff-canvas是json里引入的组件名,json引入就不再写了
3.使用f2经常会报的错
出现这个错的情况,就是你没有给图标加高度,且只可使用class,使用id小程序上可以显示,但是再真机上调试时,图表不显示,且还会报这个错
.pieSelect {
width: 100%;
height: 500rpx;
}