<template>
  <div>
    <div id="kcfx"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
// import axios from "axios";
import { kcfxchartInfo } from "../../../servuces/prove";
export default {
  data() {
    return {
      kcfxdata: []
    }
  },
  mounted() {

    this.kecundataapi()
  },
  methods: {
    chart4() {
      const kcfx = document.getElementById('kcfx');
      const myChart4 = echarts.init(kcfx);


      const option4 = {

        legend: {
          left: '60%',
          textStyle: {
            fontSize: 12,//字体大小
            color: 'white'//字体颜色
          },
        },
        tooltip: {},
        dataset: {
          source: this.kcfxdata
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white'
            }
          }
        },
        yAxis: {
          show: true,
          axisLabel: {
            show: true,
            textStyle: {
              color: 'white'
            }
          }
        },
        series: [{ type: 'bar' }, { type: 'bar' }],
      }

      option4 && myChart4.setOption(option4);
    },
    kecundataapi() {
      //   axios.get('http://192.168.2.55:8022/plugins/lhyt/product_stock/home/').then(res => {
      //     this.kcfxdata = res.data.data;
      //     this.chart4()
      //     console.log(this.kcfxdata);
      //   }).catch(error => {
      //     console.log(error);
      //     this.kcfxdata = [
      //       ['展厅', '线索总量', '交车量'],
      //       ['库存金额', 1, 2],
      //       ['呆滞金额', 3, 4],
      //       ['本月入库', 5, 6],
      //       ['本月出库', 7, 8]
      //     ]
      //     console.log('错误');
      //   })
      kcfxchartInfo().then(res => {
        this.kcfxdata = res.data;
        this.chart4()
      }).catch(error => {
        console.log(error);
        // alert('错误')
      })
    }
  }
}

</script>
<style scoped>
#kcfx {
  width: 700px;
  height: 400px;
  /* margin-left: 10%; */
  margin: 0 auto;
  cursor: pointer;
}
</style>