<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>
