本文已参与「新人创作礼」活动，一起开启掘金创作之路。
之前都是使用echarts给web端的后台管理系统做动态数据展示，忽然开发钉钉小程序，需要使用全新的F2 UI框架，里面还是有很多不同的地方，不过也都是大同小异，需要注意一下里面的小坑即可，还是要注意一定不要忘记给view设置宽高，可能调了半天问题就出在这。
效果：
踩过无数坑之后，终于实现了这个效果，直接上代码吧。
arrayUnqiue(arr, name) { // 传入参数 数组， 对象的名称(即对象数组里的属性)
let hash = {}
return arr.reduce((item, next) => {
// eslint-disable-next-line
hash[next[name]] ? '' : hash[next[name]] = true && item.push(next)
return item
}, [])
},
onInitChart1(F2, config) {
//处理数据
let a = this.data.biologyList
let arr = this.arrayUnqiue(a,'swTimeDate')
const data = [];
for (let i = 0; i < arr.length; i++) {
let qx = Number(arr[i].qxValue)
let obj = {
value: qx,
type: '情绪值',
date: arr[i].swTimeDate
}
data.push(obj)
let tl = Number(arr[i].tlValue)
let obj1 = {
value: tl,
type: '体力值',
date: arr[i].swTimeDate
}
data.push(obj1)
let zl = Number(arr[i].zlValue)
let obj2 = {
value: zl,
type: '智力值',
date: arr[i].swTimeDate
}
data.push(obj2)
}
//生成折线图
const chart = new F2.Chart(config);
chart.source(data);
chart.scale('date', {
type: 'timeCat',
tickCount: 3
});
chart.scale('value', {
tickCount: 5
});
chart.axis('date', {
label: function label(text, index, total) {
// 只显示每一年的第一天
const textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
custom: true, // 自定义 tooltip 内容框
onChange: function onChange(obj) {
const legend = chart.get('legendController').legends.top[0];
const tooltipItems = obj.items;
const legendItems = legend.items;
const map = {};
legendItems.forEach(function (item) {
map[item.name] = _.clone(item);
});
tooltipItems.forEach(function (item) {
const name = item.name;
const value = item.value;
if (map[name]) {
map[name].value = value;
}
});
legend.setItems(_.values(map));
},
onHide: function onHide() {
const legend = chart.get('legendController').legends.top[0];
legend.setItems(chart.getLegendItems().country);
}
});
chart.line().position('date*value').color('type');
chart.render();
},
<view class="f2-chart" a:if={{bloodList[0].cityNo}}>
<f2 onInit="onInitChart" onInit="{{onInitChart}}" class="container" style="height: 300px;"></f2>
<view style="margin-top:10rpx">
血压折线图
</view>
</view>
