按F12后页面布局乱了。下面为html代码
一个div 对应一张图用id来定位,一个scrip对应对一个图的渲染。设置百分比宽度,利用左浮动。代码省略了5个scrip,只用一个为例
自适应代码为:(html代码末尾)后端语言为python
<script>
window.onresize = function(){
fiveChart.resize();
fourChart.resize();
threeChart.resize();
firstChart.resize();
secondChart.resize();
sixChart.resize();
}
</script>
HTML代码
<div id="second" style="width: 35%;height:400px;float:left;"></div>
<div id="six" style="width: 30%;height:400px;float:left;"></div>
<div id="three" style="width: 35%;height:400px;float:left;"></div>
<div id="first" style="width: 35%;height:400px;float:left;"></div>
<div id="five" style="width: 30%;height:400px;float:left;"></div>
<div id="four" style="width: 35%;height:400px;float:left;"></div>
<script type="text/javascript">
var firstChart = echarts.init(document.getElementById('first'));
// 指定图表的配置项和数据
var kv = new Array();//声明一个新的字典
kv = {
{
all_department|safe }};//取出后台传递的数据,此处添加safe过滤避免警告
var test = new Array();//声明一个新的字典用于存放数据
for (var logKey in kv) {
//将对应键值对取出存入test,logKey 为该字典的键
test.push({
value: kv[logKey], name: logKey});
}
var option = {
title : {
text: '各部门使用比例',
subtext: '占总任务%',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series : [
{
name: '任务部门',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:test,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
firstChart.setOption(option)
</script> //第一个图结束
<script>xxxxxx</script>//其他图
<script>xxxxxx</script>//其他图
<script>xxxxxx</script>//其他图
<script>xxxxxx</script>//其他图
<script>
window.onresize = function(){
fiveChart.resize();
fourChart.resize();
threeChart.resize();
firstChart.resize();
secondChart.resize();
sixChart.resize();
}
</script>