天猫精灵IoT开放平台
F2 可视化方案 折线图 和 曲线图
更新时间：2019/03/15
访问次数：1203
F2 文档
ui 组件中集成了 F2 移动端可视化方案 文档中写了俩个简单的 折线图和曲线图的 demo 具体需要使用查看F2 的官方文档
效果展示
代码示例
<template>
<div>
<canvas id="brokenLine" height="260"></canvas>
<br/><br/><br/>
<canvas id="brokenLine2" height="260"></canvas>
</div>
</template>
<script>
import F2 from '@antv/f2'
export default {
created() {
this.$nextTick(() => {
this.setNavbar(); // 设置topbar
// 画折线图
this.playBrokenLine();
// 画曲线图
this.playCurve();
});
},
data () {
return {
list: [{
day: '周一',
value: 300
}, {
day: '周二',
value: 400
}, {
day: '周三',
value: 350
}, {
day: '周四',
value: 500
}, {
day: '周五',
value: 490
}, {
day: '周六',
value: 600
}, {
day: '周日',
value: 900
}],
list2: [{
time: '2016-08-08 00:00:00',
tem: 10
}, {
time: '2016-08-08 00:10:00',
tem: 22
}, {
time: '2016-08-08 00:30:00',
tem: 20
}, {
time: '2016-08-09 00:35:00',
tem: 26
}, {
time: '2016-08-09 01:00:00',
tem: 20
}, {
time: '2016-08-09 01:20:00',
tem: 26
}, {
time: '2016-08-10 01:40:00',
tem: 28
}, {
time: '2016-08-10 02:00:00',
tem: 20
}, {
time: '2016-08-10 02:20:00',
tem: 18
}]
}
},
methods: {
setNavbar(){
AI.setNavbar({
title: 'F2折线图',
})
},
// 画折线图
playBrokenLine() {
var chart = new F2.Chart({
id: 'brokenLine',
pixelRatio: window.devicePixelRatio
});
chart.source(this.list, {
value: {
tickCount: 5,
min: 0
},
day: {
range: [0, 1]
}
});
chart.tooltip({
showCrosshairs: true,
showItemMarker: false,
onShow: function onShow(ev) {
var items = ev.items;
items[0].name = null;
items[0].value = '$ ' + items[0].value;
}
});
chart.axis('day', {
label: function label(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.line().position('day*value');
chart.point().position('day*value').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
},
// 绘制曲线图
playCurve() {
var chart = new F2.Chart({
id: 'brokenLine2',
pixelRatio: window.devicePixelRatio
});
var defs = {
time: {
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [0, 1]
},
tem: {
tickCount: 5,
min: 0,
alias: '日均温度'
}
};
chart.source(this.list2, defs);
chart.axis('time', {
label: function label(text, index, total) {
var textCfg = {};
if (index === 0) {
textCfg.textAlign = 'left';
} else if (index === total - 1) {
textCfg.textAlign = 'right';
}
return textCfg;
}
});
chart.tooltip({
showCrosshairs: true
});
chart.line().position('time*tem').shape('smooth');
chart.point().position('time*tem').shape('smooth').style({
stroke: '#fff',
lineWidth: 1
});
chart.render();
}
}
}
</script>
<style>
#brokenLine, #brokenLine2{
width: 100%;
}
</style>