javascript - echarts图表在div尺寸变化时的自适应-PHP中文网问答

javascript - echarts图表在div尺寸变化时的自适应

PHP中文网 2017-04-11 13:15:40

[JavaScript讨论组]

1322

如何让第二张图后面没有空白

PHP中文网

认证高级PHP讲师

全部回复(6)

ringa_lee2017-04-11 13:17:40 6楼

<!doctype html>
<html lang="us">
<head>

<meta charset="utf-8">
<title></title>
<script src="echarts.min.js"></script>

</head>
<body>

<p id="main" style="width: 600px;height:400px;"></p>

</body>
</html>
<script src="jquery.js"></script>
<script>

var myChart = document.getElementById('main');

//自适应宽高
var myChartContainer = function () {
    myChart.style.width = window.innerWidth+'px';
    myChart.style.height = window.innerHeight+'px';
};
myChartContainer();
var myChart = echarts.init(myChart);

option = {
    title: {
        text: '基础雷达图'
    },
    radar: {
        indicator: [
           { name: '销售', max: 6500},
           { name: '管理', max: 16000},
           { name: '信息技术', max: 30000},
           { name: '客服', max: 38000},
           { name: '研发', max: 52000},
           { name: '市场', max: 25000}
        ],
        name:{
            formatter:function(v){
                console.log(v);return v;
            }
        },
        triggerEvent:true
    },
    series: [{
        name: '预算vs开销',
        type: 'radar',
        data : [
            {
                value : [4300, 10000, 28000, 35000, 50000, 19000],
                name : '预算分配'
            },
             {
                value : [5000, 14000, 28000, 31000, 42000, 21000],
                name : '实际开销'
            }
        ]
    }]
};

 myChart.setOption(option);
 
 //浏览器大小改变时重置大小
 window.onresize = function () {
    myChartContainer();
    myChart.resize();
};

</script>

赞 +0

添加回复

伊谢尔伦2017-04-11 13:17:40 5楼

需要绑定一个resize事件，然后Echarts才能在宽度改变的时候重新渲染

赞 +0

添加回复

阿神2017-04-11 13:17:40 4楼

var myChart = echarts.getInstanceByDom(document.getElementById(id)); //通过DOM id获取到echarts实例
window.onresize = function(){
    myChart.resize(); 
});

首先你得保证图表的容器是自适应的

赞 +0

添加回复

黄舟2017-04-11 13:17:40 3楼

var myChart = echarts.getInstanceByDom(document.getElementById(id)); //通过DOM id获取到echarts实例
setTimeout(function(){
    window.onresize = function(){
    myChart.resize(); 
});
},200)

赞 +0

添加回复

PHP中文网2017-04-11 13:17:40 2楼

window.onresize = function(){

myChart.resize();

});
只要在改变宽度时重新渲染就可以了

赞 +0

添加回复

ringa_lee2017-04-11 13:17:40 1楼

window.onresize = function(){
  myEchart.resize(); //myEchart为echarts.init初始化得到的对象
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>