wxcharts van-tabs

204 阅读1分钟

饼图

没有遇到什么值得说的问题,就正常使用就好,也没有用 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
        });
    }