You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
2.4 KiB
104 lines
2.4 KiB
<template>
|
|
<view>
|
|
<view id="kline" :windowWidth="width" :change:windowWidth="KlineJs.setWidth" :windowHeight="height"
|
|
:change:windowHeight="KlineJs.setHeight" :symbol="symbol"
|
|
:change:symbol="KlineJs.setSymbol"></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import props from './props.js'
|
|
export default {
|
|
name: "kline",
|
|
mixins: [props],
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
created() {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script module="KlineJs" lang="renderjs">
|
|
import {
|
|
widget
|
|
} from '@/static/charting_library/charting_library.js'
|
|
import {
|
|
chartConfig
|
|
} from './tradingView/chartConfig.js'
|
|
|
|
// 图表库实例化后储存的函数
|
|
var widgetObj = null
|
|
// 进入页面 默认展示的产品
|
|
var index_market = 'btcusdt'
|
|
// 进入页面 默认展示的产品周期
|
|
var index_activeCycle = '1'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
chartHeight: 0,
|
|
chartWidth: 0,
|
|
chartSymbol:'btc'
|
|
}
|
|
},
|
|
//该生命周期慢于不是renderjs的生命周期
|
|
mounted() {
|
|
//初始化图表
|
|
this.initChart()
|
|
},
|
|
methods: {
|
|
setSymbol(symbol){
|
|
console.log(symbol)
|
|
this.chartSymbol=symbol
|
|
},
|
|
setWidth(width) {
|
|
console.log("可用窗口宽度:", width)
|
|
this.chartWidth = width
|
|
},
|
|
setHeight(height) {
|
|
console.log("可用窗口高度:", height)
|
|
this.chartHeight = 300
|
|
},
|
|
initChart() {
|
|
// chartConfig 在chartConfig.js里面
|
|
// 给chartConfig添加展示周期
|
|
chartConfig.interval = index_activeCycle
|
|
chartConfig.intervals = ['1','5']
|
|
// 给chartConfig添加展示产品
|
|
chartConfig.symbol = this.symbol
|
|
//设置图表宽高
|
|
chartConfig.width = this.chartWidth
|
|
chartConfig.height = this.chartHeight
|
|
// 初始化 TradingView
|
|
console.log(window.TradingView.version())
|
|
const language = uni.getStorageSync("language")|| 'en_US';
|
|
if(language.indexOf('zh')>-1){
|
|
chartConfig.locale=language
|
|
}else{
|
|
chartConfig.locale=language.split('_')[0]
|
|
}
|
|
|
|
|
|
widgetObj = new widget(chartConfig)
|
|
console.log(widgetObj)
|
|
widgetObj.onChartReady(() => {
|
|
// 这是k线图 展示的 7日均线和30日均线。
|
|
widgetObj.chart().createStudy('Moving Average', false, false, [5], null, {
|
|
'Plot.linewidth': 2,
|
|
'Plot.color': '#2ba7d6'
|
|
})
|
|
|
|
this.$nextTick(() => {
|
|
widgetObj.chart().resetData()
|
|
})
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|