164 lines
3.2 KiB
Vue
164 lines
3.2 KiB
Vue
<template>
|
|
<view class="kline">
|
|
<l-f2 ref="chart"></l-f2>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
|
|
import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
|
|
export default {
|
|
components: {
|
|
lF2,
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
async mounted() {
|
|
let data = await this.getData()
|
|
// 绘制K线
|
|
this.$refs.chart.init(config => {
|
|
data = data.slice(0, 150);
|
|
const BASIC_PRICE = 6.95;
|
|
data.sort(function(obj1, obj2) {
|
|
return obj1.time > obj2.time ? 1 : -1;
|
|
});
|
|
data.forEach(function(obj) {
|
|
obj.range = [obj.start, obj.end, obj.max, obj.min];
|
|
obj.trend = obj.start <= obj.end ? 0 : 1;
|
|
});
|
|
const chart = new F2.Chart(Object.assign(config));
|
|
chart.source(data, {
|
|
range: {
|
|
tickCount: 5,
|
|
formatter: function formatter(val) {
|
|
return val.toFixed(2);
|
|
}
|
|
},
|
|
time: {
|
|
tickCount: 3
|
|
}
|
|
});
|
|
chart.tooltip({
|
|
showCrosshairs: true,
|
|
showXTip: true,
|
|
showYTip: true,
|
|
crosshairsType: 'xy',
|
|
custom: true,
|
|
yTip: function yTip(val) {
|
|
return {
|
|
text: val.toFixed(2),
|
|
fill: '#333',
|
|
fontSize: 10
|
|
};
|
|
},
|
|
|
|
xTip: {
|
|
fill: '#333',
|
|
fontSize: 10
|
|
},
|
|
xTipBackground: {
|
|
fill: '#EDF2FE'
|
|
},
|
|
yTipBackground: {
|
|
fill: '#EDF2FE'
|
|
},
|
|
crosshairsStyle: {
|
|
stroke: '#0F8DE8'
|
|
}
|
|
});
|
|
chart.axis('range', {
|
|
grid: {
|
|
stroke: '#ddd',
|
|
lineWidth: 1,
|
|
lineDash: null
|
|
},
|
|
label: {
|
|
fill: '#999'
|
|
}
|
|
});
|
|
chart.axis('time', {
|
|
label: function label(text, index, total) {
|
|
const textCfg = {
|
|
fill: '#999'
|
|
};
|
|
if (index === 0) {
|
|
textCfg.textAlign = 'left';
|
|
}
|
|
if (index === total - 1) {
|
|
textCfg.textAlign = 'right';
|
|
}
|
|
return textCfg;
|
|
},
|
|
|
|
grid: {
|
|
lineWidth: 1,
|
|
stroke: '#ddd'
|
|
}
|
|
});
|
|
chart.guide().line({
|
|
start: ['min', BASIC_PRICE],
|
|
end: ['max', BASIC_PRICE],
|
|
style: {
|
|
lineDash: [8],
|
|
stroke: '#F68300'
|
|
}
|
|
});
|
|
chart.guide().text({
|
|
position: ['min', BASIC_PRICE],
|
|
content: BASIC_PRICE,
|
|
style: {
|
|
fill: '#808080',
|
|
textAlign: 'start',
|
|
textBaseline: 'bottom',
|
|
fontSize: 10,
|
|
fontWeight: 'bold'
|
|
},
|
|
offsetX: 2
|
|
});
|
|
chart.guide().rect({
|
|
start: ['0%', '0%'],
|
|
end: ['100%', '100%'],
|
|
style: {
|
|
stroke: '#ddd',
|
|
lineWidth: 1,
|
|
fill: '#fff',
|
|
opacity: 1,
|
|
fillOpacity: 0
|
|
}
|
|
});
|
|
chart.schema()
|
|
.position('time*range')
|
|
.color('trend', function(trend) {
|
|
return ['#F4333C', '#1CA93D'][trend];
|
|
})
|
|
.shape('candle');
|
|
chart.render();
|
|
return chart;
|
|
});
|
|
},
|
|
methods: {
|
|
getData() {
|
|
// plus.screen.lockOrientation('landscape-primary')
|
|
return new Promise((resolve) => {
|
|
uni.request({
|
|
url: 'https://gw.alipayobjects.com/os/antfincdn/c4ROEPcthk/candle-sticks.json',
|
|
success: (res) => {
|
|
resolve(res.data)
|
|
}
|
|
})
|
|
})
|
|
}
|
|
},
|
|
onUnload() {
|
|
console.log('222')
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.kline{
|
|
}
|
|
</style>
|