<template>
  <div>
    <div id="kyfx"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
import { kyfxchartInfo } from "../../../servuces/prove";

export default {
  data () {
    return {
      kyfxdata: []
    }
  },
  mounted () {

    this.kyfxchartapi()
  },
  methods: {
    chart3 () {
      var kyfx = document.getElementById('kyfx');
      var myChart3 = echarts.init(kyfx);
      const option3 = {
        legend: {
          top: '5%',
          left: '60%',
          textStyle: {
            fontSize: 12,//字体大小
            color: 'white'//字体颜色
          },
        },
        tooltip: {},
        dataset: {
          source: this.kyfxdata
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          show: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white'
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [{ type: 'bar' }, { type: 'bar' }]
      };

      option3 && myChart3.setOption(option3);
    },
    kyfxchartapi () {
      kyfxchartInfo().then(res => {
        this.kyfxdata = res.data;
        this.chart3()


      })
    }
  }
}

</script>
<style scoped>
#kyfx {
  width: 80%;
  height: 300px;
  margin: 0 auto;
}
</style>