精华内容
下载资源
问答
  • jquery+bootstrap+echarts数据可视化大屏展示特效实例 项目描述: 数据可视化大屏展示用的越来越多,自己也捣鼓做一个。 运行环境: Chrome 项目技术(必填): jquery+bootstrap+echarts
  • 数据可视化大屏+Echarts+HTML+vscode开发环境,数据可视化大屏Echarts,柱状图、折线图、饼图、中国地图怎么使用。
  • 基于Python + Flask + PyEcharts + Bootstrap实现南京美食数据分析可视化平台

    毕业设计:基于Python + Flask + PyEcharts + Bootstrap实现南京美食数据分析可视化平台

    解压缩后,导入python即可运行

    网页前端展示使用的是bookstrap框架

    后端使用flask框架

    代码注释贼多,可读性极高,

    制作参考bilibili王巍老师爬虫教学视频+自己附加功能

    欢迎尝试!







    项目代码下载

    链接:https://pan.baidu.com/s/1E1jJwxT8zTL7SfjlcRbpOg
    提取码:gmcu
    复制这段内容后打开百度网盘手机App,操作更方便哦

    展开全文
  • win 10 + pycharm + Django 2.0 + Bootstrap 3.3.7 + echarts 3 详见“scrapy框架实现2019-nCoV省级疫情每日数据爬取”,仅爬取了2020-03-05的数据,以此为例。

    目录

    环境

    数据来源

    实现步骤

    第一步:新建项目及应用配置

    第二步:页面布局

    第三步:数据读取及预处理

    第四步:数据可视化图表

    第五步:样式调整及主题设置

    完整代码

    实现页面

    主题

    特别说明

    注意事项

    存在的问题


    环境

    win 10 + pycharm + Django 2.0  + Bootstrap 3.3.7 + echarts 3

    数据来源

    详见“scrapy框架实现2019-nCoV省级疫情每日数据爬取”,仅爬取了2020-03-05的数据,以此为例。

    实现步骤

    第一步:新建项目及应用配置

    新建项目(需cd到指定位置):

    django-admin startproject yiqing_vs
    

    新建应用(需cd到新建项目的目录下):

    pyhton manage.py startapp vs
    

    启动服务,并访问127.0.0.1:8000进行测试:

    python manage.py runserver

    测试成功,即可用pycharm打开项目进行路由等相关配置:

    (1)yiqing_vs/settings.py(新增应用vs的配置)

    INSTALLED_APPS = [
        'django.contrib.admin',
        'django.contrib.auth',
        'django.contrib.contenttypes',
        'django.contrib.sessions',
        'django.contrib.messages',
        'django.contrib.staticfiles',
    
        'vs.apps.VsConfig'
    ]

    (2)yiqing_vs/urls.py(新增应用vs的路由配置信息)

    from django.contrib import admin
    from django.urls import path, include
    
    urlpatterns = [
        path('admin/', admin.site.urls),
    
        path('vs/', include('vs.urls')),
        path('', include('vs.urls'))
    ]

    (3)vs/views.py(添加def)

    from django.http import HttpResponse
    
    def get_index_page(request):
        return HttpResponse("hello world!")

    (4)vs/urls.py(新建urls.py,并进行如下设置)

    from django.urls import path, include
    import vs.views
    
    urlpatterns = [
        path('vs', vs.views.get_index_page),
        path('', vs.views.get_index_page),
        path('/', vs.views.get_index_page),
    ]

    (5)测试,如果http://127.0.0.1:8000成功返回“hello world!”,则表示配置成功。

    第二步:页面布局

    以Bootstrap栅格系统即可快速完成页面布局,并实现Carousel滚动播放。

    引入Bootstrap及jQuery:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
                crossorigin="anonymous"></script>

    Carousel部分代码如下:

                <div id="cj" class="col-md-12 cj"><!-- 上部控件-->
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active carl-img" style="background: url('../../../static/img/tx.png') no-repeat; background-size: 100% 100%;">
                                <p><a href="https://news.qq.com/zt2020/page/feiyan.htm#/" target="_blank"><img src="../../../static/img/tx.png" alt="腾讯疫情实时监测" ></a></p>
                                <div class="carousel-caption"></div>
                            </div>
                            <div class="item carl-img" style="background: url('../../../static/img/xl.png') no-repeat; background-size: 100% 100%;">
                                <p><a href="https://news.sina.cn/zt_d/yiqing0121" target="_blank"><img src="../../../static/img/xl.png" alt="新浪疫情实时监测" ></a></p>
                                <div class="carousel-caption"></div>
                            </div>
                            <div class="item carl-img" style="background: url('../../../static/img/bd.png') no-repeat; background-size: 100% 100%;">
                                <p><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia" target="_blank"><img src="../../../static/img/bd.png" alt="百度疫情实时监测" ></a></p>
                                <div class="carousel-caption"></div>
                            </div>
                        </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                    </a>
                    </div>
    
                </div>

    第三步:数据读取及预处理

    vs/views.py的def中实现,并在vs/urls.py中配置路由(之前已经做好了)。为了测试,先在vs目录下新建templates/vs/index.html

    vs/views.py的def代码如下:

    def read_data(request):
        dir = '../data/2020-3-5.csv'
        data = pd.read_csv(dir)
        # col_name: province_confirm	province_dead	province_heal	province_name	province_suspect
        return data
    
    def get_index_page(request):
        data = read_data(request)
        return render(request, 'vs/index.html')

    测试成功则可以按需配置接口,这里最重要的是注意数据格式,一般以数值或list传参。

    代码如下(这里的代码有些冗余,没有优化处理,暂时只以能方便实现为目标):

    def get_index_page(request):
        # dir = '../data/2020-3-5.csv'
        # data = pd.read_csv(dir, header=0)
        data = read_data(request)
        return render(request, 'vs/index.html',
                               {
                                    "data": data.values.T.tolist()[1:],
                                    "crawl_date": data["crawl_date"][0],
                                    "province_name": data["province_name"][1:].to_list(),
                                    "province_confirm": data["province_confirm"][1:].to_list(),
                                    # "province_name": json.dumps(data["province_name"].to_list()),
                                    # "province_confirm": json.dumps(data["province_confirm"].to_list()),
                                    "province_dead": data["province_dead"][1:].to_list(),
                                    "province_heal": data["province_heal"][1:].to_list(),
                                    "province_suspect": data["province_suspect"][1:].to_list(),
                                    "hubei_name": data["province_name"][0],
                                    "hubei_confirm": data["province_confirm"][0],
                                    "hubei_dead": data["province_dead"][0],
                                    "hubei_heal": data["province_heal"][0],
                                    "hubei_suspect": data["province_suspect"][0],
                                    "hubei_data": [data["province_confirm"][0], data["province_dead"][0], data["province_heal"][0], data["province_suspect"][0]],
                                    "name_all": data["province_name"].to_list(),
                                    "confirm_all": data["province_confirm"].to_list(),
                                    # "list_confirm": [data["province_name"], data["province_confirm"]],
                                    "list_confirm": [list(data["province_name"]), list(data["province_confirm"])],
                                    "list_confirm2": [list(data["province_name"][1:]), list(data["province_confirm"][1:])], # 除去湖北的省份
                                    "sum_confirm": sum(data["province_confirm"][1:]), # 除去湖北的省份
                                    "sum_dead": sum(data["province_dead"][1:]),  # 除去湖北的省份
                                    "sum_heal": sum(data["province_heal"][1:]),  # 除去湖北的省份
                                    "sum_suspect": sum(data["province_suspect"][1:])  # 除去湖北的省份
                               })

    第四步:数据可视化图表

    以echarts 3实现,图表参考配置文档官方示例

    导入相关js文件步骤:

    (1)根目录新建文件夹:static/js(如果需要,一并建立img和css文件夹);

    (2)配置yiqing_vs/settings.py:

    # Static files (CSS, JavaScript, Images)
    # https://docs.djangoproject.com/en/2.0/howto/static-files/
    
    STATIC_URL = '/static/'
    STATIC_ROOT = os.path.join(BASE_DIR, 'static')
    STATICFILES_DIRS = (
        # ('css', os.path.join(STATIC_ROOT, 'css').replace('\\', '/')),
        ('js', os.path.join(STATIC_ROOT, 'js').replace('\\', '/')),
        ('img', os.path.join(STATIC_ROOT, 'img').replace('\\', '/')),
    )

    (3)相关文件放置其中,如果需要绘制中国地图,则还需要导入china.js等文件;

    (4)html文件引入相关js文件:

        <script src="../../../static/js/echarts.js"></script>
        <script src="../../../static/js/china.js"></script>
        <script src="../../../static/js/bmap.js"></script>
        <script src="../../../static/js/china-contour.js"></script>

    每个图表绘制均需读入数据、初始化、设置、使用设置四个步骤:

        <script type="text/javascript">
            var list_confirm2 = {{ list_confirm2|safe }};
    
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar1"), theme);
            
            // 指定图表的配置项和数据
            var option = {
                title: {
                    ...
                },
                tooltip: {
                    ...
                },
                legend: [{
                    ...
                },{
                    ...
                }],
                series: [{
                    ...
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>

    第五步:样式调整及主题设置

    样式调整主要以css实现,这里主要叙述echarts的主题设置:

    (1)下载主题js文件:https://www.echartsjs.com/zh/download-theme.html

    (2)主题.js放置于static/js目录下;

    (3)html引用.js:

        <script src="../../../static/js/theme/dark.js"></script>
        <script src="../../../static/js/theme/infographic.js"></script>
        <script src="../../../static/js/theme/macarons.js"></script>
        <script src="../../../static/js/theme/roma.js"></script>
        <script src="../../../static/js/theme/shine.js"></script>
        <script src="../../../static/js/theme/vintage.js"></script>

    (4) 绘图中使用主题(主题名称与.js文件名对应):

    var theme = 'dark'
    var myChart = echarts.init(document.getElementById("bar1"), theme);

    (5)如果需要多个主题,我使用的是最笨的方法,即每个html对应一个主题,配置路由实现不同主题的访问。

    完整代码

    主要是index.html和views/urls.py的代码。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>index</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
              integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    {#    <script src="../../../static/js/echarts.min.js"></script>#}
        <script src="../../../static/js/echarts.js"></script>
    {#    <script src="../../../static/js/echarts-gl.js"></script>#}
        <script src="../../../static/js/china.js"></script>
        <script src="../../../static/js/bmap.js"></script>
        <script src="../../../static/js/china-contour.js"></script>
    {#    <script src="https://cdn.bootcss.com/echarts/3.7.1/extension/bmap.min.js"></script>#}
    
    {#    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>#}
        <script>
            var theme = '';
        </script>
        <script src="../../../static/js/theme/dark.js"></script>
        <script src="../../../static/js/theme/infographic.js"></script>
        <script src="../../../static/js/theme/macarons.js"></script>
        <script src="../../../static/js/theme/roma.js"></script>
        <script src="../../../static/js/theme/shine.js"></script>
        <script src="../../../static/js/theme/vintage.js"></script>
        <style>
            body{
                width: 100%;
                height: 100%;
                background: url("../../../static/img/theme_shine.png" ) repeat;
            }
            div{
                {#border: dimgrey 0.1px solid;#}
                text-align: center;
                align-content: center;
            }
            .border_div{
                border: dimgrey 0.1px solid;
            }
            .canvas{
                {#display: block;#}
                {#align-content: center;#}
                width: 100%;
                height: 400px;
    
            }
            .map{
                width: 100%;
                height: 675px;
            }
            .cj{
                width: 100%;
                height: 275px;
            }
            .cj2{
                width: 100%;
                height: 250px;
            }
            .carl-img{
                width: 100%;
                height: 250px;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                padding-top: 5px;
            }
            .carl-img p{
                text-align: center;
            }
            .bar1{
                vertical-align: center;
                text-align: center;
            }
            .banner{
                height: 120px;
                font-size: 40px;
                text-align: center;
                line-height: 120px;
                font-weight: bold;
            }
    
        </style>
    </head>
    <body>
    <!--    标题-->
        <div class="col-md-12 banner border_div">疫情可视化分析</div>
    <!--    主要内容-->
        <div class="col-md-12 border_div">
    <!--        左边的三个垂直图-->
            <div class="col-md-4 ">
                <div id="bar1" class="col-md-12 canvas bar1 border_div">左1</div>
                <div id="bar2" class="col-md-12 canvas border_div">左2</div>
                <div id="bar3" class="col-md-12 canvas border_div">左3</div>
            </div>
    <!--        中间的地图-->
            <div class="col-md-4"><!-- 地图地图-->
                <div id="cj" class="col-md-12 cj"><!-- 上部控件-->
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <!-- Indicators -->
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        </ol>
                        <!-- Wrapper for slides -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active carl-img" style="background: url('../../../static/img/tx.png') no-repeat; background-size: 100% 100%;">
                                <p><a href="https://news.qq.com/zt2020/page/feiyan.htm#/" target="_blank"><img src="../../../static/img/tx.png" alt="腾讯疫情实时监测" ></a></p>
                                <div class="carousel-caption"></div>
                            </div>
                            <div class="item carl-img" style="background: url('../../../static/img/xl.png') no-repeat; background-size: 100% 100%;">
                                <p><a href="https://news.sina.cn/zt_d/yiqing0121" target="_blank"><img src="../../../static/img/xl.png" alt="新浪疫情实时监测" ></a></p>
                                <div class="carousel-caption"></div>
                            </div>
                            <div class="item carl-img" style="background: url('../../../static/img/bd.png') no-repeat; background-size: 100% 100%;">
                                <p><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia" target="_blank"><img src="../../../static/img/bd.png" alt="百度疫情实时监测" ></a></p>
                                <div class="carousel-caption"></div>
                            </div>
                        </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                    </a>
                    </div>
    
                </div>
                <div id="mymap" class="col-md-12 map border_div">地图部分</div>
                <div id="cj2" class="col-md-12 cj2"><!-- 下部控件--></div>
            </div>
    <!--        右边的三个垂直图-->
            <div class="col-md-4">
                <div id="bar4" class="col-md-12 canvas border_div">右1</div>
                <div id="bar5" class="col-md-12 canvas border_div">右2</div>
                <div id="bar6" class="col-md-12 canvas border_div">右3</div>
            </div>
        </div>
    
    {#bar1-今日确诊人数(除湖北)#}
        <script type="text/javascript">
            var list_confirm2 = {{ list_confirm2|safe }};
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar1"), theme);
            var convertData2 = function (data) {
                var res = [];
                for (var i = 0; i < data[0].length; i++) {
                    var geoCoord = data[0][i];
                    if (geoCoord) {
                        res.push({
                            name: data[0][i],
                            value: data[1][i]
                        });
                    }
                }
            return res;
        };
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '今日确诊人数',
                    left: 'center'
                },
                tooltip: {
                    {#trigger: 'item',#}
                    {#formatter: '{a} <br/>{b}: {c} ({d}%)'#}
                },
                legend: [{
                    type: 'scroll',
                    orient: 'vertical',
                    left: 10,
                    top: 20,
                    bottom: 20,
                    data: convertData2(list_confirm2).name,
                    selected: convertData2(list_confirm2).selected
                },{
                    type: 'scroll',
                    orient: 'vertical',
                    right: 10,
                    top: 20,
                    bottom: 20,
                    data: convertData2(list_confirm2).name,
                    selected: convertData2(list_confirm2).selected
                }],
                series: [{
                    name: '今日确诊人数1',
                    type: 'pie',
                    radius: [70, 110],
                    center: ['25%', '55%'],
                    {#roseType: 'radius',#}
                    avoidLabelOverlap: false,
                    label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                    data: convertData2(list_confirm2)
                },{
                    name: '今日确诊人数2',
                    type: 'pie',
                    radius: [20, 100],
                    center: ['60%', '60%'],
                    roseType: 'radius',
                    {#data: [5, 20, 36, 10, 10, 20]#}
                    label: {
                        show: true
                    },
                    emphasis: {
                        label: {
                            show: true
                        }
                    },
                    data: convertData2(list_confirm2)
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    {#bar2-今日治愈人数(除湖北)#}
        <script type="text/javascript">
            var province_name = {{ province_name|safe }};
            var province_heal = {{ province_heal|safe }};
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar2"), theme);
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '今日治愈人数',
                    left: "center"
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore: {show: true},
                        saveAsImage: {show: true}
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        {#data: province_name,#}
                        data: ['河南', '\n浙江',	'湖南', '\n安徽', '江西', '\n山东', '江苏', '\n重庆', '四川', '\n黑龙江', '北京', '\n上海', '河北', '\n福建', '广西', '\n陕西', '云南', '\n海南', '贵州', '\n天津', '山西', '\n辽宁', '香港', '\n甘肃', '吉林', '\n新疆', '内蒙古', '\n宁夏', '台湾', '\n青海', '澳门', '\n西藏'],
                        'axisLabel':{'interval':0},
                        splitLine: {show: false}
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '治愈人数(人)'
                    }
                ],
                series: [
                    {
                        name: '治愈人数',
                        type: 'bar',
                        data: province_heal,
                        markPoint: {
                            data: [
                                {type: 'max', name: '最大值'},
                                {type: 'min', name: '最小值'}
                            ]
                        },
                        markLine: {
                            data: [
                                {type: 'average', name: '平均值'}
                            ]
                        }
                    }
                ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    {#bar3-其他省的情况 #}
        <script type="text/javascript">
            {#var province_name = {{ province_name|safe }};#}
            {#var province_suspect = {{ province_suspect|safe }};#}
            var sum_confirm = {{ sum_confirm|safe }};
            var sum_dead = {{ sum_dead|safe }};
            var sum_heal = {{ sum_heal|safe }};
            var sum_suspect = {{ sum_suspect|safe }};
    
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar3"), theme);
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '今日新增病例统计(除湖北省)',
                    left: "center"
                },
                tooltip: {
                    formatter: '{a} <br/>{b} : {c}%'
                },
                toolbox: {
                    feature: {
                        restore: {},
                        saveAsImage: {}
                    }
                },
                series: [
                    {
                        name: '今日新增死亡病例',
                        type: 'gauge',
                        center: ['18%', '55%'],
                        min: 0,
                        max: 120,
                        detail: {formatter: '{value}'},
                        data: [{value: sum_dead, name: '今日新增死亡病例'}]
                    },{
                        name: '今日新增疑似病例',
                        type: 'gauge',
                        center: ['50%', '55%'],
                        min: 0,
                        max: 120,
                        detail: {formatter: '{value}'},
                        data: [{value: sum_suspect, name: '今日新增疑似病例'}]
                    },{
                        name: '今日新增确诊病例',
                        type: 'gauge',
                        center: ['82%', '55%'],
                        min: 0,
                        max: 120,
                        detail: {formatter: '{value}'},
                        data: [{value: sum_confirm, name: '今日新增确诊病例'}]
                    }
                ]
            };
    
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    {#bar4-湖北省情况 #}
        <script type="text/javascript">
            var hubei_confirm = {{ hubei_confirm|safe }};
            var hubei_dead = {{ hubei_dead|safe }};
            var hubei_heal = {{ hubei_heal|safe }};
            var hubei_suspect = {{ hubei_suspect|safe }};
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar4"), theme);
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '湖北省情况',
                    left: "center"
                },
                legend: {
                    data: ['新增确诊病例','新增疑似病例', '新增治愈病例', '新增死亡病例']
                },
                radar: [
                    {
                        indicator: [
                            { text: '新增确诊病例' },
                            { text: '新增疑似病例' },
                            { text: '新增治愈病例' },
                            { text: '新增死亡病例' }
                        ],
                        center: ['25%', '50%'],
                        radius: 120,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: 'circle',
                        name: {
                            formatter: '【{value}】',
                            textStyle: {
                                color: '#72ACD1'
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: ['rgba(114, 172, 209, 0.2)',
                                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                                shadowColor: 'rgba(0, 0, 0, 0.3)',
                                shadowBlur: 10
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        }
                    },{
                        indicator: [
                            { text: '新增确诊病例' },
                            { text: '新增疑似病例' },
                            { text: '新增治愈病例' },
                            { text: '新增死亡病例' }
                        ],
                        center: ['75%', '50%'],
                        radius: 120,
                        startAngle: 90,
                        splitNumber: 4,
                        shape: 'rect',
                        name: {
                            formatter: '【{value}】',
                            textStyle: {
                                color: '#72ACD1'
                            }
                        },
                        splitArea: {
                            areaStyle: {
                                color: ['rgba(114, 172, 209, 0.2)',
                                    'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                                    'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'],
                                shadowColor: 'rgba(0, 0, 0, 0.3)',
                                shadowBlur: 10
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.5)'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '雷达图1',
                        type: 'radar',
                        emphasis: {
                            lineStyle: {
                                width: 4,
                                color: 'rgb(3,82,127)'
                            }
                        },
                        data: [
                            {
                                value: [hubei_confirm, hubei_dead, hubei_heal, hubei_suspect],
                                name: '湖北省情况',
                                areaStyle: {
                                    color: 'rgba(255, 255, 255, 0.5)'
                                },
                                lineStyle: {
                                    type: 'solid',
                                    symbol: 'none'
                                },
                                textStyle: {
                                    color: 'rgb(3,82,127)'
                                },
                                label: {
                                    show: true,
                                    formatter: function(params) {
                                        return params.value;
                                    },
                                    color: 'rgb(3,82,127)'
                                }
                            }
                        ]
                    },{
                        name: '雷达图2',
                        type: 'radar',
                        emphasis: {
                            lineStyle: {
                                width: 4,
                                color: 'rgb(3,82,127)'
                            }
                        },
                        data: [
                            {
                                value: [hubei_confirm, hubei_dead, hubei_heal, hubei_suspect],
                                name: '湖北省情况',
                                symbol: 'rect',
                                symbolSize: 5,
                                lineStyle: {
                                    type: 'dashed'
                                },
                                areaStyle: {
                                    color: 'rgba(255, 255, 255, 0.5)'
                                },
                                textStyle: {
                                    color: 'rgb(3,82,127)'
                                },
                                label: {
                                    show: true,
                                    formatter: function(params) {
                                        return params.value;
                                    },
                                    color: 'rgb(3,82,127)'
                                }
                            }
                        ]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    {#bar5-今日新增治愈人数(全国)#}
        <script type="text/javascript">
            {#var alldata = {{ data|safe }};#}
            {#var province_name = alldata[3];#}
            {#var province_confirm = alldata[1];#}
            var province_name = {{ province_name|safe }};
            var province_confirm = {{ province_confirm|safe }};
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar5"), theme);
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '虚拟数据(仅供测试图表)',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    data: province_name
                },
                yAxis: {
                    splitLine: {
                        show: false
                    }
                },
                toolbox: {
                    left: 'center',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                dataZoom: [{
                    startValue: '2014-06-01'
                }, {
                    type: 'inside'
                }],
                visualMap: {
                    top: 10,
                    right: 10,
                    pieces: [{
                        gt: 0,
                        lte: 2,
                        color: '#096'
                    }, {
                        gt: 2,
                        lte: 4,
                        color: '#ffde33'
                    }, {
                        gt: 4,
                        lte: 6,
                        color: '#ff9933'
                    }, {
                        gt: 6,
                        lte: 8,
                        color: '#cc0033'
                    }, {
                        gt: 8,
                        lte: 10,
                        color: '#660099'
                    }, {
                        gt: 10,
                        color: '#7e0023'
                    }],
                    outOfRange: {
                        color: '#999'
                    }
                },
                series: [{
                    name: '虚拟数据(仅供测试图表)',
                    type: 'line',
                    data: province_confirm,
                    markLine: {
                        silent: true,
                        data: [{
                            yAxis: 50
                        }, {
                            yAxis: 100
                        }, {
                            yAxis: 150
                        }, {
                            yAxis: 200
                        }, {
                            yAxis: 300
                        }]
                    }
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    {#bar6-#}
        <script type="text/javascript">
            {#var province_name = {{ province_name|safe }};#}
            {#var province_confirm = {{ province_confirm|safe }};#}
            {#var province_dead = {{ province_dead|safe }};#}
            {#var province_suspect = {{ province_suspect|safe }};#}
            {#var province_heal = {{ province_heal|safe }};#}
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("bar6"), theme);
            // 指定图表的配置项和数据
            option = {
                title: {
                    text: '测试数据-demo',
                    left: "center"
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0.2)',
                            width: 1,
                            type: 'solid'
                        }
                    }
                },
    
                legend: {
                    data: ['DQ', 'TY', 'SS', 'QG', 'SY', 'DD'],
                    right: 10
                },
    
                singleAxis: {
                    top: 50,
                    bottom: 50,
                    axisTick: {},
                    axisLabel: {},
                    type: 'time',
                    axisPointer: {
                        animation: true,
                        label: {
                            show: true
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            type: 'dashed',
                            opacity: 0.2
                        }
                    }
                },
    
                series: [
                    {
                        type: 'themeRiver',
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 20,
                                shadowColor: 'rgba(0, 0, 0, 0.8)'
                            }
                        },
                        data: [['2015/11/08',10,'DQ'],['2015/11/09',15,'DQ'],['2015/11/10',35,'DQ'],
                        ['2015/11/11',38,'DQ'],['2015/11/12',22,'DQ'],['2015/11/13',16,'DQ'],
                        ['2015/11/14',7,'DQ'],['2015/11/15',2,'DQ'],['2015/11/16',17,'DQ'],
                        ['2015/11/17',33,'DQ'],['2015/11/18',40,'DQ'],['2015/11/19',32,'DQ'],
                        ['2015/11/20',26,'DQ'],['2015/11/21',35,'DQ'],['2015/11/22',40,'DQ'],
                        ['2015/11/23',32,'DQ'],['2015/11/24',26,'DQ'],['2015/11/25',22,'DQ'],
                        ['2015/11/26',16,'DQ'],['2015/11/27',22,'DQ'],['2015/11/28',10,'DQ'],
                        ['2015/11/08',35,'TY'],['2015/11/09',36,'TY'],['2015/11/10',37,'TY'],
                        ['2015/11/11',22,'TY'],['2015/11/12',24,'TY'],['2015/11/13',26,'TY'],
                        ['2015/11/14',34,'TY'],['2015/11/15',21,'TY'],['2015/11/16',18,'TY'],
                        ['2015/11/17',45,'TY'],['2015/11/18',32,'TY'],['2015/11/19',35,'TY'],
                        ['2015/11/20',30,'TY'],['2015/11/21',28,'TY'],['2015/11/22',27,'TY'],
                        ['2015/11/23',26,'TY'],['2015/11/24',15,'TY'],['2015/11/25',30,'TY'],
                        ['2015/11/26',35,'TY'],['2015/11/27',42,'TY'],['2015/11/28',42,'TY'],
                        ['2015/11/08',21,'SS'],['2015/11/09',25,'SS'],['2015/11/10',27,'SS'],
                        ['2015/11/11',23,'SS'],['2015/11/12',24,'SS'],['2015/11/13',21,'SS'],
                        ['2015/11/14',35,'SS'],['2015/11/15',39,'SS'],['2015/11/16',40,'SS'],
                        ['2015/11/17',36,'SS'],['2015/11/18',33,'SS'],['2015/11/19',43,'SS'],
                        ['2015/11/20',40,'SS'],['2015/11/21',34,'SS'],['2015/11/22',28,'SS'],
                        ['2015/11/23',26,'SS'],['2015/11/24',37,'SS'],['2015/11/25',41,'SS'],
                        ['2015/11/26',46,'SS'],['2015/11/27',47,'SS'],['2015/11/28',41,'SS'],
                        ['2015/11/08',10,'QG'],['2015/11/09',15,'QG'],['2015/11/10',35,'QG'],
                        ['2015/11/11',38,'QG'],['2015/11/12',22,'QG'],['2015/11/13',16,'QG'],
                        ['2015/11/14',7,'QG'],['2015/11/15',2,'QG'],['2015/11/16',17,'QG'],
                        ['2015/11/17',33,'QG'],['2015/11/18',40,'QG'],['2015/11/19',32,'QG'],
                        ['2015/11/20',26,'QG'],['2015/11/21',35,'QG'],['2015/11/22',40,'QG'],
                        ['2015/11/23',32,'QG'],['2015/11/24',26,'QG'],['2015/11/25',22,'QG'],
                        ['2015/11/26',16,'QG'],['2015/11/27',22,'QG'],['2015/11/28',10,'QG'],
                        ['2015/11/08',10,'SY'],['2015/11/09',15,'SY'],['2015/11/10',35,'SY'],
                        ['2015/11/11',38,'SY'],['2015/11/12',22,'SY'],['2015/11/13',16,'SY'],
                        ['2015/11/14',7,'SY'],['2015/11/15',2,'SY'],['2015/11/16',17,'SY'],
                        ['2015/11/17',33,'SY'],['2015/11/18',40,'SY'],['2015/11/19',32,'SY'],
                        ['2015/11/20',26,'SY'],['2015/11/21',35,'SY'],['2015/11/22',4,'SY'],
                        ['2015/11/23',32,'SY'],['2015/11/24',26,'SY'],['2015/11/25',22,'SY'],
                        ['2015/11/26',16,'SY'],['2015/11/27',22,'SY'],['2015/11/28',10,'SY'],
                        ['2015/11/08',10,'DD'],['2015/11/09',15,'DD'],['2015/11/10',35,'DD'],
                        ['2015/11/11',38,'DD'],['2015/11/12',22,'DD'],['2015/11/13',16,'DD'],
                        ['2015/11/14',7,'DD'],['2015/11/15',2,'DD'],['2015/11/16',17,'DD'],
                        ['2015/11/17',33,'DD'],['2015/11/18',4,'DD'],['2015/11/19',32,'DD'],
                        ['2015/11/20',26,'DD'],['2015/11/21',35,'DD'],['2015/11/22',40,'DD'],
                        ['2015/11/23',32,'DD'],['2015/11/24',26,'DD'],['2015/11/25',22,'DD'],
                        ['2015/11/26',16,'DD'],['2015/11/27',22,'DD'],['2015/11/28',10,'DD']]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    {#map-地图#}
        <script type="text/javascript">
            // 进行echarts的初始化,以及定位到画布
        var mychart = echarts.init(document.getElementById("mymap"), theme);
    
        var geoCoordMap = {
                 '新疆': [86.61 , 40.79],
                 '西藏':[89.13 , 30.66],
                 '黑龙江':[128.34 , 47.05],
                 '吉林':[126.32 , 43.38],
                 '辽宁':[123.42 , 41.29],
                 '内蒙古':[112.17 , 42.81],
                 '北京':[116.40 , 40.40 ],
                 '宁夏':[106.27 , 36.76],
                 '山西':[111.95,37.65],
                 '河北':[115.21 , 38.44],
                 '天津':[117.04 , 39.52],
                 '青海':[97.07 , 35.62],
                 '甘肃':[103.82 , 36.05],
                 '山东':[118.01 , 36.37],
                 '陕西':[108.94 , 34.46],
                 '河南':[113.46 , 34.25],
                 '安徽':[117.28 , 31.86],
                 '江苏':[120.26 , 32.54],
                 '上海':[121.46 , 31.28],
                 '四川':[103.36 , 30.65],
                 '湖北':[112.29 , 30.98],
                 '浙江':[120.15 , 29.28],
                 '重庆':[107.51 , 29.63],
                 '湖南':[112.08 , 27.79],
                 '江西':[115.89 , 27.97],
                 '贵州':[106.91 , 26.67],
                 '福建':[118.31 , 26.07],
                 '云南':[101.71 , 24.84],
                 '台湾':[121.01 , 23.54],
                 '广西':[108.67 , 23.68],
                 '广东':[113.98 , 22.82],
                 '海南':[110.03 , 19.33],
                 '澳门':[113.54 , 22.19],
                 '香港':[114.17 , 22.32],
    
            };
        var data = {{ list_confirm|safe }};
    
        var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data[0].length; i++) {
                    var geoCoord = geoCoordMap[data[0][i]];
                    if (geoCoord) {
                        res.push({
                            name: data[0][i],
                            value: geoCoord.concat(data[1][i])
                        });
                    }
                }
            return res;
        };
        // 配置项和配置数据
        var option = {
            title: {
                text: '中国2019-nCoV省级疫情每日确诊病例分布图',
                left: 'center',
                textStyle:{
                    fontSize: 30
                }
            },
            tooltip: {},
            geo: {
                // 定义地图的类型
                map: 'china'
            },
            visualMap:{
                type:'continuous',
                min:0,
                max:200,
                calculable:true,
                inRange:{
                   color:[
                      '#50a3ba','#eac736','#d94e5d'
                   ]
                },
                textStyle:{
                    color:'#000000'
                },
                left:'right'
            },
    
            series: [
                {
                    name: '岗位数量',
                    // 画地图的类型
                    {#type: 'scatter',#}
                    {#type: 'effectScatter',#}
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    // 当前所使用的地图为geo类型的地图,后面我们还会学习bmap类型的地图
                    coordinateSystem: 'geo',
                    // data: [
                    //     {
                    //         name: '北京',
                    //         // 设置数据点,先设置经纬度,在设置值
                    //         value: [116.46, 39.92, 340]
                    //     }
                    // ]
                    data:convertData(data)
                }
            ]
        };
        mychart.setOption(option)
    
        </script>
    {#cj2-控件#}
        <script type="text/javascript">
            var pathSymbols = {
                reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
                plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963,38.889c-0.098-0.038-0.209-0.07-0.348-0.073 c-0.082,0-0.174,0-0.268-0.001l-7.127,4.671c0.879,0.821,2.42,1.417,4.348,1.417c0.979,0,2.27-0.006,3.047-0.01 c0.139,0,0.25-0.034,0.348-0.072c-0.646-0.555-1.07-1.643-1.07-2.967C37.891,40.529,38.316,39.441,38.963,38.889z M32.713,23.96 l-12.37-10.116l-4.693-0.004c0,0,4,8.222,4.827,10.121H32.713z M59.311,32.374c-0.248,2.104-5.305,3.172-8.018,3.172H39.629 l-25.325,16.61L9.607,52.16c0,0,6.687-8.479,7.95-10.207c1.17-1.6,3.019-3.699,3.027-6.407h-2.138 c-5.839,0-13.816-3.789-18.472-5.583c-2.818-1.085-2.396-4.04-0.031-4.04h0.039l-3.299-11.371h3.617c0,0,4.352,5.696,5.846,7.5 c2,2.416,4.503,3.678,8.228,3.87h30.727c2.17,0,4.311,0.417,6.252,1.046c3.49,1.175,5.863,2.7,7.199,4.027 C59.145,31.584,59.352,32.025,59.311,32.374z M22.069,30.408c0-0.815-0.661-1.475-1.469-1.475c-0.812,0-1.471,0.66-1.471,1.475 s0.658,1.475,1.471,1.475C21.408,31.883,22.069,31.224,22.069,30.408z M27.06,30.408c0-0.815-0.656-1.478-1.466-1.478 c-0.812,0-1.471,0.662-1.471,1.478s0.658,1.477,1.471,1.477C26.404,31.885,27.06,31.224,27.06,30.408z M32.055,30.408 c0-0.815-0.66-1.475-1.469-1.475c-0.808,0-1.466,0.66-1.466,1.475s0.658,1.475,1.466,1.475 C31.398,31.883,32.055,31.224,32.055,30.408z M37.049,30.408c0-0.815-0.658-1.478-1.467-1.478c-0.812,0-1.469,0.662-1.469,1.478 s0.656,1.477,1.469,1.477C36.389,31.885,37.049,31.224,37.049,30.408z M42.039,30.408c0-0.815-0.656-1.478-1.465-1.478 c-0.811,0-1.469,0.662-1.469,1.478s0.658,1.477,1.469,1.477C41.383,31.885,42.039,31.224,42.039,30.408z M55.479,30.565 c-0.701-0.436-1.568-0.896-2.627-1.347c-0.613,0.289-1.551,0.476-2.73,0.476c-1.527,0-1.639,2.263,0.164,2.316 C52.389,32.074,54.627,31.373,55.479,30.565z',
                rocket: 'path://M-244.396,44.399c0,0,0.47-2.931-2.427-6.512c2.819-8.221,3.21-15.709,3.21-15.709s5.795,1.383,5.795,7.325C-237.818,39.679-244.396,44.399-244.396,44.399z M-260.371,40.827c0,0-3.881-12.946-3.881-18.319c0-2.416,0.262-4.566,0.669-6.517h17.684c0.411,1.952,0.675,4.104,0.675,6.519c0,5.291-3.87,18.317-3.87,18.317H-260.371z M-254.745,18.951c-1.99,0-3.603,1.676-3.603,3.744c0,2.068,1.612,3.744,3.603,3.744c1.988,0,3.602-1.676,3.602-3.744S-252.757,18.951-254.745,18.951z M-255.521,2.228v-5.098h1.402v4.969c1.603,1.213,5.941,5.069,7.901,12.5h-17.05C-261.373,7.373-257.245,3.558-255.521,2.228zM-265.07,44.399c0,0-6.577-4.721-6.577-14.896c0-5.942,5.794-7.325,5.794-7.325s0.393,7.488,3.211,15.708C-265.539,41.469-265.07,44.399-265.07,44.399z M-252.36,45.15l-1.176-1.22L-254.789,48l-1.487-4.069l-1.019,2.116l-1.488-3.826h8.067L-252.36,45.15z',
                train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z  M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35.59V25.237c0-1.145-0.928-2.07-2.07-2.07H-9.265c-1.143,0-2.068,0.926-2.068,2.07 v10.351v3.105c0,1.144,0.926,2.07,2.068,2.07H14.544L14.544,40.764z M8.333,26.272h3.105v4.141H8.333V26.272z M1.087,26.272h3.105 v4.141H1.087V26.272z M-6.159,26.272h3.105v4.141h-3.105V26.272z M-9.265,41.798h69.352v1.035H-9.265V41.798z',
                ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.684 h-3.473L22.377,14.045z M23.695,20.678l-0.004,0.004h0.004V20.678z M24.828,18.199h-2.031l-0.719,1.358h2.029L24.828,18.199z  M40.385,34.227c-12.85-7.009-25.729-14.667-38.971-12.527c1.26,8.809,9.08,16.201,8.213,24.328 c-0.553,4.062-3.111,0.828-3.303,7.137c15.799,0,32.379,0,48.166,0l0.066-4.195l1.477-7.23 C50.842,39.812,45.393,36.961,40.385,34.227z M13.99,35.954c-1.213,0-2.195-1.353-2.195-3.035c0-1.665,0.98-3.017,2.195-3.017 c1.219,0,2.195,1.352,2.195,3.017C16.186,34.604,15.213,35.954,13.99,35.954z M23.691,20.682h-2.02l-0.588,1.351h2.023 L23.691,20.682z M19.697,18.199l-0.721,1.358h2.025l0.727-1.358H19.697z',
                car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0.475c1.137-0.053,2.762,0,4.484,0.068 c0,0.476-0.018,0.697-0.018,0.697c-0.111,1.299-0.697,1.342-0.93,1.342h-3.7c-0.328,0-0.602,0-0.861-0.154 c-0.309-0.18-0.43-0.772-0.541-1.78c-0.018-0.146-0.027-0.336-0.035-0.56v-0.01c0-0.068-0.008-0.154-0.008-0.25V41.58l0,0 C6.057,41.348,6.057,41.09,6.057,40.883L6.057,40.883z M49.867,32.766c0-2.642-0.344-5.224-0.482-5.507 c-0.104-0.207-0.766-0.749-2.271-1.773c-1.522-1.042-1.487-0.887-1.766-1.566c0.25-0.078,0.492-0.224,0.639-0.241 c0.326-0.034,0.345,0.274,1.023,0.274c0.68,0,2.152-0.18,2.453-0.48c0.301-0.303,0.396-0.405,0.396-0.672 c0-0.268-0.156-0.818-0.447-1.146c-0.293-0.327-1.541-0.49-2.273-0.585c-0.729-0.095-0.834,0-1.022,0.121 c-0.304,0.189-0.32,1.919-0.32,1.919l-0.713,0.018c-0.465-1.146-1.11-3.452-2.117-5.269c-1.103-1.979-2.256-2.599-2.737-2.754 c-0.474-0.146-0.904-0.249-4.131-0.576c-3.298-0.344-5.922-0.388-8.262-0.388c-2.342,0-4.967,0.052-8.264,0.388 c-3.229,0.336-3.66,0.43-4.133,0.576s-1.633,0.775-2.736,2.754c-1.006,1.816-1.652,4.123-2.117,5.269L9.87,23.109 c0,0-0.008-1.729-0.318-1.919c-0.189-0.121-0.293-0.225-1.023-0.121c-0.732,0.104-1.98,0.258-2.273,0.585 c-0.293,0.327-0.447,0.878-0.447,1.146c0,0.267,0.094,0.379,0.396,0.672c0.301,0.301,1.773,0.48,2.453,0.48 c0.68,0,0.697-0.309,1.023-0.274c0.146,0.018,0.396,0.163,0.637,0.241c-0.283,0.68-0.24,0.524-1.764,1.566 c-1.506,1.033-2.178,1.566-2.271,1.773c-0.139,0.283-0.482,2.865-0.482,5.508s0.189,5.02,0.189,5.86c0,0.354,0,0.976,0.076,1.565 c0.053,0.354,0.129,0.697,0.268,0.966c0.232,0.473,0.447,0.516,1.334,0.473c1.137-0.051,2.779,0,4.477,0.07 c1.135,0.043,2.297,0.086,3.33,0.11c2.582,0.051,1.826-0.379,2.928-0.36c1.102,0.016,5.447,0.196,9.424,0.196 c3.976,0,8.332-0.182,9.423-0.196c1.102-0.019,0.346,0.411,2.926,0.36c1.033-0.018,2.195-0.067,3.332-0.11 c1.695-0.062,3.348-0.121,4.477-0.07c0.886,0.043,1.103,0,1.332-0.473c0.132-0.269,0.218-0.611,0.269-0.966 c0.086-0.592,0.078-1.213,0.078-1.565C49.678,37.793,49.867,35.408,49.867,32.766L49.867,32.766z M13.219,19.735 c0.412-0.964,1.652-2.9,2.256-3.244c0.145-0.087,1.426-0.491,4.637-0.706c2.953-0.198,6.217-0.276,7.73-0.276 c1.513,0,4.777,0.078,7.729,0.276c3.201,0.215,4.502,0.611,4.639,0.706c0.775,0.533,1.842,2.28,2.256,3.244 c0.412,0.965,0.965,2.858,0.861,3.116c-0.104,0.258,0.104,0.388-1.291,0.275c-1.387-0.103-10.088-0.216-14.185-0.216 c-4.088,0-12.789,0.113-14.184,0.216c-1.395,0.104-1.188-0.018-1.291-0.275C12.254,22.593,12.805,20.708,13.219,19.735 L13.219,19.735z M16.385,30.511c-0.619,0.155-0.988,0.491-1.764,0.482c-0.775,0-2.867-0.353-3.314-0.371 c-0.447-0.017-0.842,0.302-1.076,0.362c-0.23,0.06-0.688-0.104-1.377-0.318c-0.688-0.216-1.092-0.155-1.316-1.094 c-0.232-0.93,0-2.264,0-2.264c1.488-0.068,2.928,0.069,5.621,0.826c2.693,0.758,4.191,2.213,4.191,2.213 S17.004,30.357,16.385,30.511L16.385,30.511z M36.629,37.293c-1.23,0.164-6.386,0.207-8.794,0.207c-2.412,0-7.566-0.051-8.799-0.207 c-1.256-0.164-2.891-1.67-1.764-2.865c1.523-1.627,1.24-1.576,4.701-2.023C24.967,32.018,27.239,32,27.834,32 c0.584,0,2.865,0.025,5.859,0.404c3.461,0.447,3.178,0.396,4.699,2.022C39.521,35.623,37.887,37.129,36.629,37.293L36.629,37.293z  M48.129,29.582c-0.232,0.93-0.629,0.878-1.318,1.093c-0.688,0.216-1.145,0.371-1.377,0.319c-0.231-0.053-0.627-0.371-1.074-0.361 c-0.448,0.018-2.539,0.37-3.313,0.37c-0.772,0-1.146-0.328-1.764-0.481c-0.621-0.154-0.966-0.154-0.966-0.154 s1.49-1.464,4.191-2.213c2.693-0.758,4.131-0.895,5.621-0.826C48.129,27.309,48.361,28.643,48.129,29.582L48.129,29.582z',
                run: 'path://M13.676,32.955c0.919-0.031,1.843-0.008,2.767-0.008v0.007c0.827,0,1.659,0.041,2.486-0.019 c0.417-0.028,1.118,0.325,1.14-0.545c0.014-0.637-0.156-1.279-0.873-1.367c-1.919-0.241-3.858-0.233-5.774,0.019 c-0.465,0.062-0.998,0.442-0.832,1.069C12.715,32.602,13.045,32.977,13.676,32.955z M14.108,29.013 c1.47-0.007,2.96-0.122,4.414,0.035c1.792,0.192,3.1-0.412,4.273-2.105c-3.044,0-5.882,0.014-8.719-0.01 c-0.768-0.005-1.495,0.118-1.461,1C12.642,28.731,13.329,29.014,14.108,29.013z M23.678,36.593c-0.666-0.69-1.258-1.497-2.483-1.448 c-2.341,0.095-4.689,0.051-7.035,0.012c-0.834-0.014-1.599,0.177-1.569,1.066c0.031,0.854,0.812,1.062,1.636,1.043 c1.425-0.033,2.852-0.01,4.278-0.01v-0.01c1.562,0,3.126,0.008,4.691-0.005C23.614,37.239,24.233,37.174,23.678,36.593z  M32.234,42.292h-0.002c-1.075,0.793-2.589,0.345-3.821,1.048c-0.359,0.193-0.663,0.465-0.899,0.799 c-1.068,1.623-2.052,3.301-3.117,4.928c-0.625,0.961-0.386,1.805,0.409,2.395c0.844,0.628,1.874,0.617,2.548-0.299 c1.912-2.573,3.761-5.197,5.621-7.814C33.484,42.619,33.032,42.387,32.234,42.292z M43.527,28.401 c-0.688-1.575-2.012-0.831-3.121-0.895c-1.047-0.058-2.119,1.128-3.002,0.345c-0.768-0.677-1.213-1.804-1.562-2.813 c-0.45-1.305-1.495-2.225-2.329-3.583c2.953,1.139,4.729,0.077,5.592-1.322c0.99-1.61,0.718-3.725-0.627-4.967 c-1.362-1.255-3.414-1.445-4.927-0.452c-1.933,1.268-2.206,2.893-0.899,6.11c-2.098-0.659-3.835-1.654-5.682-2.383 c-0.735-0.291-1.437-1.017-2.293-0.666c-2.263,0.927-4.522,1.885-6.723,2.95c-1.357,0.658-1.649,1.593-1.076,2.638 c0.462,0.851,1.643,1.126,2.806,0.617c0.993-0.433,1.994-0.857,2.951-1.374c1.599-0.86,3.044-0.873,4.604,0.214 c1.017,0.707,0.873,1.137,0.123,1.849c-1.701,1.615-3.516,3.12-4.933,5.006c-1.042,1.388-0.993,2.817,0.255,4.011 c1.538,1.471,3.148,2.869,4.708,4.315c0.485,0.444,0.907,0.896-0.227,1.104c-1.523,0.285-3.021,0.694-4.538,1.006 c-1.109,0.225-2.02,1.259-1.83,2.16c0.223,1.07,1.548,1.756,2.687,1.487c3.003-0.712,6.008-1.413,9.032-2.044 c1.549-0.324,2.273-1.869,1.344-3.115c-0.868-1.156-1.801-2.267-2.639-3.445c-1.964-2.762-1.95-2.771,0.528-5.189 c1.394-1.357,1.379-1.351,2.437,0.417c0.461,0.769,0.854,1.703,1.99,1.613c2.238-0.181,4.407-0.755,6.564-1.331 C43.557,30.447,43.88,29.206,43.527,28.401z',
                walk: 'path://M29.902,23.275c1.86,0,3.368-1.506,3.368-3.365c0-1.859-1.508-3.365-3.368-3.365 c-1.857,0-3.365,1.506-3.365,3.365C26.537,21.769,28.045,23.275,29.902,23.275z M36.867,30.74c-1.666-0.467-3.799-1.6-4.732-4.199 c-0.932-2.6-3.131-2.998-4.797-2.998s-7.098,3.894-7.098,3.894c-1.133,1.001-2.1,6.502-0.967,6.769 c1.133,0.269,1.266-1.533,1.934-3.599c0.666-2.065,3.797-3.466,3.797-3.466s0.201,2.467-0.398,3.866 c-0.599,1.399-1.133,2.866-1.467,6.198s-1.6,3.665-3.799,6.266c-2.199,2.598-0.6,3.797,0.398,3.664 c1.002-0.133,5.865-5.598,6.398-6.998c0.533-1.397,0.668-3.732,0.668-3.732s0,0,2.199,1.867c2.199,1.865,2.332,4.6,2.998,7.73 s2.332,0.934,2.332-0.467c0-1.401,0.269-5.465-1-7.064c-1.265-1.6-3.73-3.465-3.73-5.265s1.199-3.732,1.199-3.732 c0.332,1.667,3.335,3.065,5.599,3.399C38.668,33.206,38.533,31.207,36.867,30.74z'
            };
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById("cj2"));
            // 指定图表的配置项和数据
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none'
                    },
                    formatter: function (params) {
                        return params[0].name + ': ' + params[0].value;
                    }
                },
                xAxis: {
                    data: ['驯鹿', '火箭', '飞机', '高铁', '轮船', '汽车', '跑步', '步行', ],
                    axisTick: {show: false},
                    axisLine: {show: false},
                    axisLabel: {
                        color: 'rgb(79,84,127)'
                    }
                },
                yAxis: {
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLine: {show: false},
                    axisLabel: {show: false}
                },
                color: ['rgb(91,191,229)'],
                series: [{
                    name: 'hill',
                    type: 'pictorialBar',
                    barCategoryGap: '-130%',
                    // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
                    symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
                    itemStyle: {
                        opacity: 0.5
                    },
                    emphasis: {
                        itemStyle: {
                            opacity: 1
                        }
                    },
                    data: [123, 60, 25, 18, 12, 9, 2, 1],
                    z: 10
                }, {
                    name: 'glyph',
                    type: 'pictorialBar',
                    barGap: '-100%',
                    symbolPosition: 'end',
                    symbolSize: 50,
                    symbolOffset: [0, '-120%'],
                    data: [{
                        value: 123,
                        symbol: pathSymbols.reindeer,
                        symbolSize: [60, 60]
                    }, {
                        value: 60,
                        symbol: pathSymbols.rocket,
                        symbolSize: [50, 60]
                    }, {
                        value: 25,
                        symbol: pathSymbols.plane,
                        symbolSize: [65, 35]
                    }, {
                        value: 18,
                        symbol: pathSymbols.train,
                        symbolSize: [50, 30]
                    }, {
                        value: 12,
                        symbol: pathSymbols.ship,
                        symbolSize: [50, 35]
                    }, {
                        value: 9,
                        symbol: pathSymbols.car,
                        symbolSize: [40, 30]
                    }, {
                        value: 2,
                        symbol: pathSymbols.run,
                        symbolSize: [40, 50]
                    }, {
                        value: 1,
                        symbol: pathSymbols.walk,
                        symbolSize: [40, 50]
                    }]
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
                integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
                crossorigin="anonymous"></script>
    </body>
    </html>
    from django.urls import path, include
    import vs.views
    
    urlpatterns = [
        path('vs', vs.views.get_index_page),
        path('', vs.views.get_index_page),
        path('/', vs.views.get_index_page),
        # path('data', vs.views.read_data),
        path('dark', vs.views.get_index_dark_page),
        path('infographic', vs.views.get_index_infographic_page),
        path('macarons', vs.views.get_index_macarons_page),
        path('roma', vs.views.get_index_roma_page),
        path('shine', vs.views.get_index_shine_page),
        path('vintage', vs.views.get_index_vintage_page),
    
        path('theme1', vs.views.get_index_dark_page),
        path('theme2', vs.views.get_index_infographic_page),
        path('theme3', vs.views.get_index_macarons_page),
        path('theme4', vs.views.get_index_roma_page),
        path('theme5', vs.views.get_index_shine_page),
        path('theme6', vs.views.get_index_vintage_page),
    ]

    实现页面

    Dark主题

    Infographic主题

    Macarons主题

    Roma主题

    Shine主题

    Vintage主题

     

    特别说明

    此数据可视化界面主要是为了实践echarts,部分图表数据并非疫情真实获取的数据,有部分数据是虚构数据,仅以实现图表样式为目标。

    注意事项

    1、图片实现居中布局,亲测最方便的方法——添加<p>:

    .carl-img p{
                text-align: center;
            }
    <div class="item active carl-img" style="background: url('../../../static/img/tx.png') no-repeat; background-size: 100% 100%;">
        <p><a href="https://news.qq.com/zt2020/page/feiyan.htm#/" target="_blank"><img src="../../../static/img/tx.png" alt="腾讯疫情实时监测" ></a></p>
        <div class="carousel-caption"></div>
    </div>

    2、文字居中布局——设置行高:

    .banner{
                height: 120px;
                font-size: 40px;
                text-align: center;
                line-height: 120px;
                font-weight: bold;
            }

    存在的问题

    可视化页面的整体效果出来了,页面细节的css还需完善。

     

    展开全文
  • 基于Python + Flask + PyEcharts + Bootstrap实现淄博酒店数据分析可视化平台 本项目名为“淄博酒店统计与分析”,主要是利用网络爬虫爬取美团网站的酒店数据,利用Echarts工具进行统计分析,筛选出用户期望的酒店...
  • 3款BootStrap可视化工具

    千次阅读 2018-06-26 09:16:34
    25学堂看到最近很多...第一款Bootstrap可视化制作工具:JetstrapJetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。通过 Jetstrap制作出来的网页 100% 符合 Bootstrap 标准。比如说你只要设计了电脑端的...

    25学堂看到最近很多朋友在学习Bootstrap前端主题框架。顾让25学堂的小编给大家找来了3款适合Bootstrap初学者使用的可视化工具。希望对大家有所帮助。

    第一款Bootstrap的可视化制作工具:Jetstrap

    Jetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。

    通过 Jetstrap制作出来的网页 100% 符合 Bootstrap 标准。比如说你只要设计了电脑端的页面,它会自动适配手机端和 Pad 端(响应式设计)。

    jetstrap

    下面我们来看看的一段关于Jetstrap的视频操作:

    工具官网酷站网 址:https://jetstrap.com/

     

     

    第二款Bootstrap可视化编辑器工具-LayoutIt

    简单的几个拖放操作就能做出漂亮的 Twitter Bootstrap 网站?是的,LayoutIt 是一个 Twitter Bootstrap 界面生成器,能够帮助你快速制作出网站和界面模型,同时能够下载生成的网站代码。

    layoutit

    工具官网酷站网址:http://www.bootcss.com/p/layoutit/

     

     

     

    第三款Bootstrap的可视化制作工具:bootswatchr

    bootswatchr是从地面上创建一个自定义的BootStrap主题的可视化工具。最大的方便就是 我们可以在左侧修改css或者html代码,然后修改结果会直接会显示在右侧。

    更重要是一个在线编辑和免费生成Bootstrap主题的酷站。

    bootswatch


    展开全文
  • 实验目的: 实现 统计2006-2011的数据综合统计情况,进行数据可视化 gitee地址:https://gitee.com/dgwcode/an_example_of_py_learning/tree/master/MovieViwer 1.数据例子: Film ,Major Studio,Budget 300,Warner ...
  • Python基于Dash+Bootstrap数据可视化 Dash框架是基于flask、React 、plotly开发的可视化框架,不仅对其进行了集成、还将繁琐的方法统一起来。简单好学,通过极少量的代码就可以实现炫酷的可视化界面,简直不要太...

    Python基于Dash+Bootstrap的数据可视化

    Dash框架是基于flask、React 、plotly开发的可视化框架,不仅对其进行了集成、还将繁琐的方法统一起来。简单好学,通过极少量的代码就可以实现炫酷的可视化界面,简直不要太方便。
    效果如下

    在这里插入图片描述

    可视化图形,八大功能

    下载图片、变焦、图片移动、框中选择、套索选中、放大、缩小、居中显示
    在这里插入图片描述

    代码实现思路

    主要分为两点
    1、app.py中编写程序代码。包含创建画布、绘制图形、界面布局三个部分
    2、assets文件下的myapp.css文件进行界面布局、界面渲染
    *
    在这里插入图片描述
    有道友问:Dash是怎么找到路径的呢?如下图:
    在这里插入图片描述
    在这里插入图片描述
    Dash默认识别文件夹名为assets,可自行更改。

    环境配置

    pip install dash -i https://pypi.tuna.tsinghua.edu.cn/simple some-package
    pip install numpy -i https://pypi.tuna.tsinghua.edu.cn/simple some-package

    上代码

    app.py

    import dash
    import dash_core_components as dcc
    import dash_html_components as html
    
    app=dash.Dash()
    
    def tiaoxing():
        return html.Div([
            html.P([]),
        dcc.Graph(
        id='tx',
            figure={
                'data':[
                    {'x':[4,6,8],'y':[12,16,18],'type':'bar','name':'chart one'},
                    {'x':[4,6,8],'y':[20,24,28],'type':'bar','name':'chart two'}
                ],
                'layout':{
                    'title':'simple bar chart',
                }
            }
        )
    ],className='tiaoxing')
    
    def zhexiantu():
        return html.Div([
            html.P([]),
            dcc.Graph(
                id='xtq',
                figure={
                    'data':[
                        {'x':[1,2,3,4,5,6,7,8,9,10,11],'y':[5,8,11,32,41,5,2,7,16,4,8],'type':'Scatter','name':'one'},
                        {'x': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 'y': [5,6,3,7,1,5,48,2,3,58,4,],'type': 'Scatter', 'name': 'two'}
                    ],
                    'layout':{
                        'title':'折线图'
    
                    }
                }
            )
        ],className='zhexiantu')
    a=16
    def bink():
        return html.Div([
            html.P([]),
            dcc.Graph(
                id='btk',
                figure={
                    'data': [
                        {'labels': ['one', 'two', 'three', 'four', 'five', 'six'],
                         'values': [50, 34, 86, 75, 64, 39], 'type': 'pie', 'hole': '0.8', 'name': '饼图', 'size': '100'}
                    ],
                    'layout': {'title':'bingtu'}
                }
            )
        ], className='bintuk')
    
    def sandiantu():
        import numpy as np
        b = np.random.uniform(1, 3, size=300)
        c = 0.5 * b ** 2 + b + 2 + np.random.normal(0, 1, size=300)
        return html.Div([
            html.P([]),
            dcc.Graph(
                id='sdt',
                figure={
                    'data':[
                        {'x':b,'y':c,'type':'Scatter','mode':'markers','name':"散点图"}
                    ],
                    'layout':{
                        'title':'sandian'
                    }
                }
            )
        ],className='sandiantu')
    def bintu():
        return html.Div([
            html.P([]),
            dcc.Graph(
                id='bt',
                figure={
                    'data':[
                        {'labels':['one', 'two', 'three', 'four', 'five', 'six'],'values':[280, 25, 10, 100, 250, 270],'type':'pie','name':'bingtu','size':'100'}
                    ],
                    'layout':'bingtu'
                }
            )
        ],className='bintu')
    def row1():
        return html.Div([
            tiaoxing(),
            bink(),
            sandiantu()
        ], className='row')
    def row2():
        return html.Div([
                zhexiantu(),
                bintu()
        ],className='row')
    def row3():
        return html.Div([
            row1(),
            row2()
        ],className='di')
    app.layout=html.Div([
        html.H1(["交互式电子信息可视化"],style={'margin':'2% auto','color':'white'}),
        row3(),
    ],className='card')
    
    if __name__ =='__main__':
        app.run_server(port=4050)
    

    项目完整代码请点击我的云盘
    提取码:mk3b
    如有任何问题,欢迎在下方留言,谢谢!

    展开全文
  • echarts是百度开源的一个数据可视化 JS 库,主要用于数据可视化。pyecharts 是一个用于生成 Echarts 图表的类库。实际上就是 Echarts 与 Python 的对接。 使用 pyecharts可以生成独立的网页,也可以在 flask , ...
  • 基于Echarts的数据可视化大屏系统设计分享

    千次阅读 多人点赞 2021-08-25 13:47:15
    以上是这次系统设计的基调和背景,围绕这一背景,利用所学知识,将官方所给的数据转换为交互式的可视化图形,在系统运行过程中发现数据之间的联系以及找到题目所要求答案。这是我本科期间的毕业设计,基于此设计
  • (https://www.oschina.net/news/48134/the-best-bootstrap-ui-editors)自从 2011 年 Mark Otto 和 Jacob Thornton 开发了 Bootstrap,我们第一次接触并熟知了 Bootstrap 。这些都归功于 Twitter!从那以后,它...
  • 数据可视化学习路线

    2019-07-11 12:07:49
    写在前面有幸看到了这篇关于数据可视化学习的指导文章,由于原作链接访问异常,只得从百度快照中看到原文,所以这里搬运过来,特此声明本文系【转载】,在此感谢原作者,以下为原文正文(略有删减)。 原作者: 张迪...
  • 这篇文章适合初学者(想要快速入门python爬虫),以及用bootstrap写的页面效果 参考B站IT私塾 爬取豆瓣电影Top250的电影数据
  • 这是我们惊人的 D3 可视化数据新闻页面。 使用的技术 - html5 - css3 - bootstrap - D3.js - MapBox API - 数据格式:json, csv 指示 为了加载基本地图 API,需要插入来自 mapbox.com 的 mapID 和访问令牌。 这...
  • Bootstrap 可视化编辑器summernote

    万次阅读 2017-08-12 12:37:36
    版权声明:本文出自沉默...Bootstrap 可视化HTML编辑器之summernote,用其官网上的介绍就是“Super Simple WYSIWYG editor”,不过在我看来,与bootstrap中文官网上提供的“bootstrap-wysiwyg”要更simple,更漂亮,
  • bootstrap = None , usermedians = None , conf_intervals = None , meanline = None , showmeans = None , showcaps = None , showbox = None , showfliers = None , boxprops = None , labels = None , ...
  • 数据共享时功能更强大! 很高兴与您分享我对纬度对天气状况的影响的分析。 在这个用户友好的网站上,您将看到我的天气状况与纬度的关系的图表和表格插图。 该网站具有很高的交互性,并具有实时动画以及能够在页面...
  • File "<frozen importlib._bootstrap>", line 626, in _load_backward_compatible File "/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/pip/_vendor/urllib3/packages/six.py",...
  • 表单元件库组件、框架、web前后端Bootstrap、导航栏、边框、穿梭框、输入框、步骤条、图表组件、数据可视化、后台模板、html、前端代码、js、css 适用范围:PC端,前端页面展示 适用软件: H-builder 、VSCode、...
  • 使用Python,Flask,Bootstrap,JavaScript,HTML / CSS和C3.JS作为图表库的数据可视化Web应用程序。 要求 Python 堆 python微框架 用于响应式CSS布局 一个基于的javascript图表库 入门 克隆仓库并安装依赖项: ...
  • 来自:爪哇笔记正文大家好,我是GitHub教授。今天,推荐一个数据可视化系统项目。上次是谁要的数据可视化系统项目啊,猿哥帮你找到了。这是我目前见过的最好的数据可视化系统项目。功能完整,代码...
  • 搭建用户行为分析系统(五)——数据可视化 这里采用的是前端框架是 Bootstrap 和 chart.js 这是界面截图,仿着百度统计画的 下面是代码部分 &lt;!DOCTYPE html&gt; &lt;html lang="zh" ...
  • 【第1周】环境搭建与基础语法【第2周】三大主流数据类型的操作【第3周】Python流程控制与函数【第4周】Python面向对象与异常处理机制【第5周】Python模块与文件操作【第6周】Python多线程编程【第7周】正则表达...
  • 数据可视化

    2018-03-17 10:30:11
    数据可视化 使用了bootstrap 进行了世界人口地图热度的展示
  • NatureNet 数据可视化 nnvis.js 包含两个 jQuery 插件。 首先,“dataParser”(已弃用)用于解析来自 NN API 的数据。 其次,“nnchart”用于绘制条形图。 可以在此处找到有关如何使用 nnvis.js 的演示: ://web...
  • 使用spring boot加bootstrap实现一个可视化的数据库编辑的后台管理系统 需求: 1.连接数据库,读出当前数据库中的所有表的表结构进行呈现 2.页面可以增加,编辑,和删除字段,然后可以修改数据库的表结构 页面就不做...
  • python基本数据可视化遇到的错误

    千次阅读 2018-06-07 07:59:31
    环境:win7 、pycharm、python2、所用到的库:matplotlib 需求:想要用matplotlib 做一个简单的数据可视化的图像。代码如下: #coding:utf-8 import matplotlib import matplotlib.pyplot as plt #数据可视化 plt....
  •  一开始单纯的写了个内存监控的脚本,每隔5分钟收集服务器的内存信息,然后将收集到的数据写进数据库中,但后来发现就算把收集的信息写入数据库,如果需要查询某个时段的内存信息,需要手动进入数据库中查看表里的...
  • 数据可视化 利用Flask框架将爬虫得到的数据展示在网页中,更为直观。以案例1中得到的数据为例进行可视化学习。 1、导入模块 from flask import Flask,render_template import sqlite3#数据库 import os.path#文件...
  • 存在意义 是matplotlib的扩展封装 .../Users/bennyrhys/opt/anaconda3/lib/python3.7/importlib/_bootstrap.py:219: RuntimeWarning: numpy.ufunc size changed, may indicate binary incompatibility. Expecte

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,529
精华内容 6,211
关键字:

bootstrap数据可视化

友情链接: 3-7-2-pull_up_down.rar