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