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

Question

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

ringa_lee · Answer

<p><!doctype html><br><html lang="us"><br><head></p>
<pre class='brush:php;toolbar:false;'><code><meta charset="utf-8">
<title></title>
<script src="echarts.min.js"></script></code></pre>
<p></head><br><body></p>
<pre class='brush:php;toolbar:false;'><code><p id="main" style="width: 600px;height:400px;"></p></code></pre>
<p></body><br></html><br><script src="jquery.js"></script><br><script></p>
<pre class='brush:php;toolbar:false;'><code>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();
};
</code></pre>
<p></script></p>

巴扎黑 · Answer

https://github.com/ecomfe/ech...

伊谢尔伦 · Answer

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

阿神 · Answer

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

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

黄舟 · Answer

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

PHP中文网 · Answer

window.onresize = function(){

myChart.resize();

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

黄舟 · Answer

我感觉你问的是两个问题
1.如何自适应
解决办法：用js的resize方法监听窗口变化自适应更改canvas画布大小

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

2.如何使p中没有空白全部占满：
这个是echarts中的一个属性你可以控制grid 控制grid 改变距边框的top left right bottom
链接给你http://echarts.baidu.com/opti...
代码：

  options: [{
            calculable: true,
            grid: {
                y: 110,
                y2: 110
            },
            xAxis: [{
                type: 'category',
                axisLabel: {
                    show: false,

                },

ringa_lee · Answer

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