<template>
  <div style="height:600px;width:1000px; display:flex; justify-content:center; align-items:center;">
      <div class="echarts" style="height:90%;width:100%;" ref="zhexian"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {
  data() {
    return {
        model: {}
    }
  },
  mounted () {
    this.drawZhexian()
    window.addEventListener("resize", () =>{
      this.zheChart.resize();
    });
  },
  methods:{
    // 获取数据
    getList(record) {
        console.log(1111,record)
        this.model = Object.assign({}, record);
        console.log(22222,this.model)
        var yusuan = []
        var zhixing = []
        yusuan.push(this.model.clys)
        yusuan.push(this.model.wxys)
        var zongys = this.model.wxys + this.model.clys
        yusuan.push(zongys)
        zhixing.push(this.model.clf)
        zhixing.push(this.model.wxf)
        var zongzx = this.model.wxf + this.model.clf
        zhixing.push(zongzx)
        console.log(7777,yusuan,zhixing),
        this.zheChart.setOption({
            yAxis: [
                {
                type: 'category',
                data: ['材料费','外协费','总计']
                }
            ],
            series: [
                {
                name: '预算',
                type: 'bar',
                data: yusuan,
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#8FEEBB'
                        }, {
                            offset: 1,
                            color: '#66DD9E'
                        }]),
                        // barBorderRadius: 11,
                    }
                    
                },
                },
                {
                name: '执行',
                type: 'bar',
                emphasis: {
                    focus: 'series'
                },
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#AEDFFA'
                        }, {
                            offset: 1,
                            color: '#95C7FC'
                        }]),
                    // barBorderRadius: 11,
                    }
                },
                data: zhixing
                },
                // {
                // name: '外协费',
                // type: 'bar',
                // stack: 'Ad',
                // emphasis: {
                //     focus: 'series'
                // },
                // data: [that.model.wxf]
                // },
            ]
        });
    },
    // 绘制折线图
    drawZhexian(){
      var chartDom = this.$refs.zhexian
      this.zheChart = echarts.init(chartDom);

      var option;

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                type: 'value',
                }
            ],
            // yAxis: [
            //     {
            //     type: 'category',
            //     data: ['Mon']
            //     }
            // ],
        };
        option && this.zheChart.setOption(option);
    },
  },
}
</script>