饼图
没有遇到什么值得说的问题,就正常使用就好,也没有用 setData,直接调完接口赋值。 点击屏幕后,没有展示 tooltip,设置好 data 后会自动设置百分比, windowWidth 需要计算出来,不然整个页面都没办法交互的节奏,用的是 van-tabs,右边显示统计图
windowWith 调用微信的方法
let windowWidth = 'auto';
wx.getSystemInfo({
success: function (res){
windowWidth = res.windowWidth
}
})
pie chart 初始化
pieChart = new wxCharts({
animation: true,
canvasId: 'pieCanvas',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}, {
name: '成交量4',
data: 63,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 300,
dataLabel: true,
});
折线图
不能像饼图一样,直接在接口里赋值,最开始直接在接口里赋值的,整个页面都点不了, 一点一点删代码排查,发现是 linechart 的问题,解决办法就是在 onLoad 的时候把折线图初始化, 然后接口有返回值的时候调用 updateData 进行赋值
折线图初始化代码
lineChart = new wxCharts({
canvasId: 'lineCanvas',
type: 'line',
categories: [""],
animation: true,
title: {
name: "title测试"
},
subtitle : {
name: "sub title测试"
},
series: [{
name: '娘子',
data: [0],
format: function (val, name) {
return val && (val.toFixed(1) + 'h');
}
}],
xAxis: {
disableGrid: true,
title: '啊哈'
},
yAxis: {
title: '歌曲',
format: function (val) {
return val && val.toFixed(1);
},
min: 0
},
width: windowWidth,
height: 150,
dataLabel: false,
dataPointShape: true,
extra: {
lineStyle: 'curve'
}
});
updateData 赋值
// 有数据
if(lineData.length > 0){
const series = [{
name: '歌曲',
data: lineData && lineData.map(item=>item.sumTime),
format: function (val, name) {
return val && (val.toFixed(1) + 'h');
}
}];
lineChart.updateData({
categories: lineData && lineData.map(item=>Number(item.reportDate.split("-")[2])+"嗯"),
series: series
});
}else{
// 没有数据
const series = [{
name: '歌曲',
data: [0],
format: function (val, name) {
return val && (val.toFixed(1) + 'h');
}
}];
lineChart.updateData({
categories: [""],
series: series
});
}