84669 Lernen von Personen
152542 Lernen von Personen
20005 Lernen von Personen
5487 Lernen von Personen
7821 Lernen von Personen
359900 Lernen von Personen
3350 Lernen von Personen
180660 Lernen von Personen
48569 Lernen von Personen
18603 Lernen von Personen
40936 Lernen von Personen
1549 Lernen von Personen
1183 Lernen von Personen
32909 Lernen von Personen
如何让第二张图后面没有空白
认证高级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...
代码: