在vue中使用Echarts中的柱状图,并且让柱状图自适应布局

Question

要在vue的页面中某个位置引用Echarts中的柱状图，要怎么设置，才能让这个柱状图自适应布局？

Answer 1

Echarts本身就是自适应布局的，某个位置固定一个div，再把Echarts引入，Echarts会自适应这个div的

Answer 2

/**
 * Created by wanglu on 2017/3/1.
 */
;(function () {
    var eComVisitChart=echarts.init(document.getElementById("eComVisit"));
    var option = {
        color:["#238BD4","#A0D677","#FFF075","#FCC652","#74BFE7","#E27561","#338FDE","#37ADE5","#A6D3E4","#3B7AAE"],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            x : 'center',
            y : 'bottom',
            data: ['唯品会','淘宝','聚划算','蘑菇街','美丽说',"天猫商城","苏宁易购","乐蜂网","京东商城"]
        },
        series : [
            {
                name: '访问分布',
                type: 'pie',
                radius : '60%',
                center: ['50%', '34%'],
                data:[
                    {value:335, name:'唯品会'},
                    {value:335, name:'淘宝'},
                    {value:335, name:'聚划算'},
                    {value:335, name:'美丽说'},
                    {value:143, name:'天猫商城'},
                    {value:335, name:'苏宁易购'},
                    {value:335, name:'乐蜂网'},
                    {value:548, name:'京东商城'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    eComVisitChart.setOption(option);
    window.addEventListener("resize", function () {
        setTimeout(function () {
            eComVisitChart.resize();
        }, 500)
    });
})(window)

重头在js监听窗口变化，echarts图表才可以重新绘制

   eComVisitChart.setOption(option);
    window.addEventListener("resize", function () {
        setTimeout(function () {
            eComVisitChart.resize();
        }, 500)
    });
})(window)

Answer 3

请问你这个大的立即执行函数写在哪里呢？