84669 personnes étudient
152542 personnes étudient
20005 personnes étudient
5487 personnes étudient
7821 personnes étudient
359900 personnes étudient
3350 personnes étudient
180660 personnes étudient
48569 personnes étudient
18603 personnes étudient
40936 personnes étudient
1549 personnes étudient
1183 personnes étudient
32909 personnes étudient
如何让第二张图后面没有空白
认证高级PHP讲师
<!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>
https://github.com/ecomfe/ech...
需要绑定一个resize事件,然后Echarts才能在宽度改变的时候重新渲染
var myChart = echarts.getInstanceByDom(document.getElementById(id)); //通过DOM id获取到echarts实例 window.onresize = function(){ myChart.resize(); });
首先你得保证图表的容器是自适应的
var myChart = echarts.getInstanceByDom(document.getElementById(id)); //通过DOM id获取到echarts实例 setTimeout(function(){ window.onresize = function(){ myChart.resize(); }); },200)
window.onresize = function(){
myChart.resize();
});只要在改变宽度时重新渲染就可以了
我感觉你问的是两个问题1.如何自适应 解决办法:用js的resize方法监听窗口变化 自适应更改canvas画布大小
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...代码:
echarts
控制grid
options: [{ calculable: true, grid: { y: 110, y2: 110 }, xAxis: [{ type: 'category', axisLabel: { show: false, },
window.onresize = function(){ myEchart.resize(); //myEchart为echarts.init初始化得到的对象 }
<!doctype html>
<html lang="us">
<head>
</head>
<body>
</body>
</html>
<script src="jquery.js"></script>
<script>
</script>
https://github.com/ecomfe/ech...
需要绑定一个resize事件,然后Echarts才能在宽度改变的时候重新渲染
首先你得保证图表的容器是自适应的
window.onresize = function(){
});
只要在改变宽度时重新渲染就可以了
我感觉你问的是两个问题
1.如何自适应
解决办法:用
js的resize
方法监听窗口变化 自适应更改canvas画布大小
2.如何使p中没有空白 全部占满:
这个是
echarts
中的一个属性 你可以控制grid控制grid
改变距边框的top left right bottom链接给你http://echarts.baidu.com/opti...
代码: