正文
微信小程序折线图表折线图加区域图
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
1.先来个效果图
这里我用的是插件@antv/f2-canvas（安装的方法如下）
npm init 此处如果直接使用官方npm install 可能会出现没有node_modules错误
npm install --production 建议使用–production选项，可以减少安装一些业务无关的 npm 包，从而减少整个小程序包的大小
npm i @antv/f2-canvas 安装微信小程序 F2 图表组件
安装好依赖包之后，运行 （点击开发者工具顶部详情，勾选 使用npm模块，再点击菜单栏中工具下的构建npm即可运行）
json文件里加这个
"usingComponents": {
"ff-canvas": "@antv/f2-canvas"
}
js文件
const F2 = require('@antv/wx-f2');
let chart = null;
page({
data:{
opts: {
lazyLoad: true
},
},
// 折线图
getMothElectro: function (type) {
let that = this;
// 体重曲线表
app.post('/user/Charts', {
type: type
}).then((res) => {
// console.log(res)
that.setData({
list: res.data.list
})
//这里是把后台返的数据做一下处理 let arr = [];
let array1 = [];
let array2 = [];
let weightArr = [];
// for (let value of res.chart) {
for (let i = 0; i < res.chart.length; i++) {
let value = res.chart[i];
if (value.weight == '') {
value.weight = null;
} else {
value.weight = value.weight;
weightArr.push(value.weight);
} let item = {
city: '',
date: value.date,
areaValue: [(value.low.toFixed(2)) * 1, value.hign.toFixed(2) * 1]
}
let item1 = {
city: '',
date: value.date,
weight: value.weight
}
array1.push(item)
array2.push(item1)
arr = array1.concat(array2)
} this.chartComponent = this.selectComponent('#column-dom');
this.chartComponent.init((canvas, width, height) => { //这里是计算y轴坐标可以跟着数据变，区间小一点，自适应数据
var min = ((Math.min.apply(Math, weightArr)).toFixed(1)) * 1;
var max = ((Math.max.apply(Math, weightArr)).toFixed(1)) * 1;
if (max - min <= 10) {
max = max + 2;
}
if (min % 5 == 0) {
min = min - 2;
}
if (min > res.chart[0].low) {
min = parseInt(res.chart[0].low);
}
if (max < res.chart[res.chart.length - 1].hign) {
max = parseInt(res.chart[res.chart.length - 1].hign);
} let max3 = (((max - min) / 3) * 1 + min).toFixed(1); chart = new F2.Chart({
el: canvas,
width,
height
}); chart.source(arr, {
date: {
range: [0, 1],
type: 'timeCat',
mask: 'MM/DD',
tickCount: 5,
},
weight: {
type: 'linear',
tickCount: 4,
ticks: [min, max3, (max - max3 + min).toFixed(1) * 1, max],
formatter: function formatter(ivalue) {
return ivalue + 'kg';
}
},
areaValue: {
type: 'linear',
tickCount: 4,
ticks: [min, max3, (max - max3 + min).toFixed(1) * 1, max],
formatter: function formatter(ivalue) {
return ivalue + 'kg';
}
}, });
chart.axis('areaValue', false);//这里的图表是双y轴，所以隐藏一个，把右边的隐藏 chart.line({
connectNulls: true // 配置，连接空值数据
}).position('date*weight').shape('smooth').color('city', ['#EF597F']);
chart.point({
connectNulls: true // 配置，连接空值数据
}).position('date*weight').color('city', ['#EF597F']).style({
// stroke: '#EF597F',
// lineWidth: 1
}); chart.area({
connectNulls: true // 配置，连接空值数据
}).position('date*areaValue').shape('smooth').color('city', ['#2ECBB1', '#2ECBB1']); chart.legend(false);
chart.tooltip(false);
chart.render();
// 注意：需要把chart return 出来
return chart;
}) }) },
})
你的数据格式是这个样子的（如果返回格式不一致可自行处理）
这个City字段，你也可以写标题，如果不写，就是后面图表配置颜色有个空字段，不然你的图表没有颜色，用其他非空的字段可能会报错，配置可以看@antv的官网，这是两个图表结合的
wxml文件
<view class="container_canvas">
<ff-canvas id="column-dom" canvas-id="column" opts="{{ opts }}" />
</view>
