echarts实现多张图在一个页面 并自适应屏幕大小

按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> 

猜你喜欢

转载自blog.csdn.net/qq_34237321/article/details/103903108