Vue设置div的宽度和高度

html代码

          <div id="divOrganization" v-bind:style="{width:EchartsWidth,height: EchartsHeight,position:'absolute' }"  >

            </div>

js代码        

new Vue({
            el: '#app',
            data: { 
                EchartsHeight: (document.body.clientHeight - 140 )+'px',
                EchartsWidth:(document.body.clientWidth - 260)+'px',// (screen.width-250)*0.96+'px',
                //return {
                //    info: null
                //}
            },

 

<script src="~/Content/AdminLTE-3.0.1/plugins/jquery/jquery.min.js"></script>
<script src="../Scripts/echarts.js"></script>
<script src="~/Content/plugins/vue-dev/dist/vue.js"></script>
<script src="~/Content/plugins/axios-master/dist/axios.js"></script> 

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
}

<div class="content">
    <div class="row" id="app">
            <div id="divOrganization" v-bind:style="{width:EchartsWidth,height: EchartsHeight,position:'absolute' }"  >

            </div>
 </div>
 </div>

<script type="text/javascript">
    var IsSetOrganization = false;

    $(function () {

        new Vue({
            el: '#app',
            data: { 
                EchartsHeight: (document.body.clientHeight - 140 )+'px',
                EchartsWidth:(document.body.clientWidth - 260)+'px',// (screen.width-250)*0.96+'px',
                //return {
                //    info: null
                //}
            },
            mounted() {
                var token = $('*[name="__RequestVerificationToken"]').val();
                var ID = '1000';
                var ParentID = '0';
                this.GetOrganization(token,ID,ParentID);
            },
            computed: {
                 计算属性的 getter
                //EchartsHeight: function () {
                //    // `this` 指向 vm 实例
                //    return screen.height;
                //}, 
                //EchartsWidth: function () {
                //    // `this` 指向 vm 实例
                //    return screen.width;
                //}
            },
            methods: { 
                GetOrganization: function () {
                    var data = "";

                    var myChartOrganization = echarts.init(document.getElementById('divOrganization'));
                    var labelOption = {
                        normal: {
                            show: true,

                            formatter: '{c}  {name|{a}}',
                            fontSize: 16,
                            rich: {
                                name: {
                                    textBorderColor: '#fff'
                                }
                            }
                        }
                    };

                    // 指定图表的配置项和数据
                    var option2 = {
                        // backgroundColor: '#DEF',//'#0f375f',
                        graphic: [
                            {
                                type: 'image',
                                id: 'logo',
                                //right: '11',
                                //bottom: '28%',
                                //z: 1000,
                                bounding: 'raw',
                                style: {
                                    image: '../image/background3.jpg',
                                    width: screen.width,//1545,
                                    height: screen.height,
                                }
                            }
                        ],
                        tooltip: {
                            show: IsSetOrganization,
                            trigger: 'item',
                            triggerOn: 'mousemove',//mousemove|
                            enterable: true,
                            formatter: function (params) {
                         

                                return html;
                            },
                        },

                        toolbox: {
                            show: false,
                            feature: {
                                mark: { show: true },
                                dataView: { show: true, readOnly: false },
                                magicType: { show: true, type: ['line', 'bar'] },

                            }
                        },

                        series: [
                            {
                                type: 'tree',

                                data: [data],

                                left: '2%',
                                right: '2%',
                                top: '8%',
                                bottom: '20%',

                                symbol: 'image://http://' + window.location.host + '/image/Dark_blue_button.png',//'emptyCircle',
                                symbolSize: [100, 30],
                                orient: 'vertical',

                                expandAndCollapse: false,
                                initialTreeDeptp: -1,
                                itemStyle: {
                                    color: '#FFF',//'#f56954',
                                    borderColor: "#00c0ef",
                                    borderWidth: 8,
                                },
                                label: {
                                    formatter: '{b} \n {c}  ',
                                    position: 'inside',
                                    distance: 5,
                                    fontSize: 12,
                                    color: "#FFF",
                                },

                                leaves: {
                                    label: {
                                        position: 'inside',
                                        // rotate: -90,
                                        verticalAlign: 'middle',
                                        align: 'center',
                                    },
                                    itemStyle: {
                                        color: "#FFF",//"#00c0ef",
                                    }

                                },

                                animationDurationUpdate: 750
                            }
                        ]              //  color: ['#007bff', '#dc3545','#2E90CD', '#FE0000']
                    };

                    // 使用刚指定的配置项和数据显示图表。

                    myChartOrganization.showLoading(); // 加载动画

                    myChartOrganization.setOption(option2);

                    myChartOrganization.hideLoading();

                    GetChartResult();

                    function GetChartResult() {
                        var token = $('*[name="__RequestVerificationToken"]').val();
                        var ID = '1000';
                        var ParentID = '0';
                        var auto = myChartOrganization.getOption();

                        axios({
                            method: 'post',
                            url: '/BaseData/GetOrganization',

                            transformRequest: [
                                function (data) {
                                    let ret = ''
                                    for (let it in data) {
                                        ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                                    }
                                    ret = ret.substring(0, ret.lastIndexOf('&'));
                                    return ret
                                }
                            ],
                            data: {
                                __RequestVerificationToken: token,
                                ID: ID,
                                ParentID: ParentID,
                                //OrganizationName: 'easyboot'
                            }
                        })
                            .then(function (response) {
                                console.log(response)
                                console.log(response.data)
                                var auto = myChartOrganization.getOption();

                                var data1 = response.data.replace(/ID/g, "value").replace(/OrganizationName/g, "name").replace(/CHILDREN/g, "children")
                                var data2 = data1.substring(0, data1.length - 1);
                                var data3 = data2.substring(1, data1.length);

                                var objData = JSON.parse(data1)

                                auto.series[0].data = objData; //数据源
                                //auto.legend.data =legendData;
                                myChartOrganization.showLoading(); // 加载动画
                                myChartOrganization.setOption(auto, false);
                                myChartOrganization.hideLoading();
                            });



                        @*$.ajax({
                            type: 'POST',
                            url: '@Url.Action("GetOrganization")',

                            data: {
                                ID: ID,
                                ParentID: ParentID,
                                __RequestVerificationToken: token,
                            },
                            async: false,

                            dataType: "json",
                            success: function (data) {
                                //console.log(data)

                                var auto = myChartOrganization.getOption();

                                var data1 = data.replace(/ID/g, "value").replace(/OrganizationName/g, "name").replace(/CHILDREN/g, "children")
                                var data2 = data1.substring(0, data1.length - 1);
                                var data3 = data2.substring(1, data1.length);

                                var objData = JSON.parse(data1)

                                auto.series[0].data = objData; //数据源
                                //auto.legend.data =legendData;
                                myChartOrganization.showLoading(); // 加载动画
                                myChartOrganization.setOption(auto, false);
                                myChartOrganization.hideLoading();
                            },
                            error: function (message) {
                                // alert(message);
                            }
                        });*@
                    }
                },
                SetDataImportTableName: function () {
                    localStorage.setItem('DataImportTableName', 'organization')
                }
            }
        }) 

    });
</script>