samehome/components/kline/kline.vue

<template>
	<view>
		<view class="tab">
			<view class="item" :class="{ select: type === '1min' }" @click="onChangeType('1min')">1min
			</view>
			<view class="item" :class="{ select: type === '5min' }" @click="onChangeType('5min')">5min
			</view>
			<view class="item" :class="{ select: type === '15min' }" @click="onChangeType('15min')">15min
			</view>
			<view class="item" :class="{ select: type === '30min' }" @click="onChangeType('30min')">30min
			</view>
			<view class="item" :class="{ select: type === '60min' }" @click="onChangeType('60min')">60min
			</view>
			<view class="item" :class="{ select: type === '1day' }" @click="onChangeType('1day')">1day
			</view>
			<view class="item" :class="{ select: type === '1week' }" @click="onChangeType('1week')">1week
			</view>
			<view class="item" :class="{ select: type === '1mon' }" @click="onChangeType('1mon')">1mon
			</view>
		</view>
		<view id="kline" :windowWidth="width" :change:windowWidth="KlineJs.setWidth" :windowHeight="height"
			:change:windowHeight="KlineJs.setHeight" :symbol="symbol"
			:change:symbol="KlineJs.setSymbol"  :language="language" :change:language="KlineJs.changlanguage" :index_activeCycle="index_activeCycle" :change:index_activeCycle="KlineJs.changindex_activeCycle"></view>
	</view>
</template>

<script>
	import props from './props.js'
	export default {
		name: "kline",
		mixins: [props],
		data() {
			return {
				type:'1min',
				index_activeCycle:1
			};
		},
		created() {

		}
		,methods: {
			onChangeType(type) {
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('1min')">1min
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('5min')">5min
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('15min')">15min
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('30min')">30min
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('60min')">60min
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('1day')">1day
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('1week')">1week
				// </view>
				// <view class="item" :class="{ select: type === '' }" @click="onChangeType('1mon')">1mon
				// </view>
				this.type = type
				switch(type){
					case '1min':
					this.index_activeCycle=1;
					break;
					case '5min':
					this.index_activeCycle=5;
					break;
					case '15min':
					this.index_activeCycle=15;
					break;
					case '30min':
					this.index_activeCycle=30;
					break;
					case '60min':
					this.index_activeCycle=60;
					break;
					case '1day':
					this.index_activeCycle='1D';
					break;
					case '1week':
					this.index_activeCycle='1W';
					break;
					case '1mon':
					this.index_activeCycle='1M';
					break;
				}
			},
		}
	}
</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'

	export default {
		data() {
			return {
				chartHeight: 0,
				chartWidth: 0,
				chartSymbol:'btc',
				language:'en'
			}
		},
		//该生命周期慢于不是renderjs的生命周期
		mounted() {
			//初始化图表
			this.initChart("1")
		},
		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
			},
			changindex_activeCycle(index_activeCycle){
				this.initChart(index_activeCycle)
			},
			changlanguage(language){
				this.language=language
			}
			,
			initChart(index_activeCycle) {
				// chartConfig 在chartConfig.js里面
				// 给chartConfig添加展示周期
				chartConfig.interval = index_activeCycle
				// 给chartConfig添加展示产品
				chartConfig.symbol = this.symbol
				chartConfig.resolutions=[1];
				//设置图表宽高
				chartConfig.width = this.chartWidth
				chartConfig.height = this.chartHeight
				chartConfig.time_frames=[]
				// 初始化 TradingView
				//console.log(window.TradingView.version())
				
				
				
				widgetObj = new widget(chartConfig)
				//console.log(11111,widgetObj)
				widgetObj._options.interval=5
				widgetObj.onChartReady(() => {
					// 这是k线图 展示的 7日均线和30日均线。
					widgetObj.chart().createStudy('Moving Average', false, false, [5], null, {
						'Plot.linewidth': 2,
						'Plot.color': '#2ba7d6'
					})
					widgetObj.chart().createStudy('Moving Average', false, false, [10], null, {
						'Plot.linewidth': 2,
						'Plot.color': '#98588a'
					})
					widgetObj.chart().createStudy('Moving Average', false, false, [20], null, {
						'Plot.linewidth': 2,
						'Plot.color': '#3a714a'
					})
					widgetObj.chart().createStudy('Moving Average', false, false, [30], null, {
						'Plot.linewidth': 2,
						'Plot.color': '#965fc4'
					})
					this.$nextTick(() => {
						widgetObj.chart().resetData()
					})
				})
			},

		}
	}
</script>
<style lang="scss" scoped>
	.tab {
		display: flex;
		background: #000000;
	.item {
		height: 64rpx;
		line-height: 64rpx;
		flex: 1;
		font-size: 24rpx;
		text-align: center;
		
		&.select {
			background: rgba(0, 232, 162, 0.3);
			border-radius: 19px;
		}
	}
		
	
	
	}
	
</style>