关于flask入门教程-ajax+echarts实现大屏展示

vlambda
2022-03-19

关于flask入门教程-ajax+echarts实现大屏展示

陆陆续续写了一个系列的flask入门教程了，最后以一个半成品大屏做个了结，也算是一段时间的成果吧，毕竟不是专业码农，只是爱好而已，还有很多其他的事情等待探索。

大屏用到的技术主要包括标准的HTML、CSS、Javascript，再往细分包括了jquery、bootstrap、flex，ajax，echarts，加上之前的flask，json。至于大屏展示这块，本人实在谈不上什么审美可研，总之要有主次，表达要有体系，不能为了动画而动画，为了呈现而呈现。

下面是一系列关于flask入门教程的列表。

1	关于flask入门教程-ajax+echarts实现关系图
2	关于flask入门教程-ajax+百度地图实现热力图
3	关于flask入门教程-ajax+echarts实现地图热力图
4	关于flask入门教程-ajax+echarts实现地图散点图
5	关于flask入门教程-ajax+echarts实现地图GDP展示
6	关于flask入门教程-ajax+echarts实现热力图
7	关于flask入门教程-ajax+echarts实现矩形树图
8	关于flask入门教程-ajax+echarts实现河流图
9	关于flask入门教程-ajax+echarts实现数量未知的折线图
10	关于flask入门教程-ajax+echarts简单实现一
11	关于flask入门教程-记录集转jsonify
12	关于flask入门教程-bootstrap-fileinput实现文件上传
13	关于flask入门教程-前端代码
14	关于flask入门教程-app代码
15	关于flask入门教程-整体框架
16	关于flask入门教程-关于日期控件DateTimePicker
17	关于flask入门教程-通过ajax删除数据
18	关于flask入门教程-自定义弹出框
19	关于flask入门教程-自定义弹出框
20	关于flask入门教程-分页的几种方式
21	关于flask入门教程-图书借阅系统-分页显示数据
22	关于flask入门教程-图书借阅系统-flask_SQLAlchemy高级用法
23	关于flask入门教程-图书借阅系统-原型设计
24	关于flask入门教程-图书借阅系统-数据库设计和ORM映射
25	关于flask入门教程-图书借阅系统-一

这是一个大屏的框架

为了便于调试，所有的css、javascript、html代码都写在一起了。

