<template>
    <div class="map">
        <div id="myChartChina" :style="{width: '100%', height: '500px'}"></div>
    </div>
</template>

<script>
export default {
    mounted() {
        this.drawLine();
    },
    methods:{
        drawLine(){
        // 基于准备好的dom，初始化echarts实例
        var myChartContainer = document.getElementById('myChartChina');       
        // var resizeMyChartContainer = function(){
        //   myChartContainer.style.width=(document.body.offsetWidth/2)+'px'//页面一半的大小
        // } 
        //  resizeMyChartContainer();
        var myChartChina = this.$echarts.init(myChartContainer); 

        function randomData() {  
                return Math.round(Math.random()*500);  
            } 
        // 绘制图表
       var option = {
              
              tooltip: {
                trigger: 'axis'
              },
              legend: {
                data: ['合同总金额', '合同软件金额', '合同硬件金额', '合同总回款金额', '合同软件回款金额','合同硬件回款金额','续费总回款金额']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
            
              xAxis: {
                type: 'category',
                // boundaryGap: false,
                data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
              },
              yAxis: {
                min:0,  //取0为最小刻度
                max: 2400,
                splitNumber: 10,
                type: 'value'
              },
              series: [
                {
                  name: '合同总金额',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 132, 101, 134, 90, 230, 210, 101, 134, 90, 230, 210],
                  smooth: true
                },
                {
                  name: '合同软件金额',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 182, 191, 234, 290, 330, 310, 191, 234, 290, 330, 310],
                  smooth: true
                },
                {
                  name: '合同硬件金额',
                  type: 'line',
                  stack: 'Total',
                  data: [150, 232, 201, 154, 190, 330, 410, 201, 154, 190, 330, 410],
                  smooth: true
                },
                {
                  name: '合同总回款金额',
                  type: 'line',
                  stack: 'Total',
                  data: [320, 332, 301, 334, 390, 330, 320, 301, 334, 390, 330, 320],
                  smooth: true
                },
                {
                  name: '合同软件回款金额',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 332, 301, 434, 290, 330, 320, 301, 434, 290, 330, 320],
                  smooth: true
                },{
                  name: '合同硬件回款金额',
                  type: 'line',
                  stack: 'Total',
                  data: [120, 432, 301, 334, 109, 130, 122, 301, 334, 109, 130, 122],
                  smooth: true
                },
                {
                  name: '续费总回款金额',
                  type: 'line',
                  stack: 'Total',
                  data: [220, 132, 401, 334, 290, 330, 320, 401, 334, 290, 330, 320],
                  smooth: true
                }
              ]
          }
          
        myChartChina.setOption(option);
        window.onresize=function(){
            // resizeMyChartContainer();
            myChartChina.resize();
        }
      }
    }
}
</script>

<style scoped>
.map{
    width: 100%;
    height: 500px;
    background: #ffffff;
}
</style>