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初始化得到的对象
}

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial