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.
91 lines
2.0 KiB
91 lines
2.0 KiB
<template>
|
|
<div>
|
|
<div ref="NewsChg" style="width: 100%; height: 350px" />
|
|
<div style="text-align: center">
|
|
<el-radio v-model="range" label="MONTH" border @change="getData">近一月</el-radio>
|
|
<el-radio v-model="range" label="YEAR" border @change="getData">近一年</el-radio>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from 'vue'
|
|
import { getStockChgData } from '@/api/stock/StockChgApi'
|
|
// 按需引入 echarts
|
|
import * as echarts from 'echarts'
|
|
|
|
const range = ref('YEAR')
|
|
|
|
const NewsChg = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
|
|
onMounted(
|
|
() => {
|
|
getData()
|
|
}
|
|
)
|
|
|
|
const getData = () => {
|
|
const params = {
|
|
_v: new Date() * 1,
|
|
period: range.value
|
|
}
|
|
getStockChgData(params).then(resp => {
|
|
if (resp.data) {
|
|
init(JSON.parse(resp.data))
|
|
}
|
|
})
|
|
}
|
|
|
|
const init = (data) => {
|
|
const timeData = data.map(x => x.tradeDate)
|
|
const marketData = data.map(x => x.marketClose)
|
|
const maIndexData = data.map(x => x.maIndex1)
|
|
// 基于准备好的dom，初始化echarts实例
|
|
const myChart = echarts.init(NewsChg.value)
|
|
// 指定图表的配置项和数据
|
|
const option = {
|
|
title: {
|
|
text: '中国A股市场情绪指数'
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: timeData
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
name: '沪深300指数 ',
|
|
showSymbol: false,
|
|
min: (value) => {
|
|
return parseInt(value.min)
|
|
}
|
|
}, {
|
|
type: 'value',
|
|
name: '市场情绪指数 '
|
|
// min: (value) => {
|
|
// return parseInt(value.min)
|
|
// }
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
data: marketData,
|
|
type: 'line',
|
|
smooth: true
|
|
},
|
|
{
|
|
data: maIndexData,
|
|
yAxisIndex: 1,
|
|
type: 'line',
|
|
smooth: true
|
|
}
|
|
]
|
|
}
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|
|
|