<template>
  <div class="container">
    <PageHeader :title="$t('field.marketRisk')">
      <el-select v-model="selectValue" :placeholder="$t('field.pleaseChoose')">
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </PageHeader>

    <div id="marketRiskCharts"></div>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue';
export default {
  name: 'marketRisk',
  components: {
    PageHeader
  },
  data() {
    return {
      selectOptions: [{ id: 1, label: '实时', value: 'realTime' }],
      selectValue: ''
    };
  },
  mounted() {
    this.getChartsData();
  },
  methods: {
    async getChartsData() {
      const res = await this.$apis.getMarketRiskChart({})
      let showData = []
      if (res.success) {
        showData = res.data.result
      }
      this.buildCharts(showData);
    },

    buildCharts(showData) {
      const chart = this.$echarts.init(document.getElementById('marketRiskCharts'));
      const option = {
        tooltip: {
          // 提示tip
          show: true,
          formatter: function (params) {
            // params.value 为数据值
            return params.seriesName + '<br/>' + params.name + ': ' + params.value + ' %';
          }
        },
        grid: {
          left: 200, // 调整左侧边距，给纵坐标添加额外空间
          top: 30,
          right: 30,
          bottom: 40 // 调整底部边距，给横坐标添加额外空间
        },
        xAxis: {
          // 横坐标设置
          type: 'value',
          min: 0,      // 设置横坐标最小值
          max: 100,    // 设置横坐标最大值
          interval: 25, // 设置刻度间隔
          axisLabel: {
            // label格式化
            formatter: function (value) {
              if (value === 0) {
                return '0';
              }
              return value + ' %';
            },
            color: 'rgba(0, 0, 0, 0.44)'
          },
        },
        yAxis: {
          // 纵坐标设置
          type: 'category',
          data: [],
          axisLabel: {
            interval: 0, // 设置坐标文字全部显示
            color: 'rgba(0, 0, 0, 0.44)'
          },
        },
        series: [
          // 具体数据以及图表形状
          {
            data: [],
            type: 'bar',
            color: '#006CFF',
            name: this.$t('field.riskValue'),
            barWidth: 13.48 // 调整柱状图宽度
          }
        ]
      };
      const xArr = []
      const yArr = []
      showData.forEach((item) => {
        yArr.push(item.title)
        xArr.push(item.value)
      })
      option.yAxis.data = yArr
      option.series[0].data = xArr
      chart.setOption(option);
      // 监听窗口大小改变事件
      window.addEventListener('resize', () => {
        // 调用图表实例的resize方法，使图表自适应
        chart.resize();
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding: 8px 9px;
}
#marketRiskCharts {
  width: 95%;
  height: 250px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
}
</style>
