在Bootstrap中使用百度Echarts同时多图表和自适应宽度显示 - 管理猿 2019 年 04 月 19 日 |访问: 246 次

本文主要解决以下问题:
使用百度Echarts图表在同一个页面显示多个图表(折线图,饼图,柱状图等)。
在Bootstrap中Echarts图表不显示或者无法自适应显示图表数据
先看下效果图
截图大师 Capture 11 - Portal服务平台 - http___192.168.100.8_homeAction_index.action.png
图示按照boostrap的col-sm-*动态布局,每个格子加上Echarts图表数据
第一步:引入Echarts的依赖文件js【文末已打包ZIP】

<script type="text/javascript" src="/js/echarts.min.js"></script>
<script type="text/javascript" src="/js/macarons.js"></script>

第二步:构建用于Echarts图表显示的DIV区域,有多张图表就需要变换下ID即可

<div id="sunif"  class="card-box" style="width:100%;height:400px"></div>

第三步:初始化图表,并自适应宽度

<script type="text/javascript">
                         // 使用图表的DIV区域,不同图表需要更换ID,否则只会显示一个图表
                         var myChart = echarts.init(document.getElementById('sunif'));
                         
                         // 指定图表的配置项和数据
                         var option = {
                        /* title: {
                            text: '实时在线用户',
                            
                            textStyle: {
                            fontWeight: 'normal',              //标题颜色
                                color: '#FFF'
                            },
                        }, */
                        
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['微信认证','短信认证','临时放行'],
                            textStyle: {
                            fontWeight: 'normal',              //标题颜色
                                color: '#FFF'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['16:10','16:15','16:20','16:25','16:30','16:35','16:40']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'微信认证',
                                type:'line',
                                stack: '总量',
                                data:[120, 132, 101, 134, 90, 230, 210],
                                    lineStyle: {
                                        normal:{
                                            color:'#fff'
                                        }
                                    }
                            },
                            {
                                name:'短信认证',
                                type:'line',
                                stack: '总量',
                                data:[220, 182, 191, 234, 290, 330, 310],
                                    lineStyle: {
                                        normal:{
                                            color:'green'
                                        }
                                    }
                            },
                            {
                                name:'临时放行',
                                type:'line',
                                stack: '总量',
                                data:[150, 232, 201, 154, 190, 330, 410],
                                    lineStyle: {
                                        normal:{
                                            color:'yellow'
                                        }
                                    }
                            }
                        ],
                        textStyle: {
                            fontWeight: 'normal',              //标题颜色
                                color: '#FFF'
                            }
                    };
                 
                         // 自适应配置
                         myChart.setOption(option);
                        window.addEventListener("resize", function () {
                            myChart.resize();
                        });
                     </script>

文件下载:
Echarts.zip

标签:none

添加新评论