594 lines
16 KiB
Vue
594 lines
16 KiB
Vue
<template>
|
||
<div class="custom-echarts">
|
||
<div>
|
||
<div class="echarts-header">
|
||
<div class="echarts-header-title">
|
||
<span>FiEE, Inc. Stock Price History</span>
|
||
</div>
|
||
<div class="echarts-search-area">
|
||
<div class="echarts-search-byRange">
|
||
<text style="font-size: 0.9rem; font-weight: 400; color: #666666;">
|
||
Range
|
||
</text>
|
||
<div class="search-range-list">
|
||
<div
|
||
class="search-range-list-each"
|
||
v-for="(item, index) in state.searchRange"
|
||
:key="index"
|
||
@click="changeSearchRange(item)"
|
||
>
|
||
<span>{{ item }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="echarts-search-byDate">
|
||
<n-date-picker
|
||
v-model:value="state.selectHistoricStartDate"
|
||
type="date"
|
||
:is-date-disabled="disableAfterDate"
|
||
@update:value="changeSearchRangeStartDate"
|
||
input-readonly
|
||
/>
|
||
<!-- <n-icon size="16">
|
||
<ArrowForwardOutline />
|
||
</n-icon> -->
|
||
<span>to</span>
|
||
<n-date-picker
|
||
v-model:value="state.selectHistoricEndDate"
|
||
type="date"
|
||
:is-date-disabled="disablePreviousDate"
|
||
@update:value="changeSearchRangeEndDate"
|
||
input-readonly
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div id="myEcharts" class="myChart"></div>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import { onMounted, watch, reactive } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
import markPointerIcon from '@/assets/image/icon/echarts_markPointer.png'
|
||
import axios from 'axios'
|
||
import { NDatePicker, NIcon } from 'naive-ui'
|
||
import { ArrowForwardOutline } from '@vicons/ionicons5'
|
||
|
||
const state = reactive({
|
||
searchRange: ['1m', '3m', 'YTD', '1Y', '5Y', '10Y', 'Max'],
|
||
selectHistoricStartDate: '2009-10-07',
|
||
selectHistoricEndDate: new Date(),
|
||
})
|
||
|
||
let myCharts = null
|
||
let historicData = []
|
||
let xAxisData = []
|
||
|
||
//初始化eCharts
|
||
const initEcharts = (data) => {
|
||
historicData = data
|
||
xAxisData = data.map((item) => {
|
||
return new Date(item.date).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
})
|
||
const yAxisData = data.map((item) => item.price)
|
||
console.error(xAxisData, yAxisData)
|
||
// 基于准备好的dom，初始化echarts实例
|
||
myCharts = echarts.init(document.getElementById('myEcharts'))
|
||
// 绘制图表
|
||
myCharts.setOption({
|
||
// title: {
|
||
// text: 'FiEE, Inc. Stock Price History',
|
||
// },
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'line',
|
||
snap: true,
|
||
label: {
|
||
backgroundColor: '#6a7985',
|
||
},
|
||
},
|
||
formatter: function (params) {
|
||
const p = params[0]
|
||
return `<span style="font-size: 1.1rem; font-weight: 600;">${p.axisValue}</span><br/><span style="font-size: 0.9rem; font-weight: 400;">Price: ${p.data}</span>`
|
||
},
|
||
},
|
||
xAxis: {
|
||
data: xAxisData,
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
inverse: true,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#CCD6EB',
|
||
},
|
||
},
|
||
axisLabel: {
|
||
color: '#323232',
|
||
fontWeight: 'bold',
|
||
// formatter: function (value) {
|
||
// return value ? value.split('-')[0] : ''
|
||
// },
|
||
// interval: function (index, value) {
|
||
// if (index === 0) return true;
|
||
// const axisData = this && this.axis && this.axis.data ? this.axis.data : [];
|
||
// if (!axisData[index - 1]) return true;
|
||
// return value.split('-')[0] !== axisData[index - 1].split('-')[0];
|
||
// },
|
||
},
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
position: 'right',
|
||
interval: 25,
|
||
// max: 75.0,
|
||
show: true,
|
||
axisLabel: {
|
||
color: '#323232',
|
||
fontWeight: 'bold',
|
||
formatter: function (value) {
|
||
return value > 0 ? value.toFixed(2) : value
|
||
},
|
||
},
|
||
},
|
||
series: [
|
||
{
|
||
data: yAxisData,
|
||
type: 'line',
|
||
sampling: 'lttb',
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
color: '#2c6288',
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: '#2c6288',
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: '#F4F6F8',
|
||
},
|
||
],
|
||
},
|
||
},
|
||
markPoint: {
|
||
symbol: 'image://' + markPointerIcon,
|
||
symbolSize: 24,
|
||
data: [],
|
||
},
|
||
},
|
||
],
|
||
|
||
dataZoom: [
|
||
{
|
||
type: 'inside',
|
||
},
|
||
{
|
||
type: 'slider',
|
||
show: true,
|
||
dataBackground: {
|
||
lineStyle: {
|
||
color: '#2C6288',
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 1, color: '#2c6288' },
|
||
{ offset: 0, color: '#F4F6F8' },
|
||
],
|
||
},
|
||
},
|
||
},
|
||
selectedDataBackground: {
|
||
lineStyle: {
|
||
color: '#2C6288',
|
||
},
|
||
areaStyle: {
|
||
color: {
|
||
type: 'linear',
|
||
x: 0,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 1, color: '#2c6288' },
|
||
{ offset: 0, color: '#F4F6F8' },
|
||
],
|
||
},
|
||
},
|
||
},
|
||
fillerColor: 'rgba(44, 98, 136, 0.3)',
|
||
realtime: false,
|
||
},
|
||
],
|
||
})
|
||
|
||
// 监听 showTip 事件，动态显示 markPoint
|
||
myCharts.on('showTip', function (params) {
|
||
if (params) {
|
||
const dataIndex = params.dataIndex
|
||
const x = myCharts.getOption().xAxis[0].data[dataIndex]
|
||
const y = myCharts.getOption().series[0].data[dataIndex]
|
||
myCharts.setOption({
|
||
series: [
|
||
{
|
||
markPoint: {
|
||
symbol: 'image://' + markPointerIcon,
|
||
symbolSize: 24,
|
||
data: [{ coord: [x, y] }],
|
||
},
|
||
},
|
||
],
|
||
})
|
||
}
|
||
})
|
||
// 鼠标移出时，清除 markPoint
|
||
myCharts.on('globalout', function () {
|
||
myCharts.setOption({
|
||
series: [
|
||
{
|
||
markPoint: {
|
||
symbol: 'image://' + markPointerIcon,
|
||
symbolSize: 24,
|
||
data: [],
|
||
},
|
||
},
|
||
],
|
||
})
|
||
})
|
||
myCharts.on('dataZoom', function (params) {
|
||
// 获取当前 dataZoom 范围
|
||
const option = myCharts.getOption()
|
||
const xAxisData = option.xAxis[0].data
|
||
const dataZoom = option.dataZoom[1] || option.dataZoom[0]
|
||
|
||
// 获取 dataZoom 的 startValue 和 endValue
|
||
let startValue = dataZoom.endValue
|
||
let endValue = dataZoom.startValue
|
||
|
||
// 如果是索引，转为日期
|
||
if (typeof startValue === 'number') {
|
||
startValue = xAxisData[startValue]
|
||
}
|
||
if (typeof endValue === 'number') {
|
||
endValue = xAxisData[endValue]
|
||
}
|
||
|
||
// 更新日期选择器
|
||
state.selectHistoricStartDate = new Date(startValue)
|
||
state.selectHistoricEndDate = new Date(endValue)
|
||
})
|
||
}
|
||
|
||
onMounted(() => {
|
||
getHistoricalData()
|
||
})
|
||
|
||
//获取历史数据
|
||
const getHistoricalData = async () => {
|
||
let now = new Date()
|
||
let toDate =
|
||
now.getFullYear() +
|
||
'-' +
|
||
String(now.getMonth() + 1).padStart(2, '0') +
|
||
'-' +
|
||
String(now.getDate()).padStart(2, '0')
|
||
let url =
|
||
'https://common.szjixun.cn/api/stock/history/base/list?from=2009-10-07&to=' +
|
||
toDate
|
||
const res = await axios.get(url)
|
||
if (res.status === 200) {
|
||
if (res.data.status === 0) {
|
||
initEcharts(res.data.data)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 适配倒序数据，返回大于等于目标日期的最近一天索引
|
||
function findClosestDateIndex(data, targetDateStr) {
|
||
let left = 0,
|
||
right = data.length - 1
|
||
const target = new Date(targetDateStr).getTime()
|
||
let res = data.length - 1 // 默认返回最后一个
|
||
while (left <= right) {
|
||
const mid = Math.floor((left + right) / 2)
|
||
const midTime = new Date(data[mid].date).getTime()
|
||
if (midTime > target) {
|
||
left = mid + 1
|
||
} else {
|
||
res = mid
|
||
right = mid - 1
|
||
}
|
||
}
|
||
return res
|
||
}
|
||
|
||
// 适配倒序数据，返回小于等于目标日期的最近一天索引
|
||
function findClosestDateIndexDescLeft(data, targetDateStr) {
|
||
let left = 0,
|
||
right = data.length - 1
|
||
const target = new Date(targetDateStr).getTime()
|
||
let res = -1 // 默认返回-1（找不到）
|
||
while (left <= right) {
|
||
const mid = Math.floor((left + right) / 2)
|
||
const midTime = new Date(data[mid].date).getTime()
|
||
if (midTime < target) {
|
||
right = mid - 1 // 向左搜索，因为我们要找的是小于等于目标日期的最近一天
|
||
} else {
|
||
res = mid // 记录当前找到的索引
|
||
left = mid + 1 // 向右搜索，因为更早的日期在数组后面
|
||
}
|
||
}
|
||
return res
|
||
}
|
||
|
||
//点击切换搜索区间
|
||
const changeSearchRange = (range, dateTime) => {
|
||
const now = new Date()
|
||
let startDate = ''
|
||
let endDate = ''
|
||
if (range === '1m') {
|
||
const last = new Date(now)
|
||
last.setMonth(now.getMonth() - 1)
|
||
startDate = last.toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
} else if (range === '3m') {
|
||
const last = new Date(now)
|
||
last.setMonth(now.getMonth() - 3)
|
||
startDate = last.toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
} else if (range === 'YTD') {
|
||
startDate = new Date(now.getFullYear(), 0, 1).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
} else if (range === '1Y') {
|
||
const last = new Date(now)
|
||
last.setFullYear(now.getFullYear() - 1)
|
||
startDate = last.toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
} else if (range === '5Y') {
|
||
const last = new Date(now)
|
||
last.setFullYear(now.getFullYear() - 5)
|
||
startDate = last.toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
} else if (range === '10Y') {
|
||
const last = new Date(now)
|
||
last.setFullYear(now.getFullYear() - 10)
|
||
startDate = last.toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
endDate = new Date(new Date()).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
})
|
||
} else if (range === 'Max') {
|
||
startDate = ''
|
||
endDate = ''
|
||
} else if (range === 'startDateTime') {
|
||
startDate = dateTime
|
||
endDate = ''
|
||
} else if (range === 'endDateTime') {
|
||
startDate = ''
|
||
endDate = dateTime
|
||
}
|
||
if (startDate || endDate) {
|
||
// historicData 和 xAxisData 需在 initEcharts 作用域可用
|
||
if (
|
||
typeof historicData !== 'undefined' &&
|
||
typeof xAxisData !== 'undefined'
|
||
) {
|
||
let startValue = xAxisData[0]
|
||
if (startDate) {
|
||
const idx = findClosestDateIndex(historicData, startDate)
|
||
// 用 historicData[idx].date 格式化为 xAxisData 的格式
|
||
startValue = new Date(historicData[idx].date).toLocaleDateString(
|
||
'en-US',
|
||
{
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
},
|
||
)
|
||
}
|
||
let endValue = endDate
|
||
if (endDate) {
|
||
console.warn(endDate)
|
||
const idx = findClosestDateIndexDescLeft(historicData, endDate)
|
||
console.warn(idx)
|
||
// 用 historicData[idx].date 格式化为 xAxisData 的格式
|
||
endValue = new Date(historicData[idx].date).toLocaleDateString(
|
||
'en-US',
|
||
{
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
},
|
||
)
|
||
console.warn(endValue)
|
||
}
|
||
|
||
if (startDate) {
|
||
myCharts.setOption({
|
||
dataZoom: {
|
||
endValue: startValue,
|
||
},
|
||
})
|
||
state.selectHistoricStartDate = new Date(startValue)
|
||
}
|
||
if (endDate) {
|
||
myCharts.setOption({
|
||
dataZoom: {
|
||
startValue: endValue,
|
||
},
|
||
})
|
||
state.selectHistoricEndDate = new Date(endValue)
|
||
}
|
||
}
|
||
} else {
|
||
myCharts.setOption({
|
||
dataZoom: {
|
||
startValue: '',
|
||
endValue: '',
|
||
},
|
||
})
|
||
|
||
state.selectHistoricStartDate = new Date('2009-10-07')
|
||
state.selectHistoricEndDate = new Date()
|
||
}
|
||
}
|
||
|
||
// 禁用2009-10-07之后的日期
|
||
const disableAfterDate = (date) => {
|
||
return date < new Date('2009-10-06') || date > new Date()
|
||
}
|
||
|
||
// 禁用过去的日期
|
||
const disablePreviousDate = (date) => {
|
||
return date < new Date(state.selectHistoricStartDate) || date > new Date()
|
||
}
|
||
|
||
// 切换搜索区间开始日期
|
||
const changeSearchRangeStartDate = (date) => {
|
||
console.error(date)
|
||
changeSearchRange(
|
||
'startDateTime',
|
||
new Date(date).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
}),
|
||
)
|
||
}
|
||
|
||
// 切换搜索区间结束日期
|
||
const changeSearchRangeEndDate = (date) => {
|
||
console.error(date)
|
||
changeSearchRange(
|
||
'endDateTime',
|
||
new Date(date).toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
}),
|
||
)
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.custom-echarts {
|
||
.myChart {
|
||
width: 100%;
|
||
height: 25rem;
|
||
}
|
||
|
||
.echarts-header {
|
||
.echarts-header-title {
|
||
span {
|
||
font-size: 2rem;
|
||
font-weight: 600;
|
||
color: #323232;
|
||
}
|
||
}
|
||
.echarts-search-area {
|
||
padding: 2rem 0 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.echarts-search-byRange {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
.search-range-list {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
.search-range-list-each {
|
||
padding: 5px 10px;
|
||
border-radius: 5px;
|
||
background-color: #f3f4f6;
|
||
cursor: pointer;
|
||
span {
|
||
font-weight: 600;
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.echarts-search-byDate {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: flex-start;
|
||
gap: 0.4rem;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|