麻烦老师看看，十万火急
来源：4-2 阅读器解析和渲染
Yuuuuuuuuu
2022-03-08
就是我在uniapp中使用了antvf2, 地址是这个(https://limeui.qcoon.cn/#/f2-example),里面有个x轴数据过大就开启平移的api,这个文档写的实在是不清楚，他有两个示例是可以平移的，我用的是折线图平移，老师能帮我看看是哪里出错了吗，万分感谢，就是不能平移。我用的是网上的一个方法，不对，老师如果弄出来帮我看看，数据格式就是我这样的，x轴是时间，而不是数字。
<template>
<view style="height: 750rpx">
<l-f2 ref="chart"></l-f2>
</view>
</template>
<script>
import F2 from '@/uni_modules/lime-f2/components/l-f2/f2-all.min.js';
export default {
data() {
return {
list: [{
"date": "2018-08-08",
"record": 166
},
{
"date": "2019-01-01",
"record": 174
},
{
"date": "2019-01-02",
"record": 166
},
{
"date": "2019-01-03",
"record": 166
},
{
"date": "2019-01-05",
"record": 187
},
{
"date": "2019-01-06",
"record": 189
},
{
"date": "2019-01-17",
"record": 156
},
{
"date": "2019-04-18",
"record": 231
}
]
};
},
mounted() {
// const data = await this.getData()
let $this = this
this.$refs.chart.init(config => {
const chart = new F2.Chart(config);
const a = 1000000000
var dataMap = $this.list.map((item, index) => {
return {
date: index + a,
record: item.record
}
})
console.log(dataMap)
var min = a,
max = a + 4,
tickCount = 5;
if (dataMap.length > 5) {
tickCount = 5;
chart.scrollBar({
mode: "x",
xStyle: {
backgroundColor: "#e8e8e8",
fillerColor: "#808080",
offsetY: -2
}
});
chart.interaction("pan");
} else if (dataMap.length == 1) {
max = a;
tickCount = 2;
chart.point().position("date*record").color("#FFB024");
} else {
max = dataMap.length + a - 1
tickCount = dataMap.length;
}
chart.source(dataMap,{
date: {
min:min,
max:max,
tickCount:tickCount
}
})
chart.axis('date', {
label: function label(text, index, total) {
const cfg = {
textAlign: 'center'
}
console.log(text)
cfg.text = $this.list[text-a].date
return cfg;
}
});
chart.line().position('date*record');
chart.point().position('date*record').style({
lineWidth: 1,
stroke: '#fff'
});
chart.render();
return chart;
});
},
methods: {
getData() {
return new Promise((resolve) => {
uni.request({
url: `https://gw.alipayobjects.com/os/antfincdn/Jpuku6k%24q%24/linear-pan.json`,
success: (res) => {
resolve(res.data)
}
})
})
}
}
}
</script>
1回答
-
扬_灵
2022-03-09
同学你好，方便把完整的项目代码发一下吗，这样好帮你定位问题。
022022-03-10
相似问题
回答 3
回答 2