319 lines
7.0 KiB
Vue
319 lines
7.0 KiB
Vue
<template>
|
||
<view>
|
||
<navBar :leftText="navTitle"></navBar>
|
||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||
<view class="tabC fixed" :style="'top:'+navH+'px;'">
|
||
<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
|
||
{{item}}
|
||
<view v-if="selectCategory==index" class="line absolute"></view>
|
||
</view>
|
||
</view>
|
||
<view class="contentC fixed" :style="'top:'+contentTop+'px;'">
|
||
<view style="width:750rpx; height:400rpx">
|
||
<l-echart ref="chartRef"></l-echart>
|
||
</view>
|
||
<view class="section">关联描述</view>
|
||
<view class="des">全球原油运输巨头，VLCC运力规模全球第一，直接受益于霍尔木兹海峡地缘风险带来的运价上涨及风险溢价。</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { inject } from 'vue';
|
||
import { stockCandlestickChartData, stockDetails } from '@/request/api';
|
||
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
navH:inject('navHeight'),
|
||
contentTop:'',
|
||
navTitle:'',
|
||
stockCode:'', //股票code
|
||
categoryList:['分钟线','分时图','日K线'],
|
||
selectCategory:0,
|
||
option:{
|
||
title: {
|
||
show:false
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross'
|
||
}
|
||
},
|
||
legend: {
|
||
show:false
|
||
},
|
||
grid: {
|
||
left: '10%',
|
||
right: '10%',
|
||
bottom: '15%'
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: [],
|
||
boundaryGap: false,
|
||
axisLine: { onZero: false },
|
||
splitLine: { show: false },
|
||
min: 'dataMin',
|
||
max: 'dataMax'
|
||
},
|
||
yAxis: {
|
||
scale: true,
|
||
splitArea: {
|
||
show: true
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
start: 50,
|
||
end: 100
|
||
},
|
||
{
|
||
show: true,
|
||
type: 'slider',
|
||
top: '90%',
|
||
start: 50,
|
||
end: 100
|
||
}
|
||
],
|
||
series: [
|
||
{
|
||
name: '日K',
|
||
type: 'candlestick',
|
||
data: [],
|
||
itemStyle: {
|
||
color: '#ec0000',
|
||
color0: '#8A0000',
|
||
borderColor: '#00da3c',
|
||
borderColor0: '#008F28'
|
||
},
|
||
markPoint: {
|
||
label: {
|
||
formatter: function (param) {
|
||
return param != null ? Math.round(param.value) + '' : '';
|
||
}
|
||
},
|
||
data: [
|
||
{
|
||
name: 'Mark',
|
||
coord: ['2013/5/31', 2300],
|
||
value: 2300,
|
||
itemStyle: {
|
||
color: 'rgb(41,60,85)'
|
||
}
|
||
},
|
||
{
|
||
name: 'highest value',
|
||
type: 'max',
|
||
valueDim: 'highest'
|
||
},
|
||
{
|
||
name: 'lowest value',
|
||
type: 'min',
|
||
valueDim: 'lowest'
|
||
},
|
||
{
|
||
name: 'average value on close',
|
||
type: 'average',
|
||
valueDim: 'close'
|
||
}
|
||
],
|
||
tooltip: {
|
||
formatter: function (param) {
|
||
return param.name + '<br>' + (param.data.coord || '');
|
||
}
|
||
}
|
||
},
|
||
markLine: {
|
||
symbol: ['none', 'none'],
|
||
data: [
|
||
[
|
||
{
|
||
name: 'from lowest to highest',
|
||
type: 'min',
|
||
valueDim: 'lowest',
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
label: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
},
|
||
{
|
||
type: 'max',
|
||
valueDim: 'highest',
|
||
symbol: 'circle',
|
||
symbolSize: 10,
|
||
label: {
|
||
show: false
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
}
|
||
}
|
||
],
|
||
{
|
||
name: 'min line on close',
|
||
type: 'min',
|
||
valueDim: 'close'
|
||
},
|
||
{
|
||
name: 'max line on close',
|
||
type: 'max',
|
||
valueDim: 'close'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
]
|
||
},
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.contentTop = this.navH+(60+10)/750*inject('windowWidth')
|
||
if(e.code)
|
||
{
|
||
this.stockCode = e.code
|
||
this.getStockDetailsData()
|
||
this.getStockCandlestickChartData()
|
||
}
|
||
},
|
||
methods: {
|
||
async init() {
|
||
// chart 图表实例不能存在data里
|
||
const chart = await this.$refs.chartRef.init(echarts);
|
||
chart.setOption(this.option)
|
||
},
|
||
/**
|
||
* 点击切换分类
|
||
* @param {Object} index
|
||
*/
|
||
clickCategoryItem(index)
|
||
{
|
||
if(this.selectCategory!=index)
|
||
{
|
||
this.selectCategory = index
|
||
if(index==0||index==2)
|
||
{
|
||
this.getStockCandlestickChartData()
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
* 获取股票详情数据
|
||
*/
|
||
getStockDetailsData()
|
||
{
|
||
let stockCode = this.stockCode
|
||
stockDetails(stockCode).then(res=>{
|
||
if(res.code==200)
|
||
{
|
||
this.navTitle = res.data.basic_info.stock_name+'('+res.data.basic_info.stock_code+')'
|
||
}else
|
||
uni.showToast({
|
||
title:res.message,
|
||
icon:'none'
|
||
})
|
||
}).catch(error=>{
|
||
|
||
})
|
||
},
|
||
/**
|
||
* 获取股票K线数据
|
||
*/
|
||
getStockCandlestickChartData()
|
||
{
|
||
let stockCode = this.stockCode
|
||
let param = {chart_type:'minute'}
|
||
if(this.selectCategory==2)
|
||
{
|
||
param.chart_type = 'daily'
|
||
}
|
||
stockCandlestickChartData(stockCode,param).then(res=>{
|
||
let data = res.data
|
||
let categoryData = []
|
||
for (let item of data) {
|
||
categoryData.push(item.time)
|
||
}
|
||
this.option.xAxis.data = categoryData
|
||
this.init()
|
||
}).catch(error=>{
|
||
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.topBg
|
||
{
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
.tabC
|
||
{
|
||
background-color: white;
|
||
margin-top: 10rpx;
|
||
left: 0;
|
||
right: 0;
|
||
border-radius: 20rpx 20rpx 0 0;
|
||
.item
|
||
{
|
||
display: inline-block;
|
||
padding: 0 30rpx;
|
||
line-height: 60rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 500;
|
||
color: #42485B;
|
||
}
|
||
.item.select
|
||
{
|
||
font-weight: bold;
|
||
color: #F97316;
|
||
.line
|
||
{
|
||
background-color: #F97316;
|
||
left: calc((100% - 50rpx)/2);
|
||
bottom: 0;
|
||
width: 50rpx;
|
||
height: 2rpx;
|
||
}
|
||
}
|
||
}
|
||
.contentC
|
||
{
|
||
background-color: white;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
.section
|
||
{
|
||
padding: 0 28rpx;
|
||
line-height: 80rpx;
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #222;
|
||
}
|
||
.des
|
||
{
|
||
padding: 0 30rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
color: #666;
|
||
}
|
||
|
||
}
|
||
</style>
|