<html>
<head>
<meta chartset="utf-8">
<title>可视化echartcontainers图表</title>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script src="../static/js/jquery.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/echarts.min.js"></script>
<script src="static/js/bmap.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/china.js" type="text/javascript" charset="utf-8"></script>
<style>
.contains{height:100%;width:100%;background:url('static/images/bg.png');background-repeat:no-repeat;background-position:center;}
.header{height:80px;width:100%;background-size: cover;}
.header .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:2.8rem;align-items: center;height: 100%;}
.time{margin-right: 10px;font-size: 1.8rem;margin-top: -4rem;color: #fff;float: right;}
.time .label{font-weight:300}
.container{height:calc(100vh - 120px);width:100%;}
.toolbar{height:40px;width:100%;background-size: cover;background-position:center;bottom: 0;position: fixed;}
.toolbar .title{display:flex;justify-content:center;color:#fff;font-weight:bold;font-size:1.8rem;align-items: center;height: 100%;}

.item_left,.item_center,.item_right{height:100%; padding-right: 10px;padding-left: 10px;display: flex;}
.left,.middle,.right{display: flex;flex-direction: column;align-content: stretch;justify-content: stretch;width: 100%;}

.echartcontainer{flex:1;margin: 10px 0px;}
.infodiv{flex: 2;margin: 10px 0px;}
.mapdiv{flex:4;margin: 10px 0px;}

.item {margin-top: 0.85rem;}

.KPI {width: 100%;height: 100%;position: relative; margin: auto;}
.KPI ul{ margin-left:-.5rem;margin-right:-.5rem;  padding: .16rem 0;}
.KPI li{ float: left; width: 33.33%; text-align: center; position: relative}
.KPI li:before{ position:relative; content: ""; height:30%; width: 1px; background: rgba(255,255,255,.1); right: 0; top: 15%;}
.KPI li:last-child:before{ width: 0;}
.KPI li h2{ font-size:2rem; color: #c5ccff;font-family:"SimHei";}
.KPI li span{ font-size:1.2rem; color: #fff; opacity: .5;font-family:"Microsoft YaHei";}

.border .chart_title{position:relative;height:35px;margin:5px 0;}
.border .chart_title span{color:#fff;font-size:18px;line-height:35px;}
.border .pie-chart{height:calc(100% - 50px);}
.border .radar-chart{height:calc(100% - 50px);}
.border .stack-chart{height:calc(100% - 50px);}
.border .histogram-chart{height:calc(100% - 50px);}
.border .rose-chart{height:calc(100% - 50px);}
.border .gdpmap{height:calc(100% - 35px);}
.border .board-chart{height:100%;}

.border{
    border: 2px solid #02a6b5;
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
}
.border:before{
    content: '';
    position: absolute;
    width: 88%;
    bottom: -2px;
    top: -2px;
    left: 6%;
    border-bottom: 2px solid #0b3146;
    border-top: 2px solid #0b3146;
}
.border:after{
    content: '';
    position: absolute;
    height: 76%;
    left: -2px;
    right: -2px;
    top: 12%;
    border-left: 2px solid #0b3146;
    border-right: 2px solid #0b3146;
}
</style>
</head>
<body class="contains">
   <div class="header">
      <div class = "title" >数据可视化大屏</div>
      <div class = "time" >当前时间：<label>2020-05-27 08:36:58</label></div>
   </div>
   <div class="container">
      <div class="row">
         <div class="col-md-3 item_left">
            <div class="left">
               <div class="echartcontainer">
                  <div class="border">                  
                     <div class="KPI">
                         <ul >
                             <li><h2>1824</h2><span>本月问题数量</span></li>
                             <li><h2>1920</h2><span>上月问题数量</span></li>
                             <li><h2>5%</h2><span>环比增长</span></li>
                         </ul>
                         <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                         <ul>
                             <li><h2>824</h2><span>本月治理数量</span></li>
                             <li><h2>710</h2><span>上月治理数量</span></li>
                             <li><h2>14%</h2><span>环比增长</span></li>
                         </ul>
                     </div>                   
                  </div>
               </div>
               <div class="echartcontainer" >
                  <div class="border">
                     <div class="chart_title">
                        <span>饼状图</span>
                     </div>
                     <div class="pie-chart" id="pie-chart"></div>
                  </div>
               </div>
               <div class="echartcontainer">
                  <div class="border">
                     <div class="chart_title">
                        <span>雷达图</span>
                     </div>                
                     <div class="radar-chart" id="radar-chart"></div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-md-6 item_center">
            <div class="middle">
               <div class="infodiv">
                  <div class="border">
                     <div class="board-chart" id="board-chart"></div>   
                  </div>          
               </div>
               <div class="mapdiv">
                  <div class="border">
                     <div class="chart_title">
                        <span>地图热力图</span>
                     </div>                
                     <div class="gdpmap" id="gdpmap"></div>                
                  </div>       
               </div>
            </div>
         </div>
         <div class="col-md-3 item_right">
            <div class="right">
               <div class="echartcontainer">
                  <div class="border">
                     <div class="chart_title">
                        <span>堆积图</span>
                     </div>                
                     <div class="stack-chart" id="stack-chart"></div>                        
                  </div>
               </div>
               <div class="echartcontainer">
                  <div class="border">
                     <div class="chart_title">
                        <span>柱状图</span>
                     </div>                
                     <div class="histogram-chart" id="histogram-chart"></div>                        
                  </div>
               </div>
               <div class="echartcontainer">
                  <div class="border">
                     <div class="chart_title">
                        <span>旭日图</span>
                     </div>                
                     <div class="rose-chart" id="rose-chart"></div>                      
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="toolbar">
      <div class = "title" >数据可视化状态栏    ©1999-2022不胜人生一场醉</div>
   </div> 
   
<script type="text/javascript">
$(function(){
   pieChar();
   mapChar();
   radarChar();
   stackChar();
   boardChar();
   histogramChar();
   roseChar();
});
window.onresize = function(){
       pieChart.resize();
       mapChart.resize();
       radarChart.resize();
       stackChart.resize();
       boardChart.resize();
       histogramChart.resize();
       roseChart.resize();
}

//饼状图
var pieChart="";
function pieChar(){    
   pieChart= echarts.init(document.getElementById("pie-chart"));
   option = {}
   pieChart.setOption(option);
}

</script>  
   
</body>
</html>

下面是加了echarts之后的效果图，只是为了效果而效果，满足自己的愿望而已。

下面是具体的两个echarts的js代码，来自echarts官网

//饼状图
var pieChart="";
function pieChar(){    
   pieChart= echarts.init(document.getElementById("pie-chart"));
   option = {
          color:["#4f8bf9","#fea31e","#959595"],
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
      grid: {
               x:'10%',
               y:'10%',
               x2:'10%',
               y2:'10%',
               containLabel: true
             },     
          series: [ {
                  name:'访问来源',
                  type:'pie',
                  selectedMode: 'single',
                  radius: [0, '60%'],
         center:["50%","42%"],
                  label: {
                      normal: {
                             position: 'outside',
                             formatter: "{b}:{d}%"    
                      }
         }, 
         data:[
            {value:556, name:'正常'},
            {value:100, name:'告警',selected:true},
                 {value:30, name:'离线'}
                     ]
           }]
   };
   pieChart.setOption(option);
}

var mapChart="";
function mapChar(){    
      mapChart = echarts.init(document.getElementById('gdpmap'));
      option = {
       title: {
           text: '中国GDP地图',
           subtext: 'data from china.js',
           sublink: '测试',
           left: 'center'
       },
     grid: {
            x:'10%',
            y:'10%',
            x2:'10%',
            y2:'10%',
            containLabel: true
          },          
       geo:{
          map:'china'
       },
       tooltip : {
           trigger: 'item'
       },  
   };
       // 使用刚指定的配置项和数据显示图表。
       mapChart.setOption(option);
      // 使用刚指定的配置项和数据显示图表。
   
   mapChart.hideLoading();
   result=[{'name': '北京', 'value': 14113.6}, {'name': '天津', 'value': 9224.46}, {'name': '河北', 'value': 20394.26}, {'name': '山西', 'value': 9200.86}, {'name': '内蒙古', 'value': 11672.0}, {'name': '辽宁', 'value': 18457.3}, {'name': '吉林', 'value': 8667.58}, {'name': '黑龙江', 'value': 10368.6}, {'name': '上海', 'value': 17165.98}, {'name': '江苏', 'value': 41425.48}, {'name': '浙江', 'value': 27722.31}, {'name': '安徽', 'value': 12359.33}, {'name': '福建', 'value': 14737.12}, {'name': '江西', 'value': 9451.26}, {'name': '山东', 'value': 39169.92}, {'name': '河南', 'value': 23092.36}, {'name': '湖北', 'value': 15967.61}, {'name': '湖南', 'value': 16037.96}, {'name': '广东', 'value': 46013.06}, {'name': '广西', 'value': 9569.8539}, {'name': '海南', 'value': 2064.5}, {'name': '重庆', 'value': 7925.58}, {'name': '四川', 'value': 17185.48}, {'name': '贵州', 'value': 4602.16}, {'name': '云南', 'value': 7224.18}, {'name': '西藏', 'value': 507.46}, {'name': '陕西', 'value': 10123.48}, {'name': '甘肃', 'value': 4120.75}, {'name': '青海', 'value': 1350.43}, {'name': '宁夏', 'value': 1689.65}, {'name': '新疆', 'value': 5437.47}];
   option={
     //backgroundColor: '#FFFFFF',
     title: {
       text: '地域分布',
       top: 14,
       left: 14,
       textStyle: {
         borderColor: '#333333',
         fontWeight: 400,
         fontFamily: 'PingFangSC-Regular, PingFang SC',
         color: '#666666',
         fontSize: 14
       }
     },
     tooltip: {
       trigger: 'item',
       show: true,
       formatter: function(params) {
         //return params.data['region'] + '：' + params.data['GDP'] + '%'
         return params.name + '：' + params.data['value'] 
       }
     },
     // 左侧小导航图标
     visualMap: {
       show: false,
       x: 'left',
       y: 'center',
       min: 0,
       max: 50000,
       color: ['#3644BF', '#B7C8FF']
     },
     // 配置属性
     series: [{
       name: '数据',
       type: 'map',
       mapType: 'china',
       roam: false,
       label: {
         normal: {
           show: false // 省份名称
         },
         emphasis: {
           show: false
         }
       },
       itemStyle: {
         normal: { // 未选中状态
           // areaColor: 'red', // 南沙诸岛背景颜色
           borderColor: 'transparent',
           label: {
             show: true// 显示名称
           }
         },
         emphasis: { // 也是选中样式
           areaColor: '#49FFE9',
           shadowColor: 'rgba(0,0,0,0.2)',
           shadowOffsetX: 0, // 阴影水平方向上的偏移距离
           shadowOffsetY: 4, // 阴影垂直方向上的偏移距离
           shadowBlur: 8, // 图形阴影的模糊大小。
           label: {
             show: true,
             textStyle: {
               color: '#fff'
             }
           }
         }
       },
       data:result
     }]
   };
   mapChart.setOption(option);
}