python爬虫及其可视化

一、思路分析

本文采用比特币网站作为爬取目标（https://www.ibtctrade.com/），从中获取prices、CNY、市值等，然后导出所得到的数据到excel、sqlite数据中。使用pyarm中的flask框架搭建可视化平台，使用sqlite数据库的数据制作简单的网页，并制作折线图、柱状图、散点图等等。

二、数据爬取

1.引入库

代码如下：

from bs4 import BeautifulSoup
import re
import urllib.error,urllib.request
import xlwt
import sqlite3

2.获取目标网页

代码如下：

baseURL = 'https://www.ibtctrade.com/cryptocurrency/p_'  #比特币交易网的数据一共有27页，分别在此网址上加上后缀，即可实现每个网页的获取
head = {'user-agent': 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36'

    }
    request = urllib.request.Request(url,headers=head)
    html = ""

    response = urllib.request.urlopen(request)
    html = response.read().decode('utf-8')


    # print(html)
    return html

该处使用的url网络请求的数据。

2.解析网页

代码如下：

findjname = re.compile(r'<strong data-v-2dd1dc90="">(.*?)</strong>')
findname = re.compile(r'<span data-v-2dd1dc90="">(.*?)</span>')
findnewprice = re.compile(r'<li data-v-2dd1dc90="">\n(.*?)</li>',re.S)
findtwofourzhangdie = re.compile(r'<li class=".*" data-v-2dd1dc90="">(.*?)</li>',re.S)
# findtwofourdie = re.compile(r'<li class="down" data-v-2dd1dc90="">(.*?)</li>',re.S)
findcny = re.compile(r'<li data-v-2dd1dc90="">\n(.*?)</li>',re.S)
findshizhi = re.compile(r'<li data-v-2dd1dc90="">\n(.*?)</li>',re.S)
    

def getdata(baseURL):
    datalist = []
    for i in range(1,28):
        url = baseURL + str(i)+'.html'
        html = askurl(url)

        soup = BeautifulSoup(html,'html.parser')
        for item in soup.select('.content>a'):
            data =[]
            # print(item)
            item = str(item)
            jname = re.findall(findjname,item)[0]


            data.append(jname)

            name = re.findall(findname,item)[0]

            data.append(name)
            # print(data)

            newprice = re.findall(findnewprice,item)[0]


            data.append(newprice.strip())
            twofourzhangdie = re.findall(findtwofourzhangdie,item)[0]



            data.append(twofourzhangdie.strip())
            cny = re.findall(findcny,item)[1]
            data.append(cny.strip())
            shizhi = re.findall(findshizhi,item)[2]
            data.append(shizhi.strip())

            datalist.append(data)

    #　print(datalist)
    return datalist

    # print(html)
    return html

使用正则表达式进行数据的筛选和清洗

3.数据保存到excel

代码如下：

path = "比特币简易数据.xls"
dbpath = "比特币.db"
    # askurl(baseURL)
def savedata(datalist,path):
    print('正在saving·······')
    book = xlwt.Workbook(encoding='utf-8',style_compression=0)
    sheet = book.add_sheet('比特币数据',cell_overwrite_ok=True)
    col = ('简称','全称','最新价格','24H涨跌幅','24H成交额','市值')
    for i in range(0,6):
        sheet.write(0,i,col[i])
    for i in range(0,700):
        data = datalist[i]
        for j in range(0,6):
            sheet.write(i+1,j,data[j])
    book.save(path)

4.数据保存到sqlite数据库

代码如下：

path = "比特币简易数据.xls"
dbpath = "比特币.db"
    # askurl(baseURL)
ef savedb(datalist,dbpath):
    init_db(dbpath)
    conn = sqlite3.connect(dbpath)
    cur = conn.cursor()
    for data in datalist:
        for i in range(len(data)):
            data[i] = '"' +data[i]+'"'
            sql = """
                insert into bitebi750
                (jname, name,newprice,twofourzhangdie,cny,shizhi)
                values(%s)"""%','.join(data)
        cur.execute(sql)
        conn.commit()
    cur.close()
    conn.close()




def init_db(dbpath):
    sql = '''
        create table bitebi750
            (id integer primary key autoincrement,
                jname text, 
                name text,
                newprice text,
                twofourzhangdie text,
                cny text,
                shizhi text)
            
    
    
    '''
    conn =sqlite3.connect(dbpath)
    cursor =conn.cursor()
    cursor.execute(sql)
    conn.commit()
    conn.close()

---

三、基于flask框架的可视化

app.py

提示：这里对文章进行总结：
在app.py中对sqlite数据库的数据进行提取处理，主要把参数，传给所需要的数据，来制作图表，每个html的代码过多，不在贴出，可根据index.html自行修改.

from flask import Flask,render_template
import sqlite3
app = Flask(__name__)


@app.route('/')
def index():
    return render_template('index.html')
@app.route('/shuju')
def e():
    datalist = []
    con = sqlite3.connect("比特币.db")
    cur = con.cursor()
    sql = "select*from bitebi750"
    data = cur.execute(sql)
    for item in data:
        datalist.append(item)
    cur.close()
    con.close()
    return render_template('shuju.html',movies = datalist)

@app.route('/zhangdie')
def zhangdie():
    num = []
    sum = []
    con = sqlite3.connect("比特币.db")
    cur = con.cursor()
    sql = "select jname,twofourzhangdie from bitebi750 limit 0,70"
    data = cur.execute(sql)
    for item in data:
        num.append(str(item[0]))
        sum.append(float(item[1][:-1]))
    cur.close()
    con.close()
    return render_template("zhangdie.html",num = num ,sum = sum)
@app.route('/wordcloud')
def wordcloud():
    return render_template('wordcloud.html')


@app.route('/qujian')
def qujian():
    num = []
    sum = []
    con = sqlite3.connect("比特币.db")
    cur = con.cursor()
    sql = "select jname,newprice from bitebi750 limit 0,15"
    data = cur.execute(sql)
    for item in data:
        num.append(str(item[0]))
        sum.append(float(item[1][1:]))
    cur.close()
    con.close()

    return render_template('qujian.html',num = num ,sum = sum)

@app.route('/sandian')
def sandian():
    num = []
    sum = []
    yum = []
    con = sqlite3.connect("比特币.db")
    cur = con.cursor()
    sql = "select jname,twofourzhangdie,shizhi from bitebi750 limit 0,50"
    data = cur.execute(sql)
    for item in data:
        num.append(str(item[0]))
        sum.append(float(item[1][:-1]))
        yum.append(float(item[2][1:-1]))
    cur.close()
    con.close()
    return render_template('sandian.html',num = num ,sum = sum ,yum =yum)
@app.route('/shuliang')
def shuliang():
    q = 0
    w = 0
    e = 0
    r = 0
    t = 0
    y = 0
    u = 0

    sum = []
    con = sqlite3.connect("比特币.db")
    cur = con.cursor()
    sql = "select jname,shizhi from bitebi750 limit 0,204"
    data = cur.execute(sql)
    for item in data:

        sum.append(float(item[1][1:-1]))
    for i in sum:
        if i>500 and i<1000:
            q += 1
        elif i>100 and i<500:
            w+=1
        elif i>1 and i<100:
            e+=1
    sql = "select jname,shizhi from bitebi750 limit 204,700"
    data = cur.execute(sql)
    for item in data:

        sum.append(float(item[1][1:-1]))
        for i in sum:
            if i>100 and i<=1000:
                r+=1
            elif i>1000 and i<9999:
                y+=1
            elif i > 1 and i < 10:
                t+=1
            elif i > 10 and i < 100:
                u+=1


    cur.close()
    con.close()
    return render_template("shuliang.html",q=q,w=w,e=e,r=r,t=t,y=y,u=u)
if __name__ == '__main__':
    app.run()

index.html

  <div class="logo float-left">
    <h1 class="text-light"><a href="index.html"><span>爬取成果分析及展示</span></a></h1>
    <!-- Uncomment below if you prefer to use an image logo -->
    <!-- <a href="index.html"><img src="static/assets/img/logo.png" alt="" class="img-fluid"></a>-->
  </div>

  <nav class="nav-menu float-right d-none d-lg-block">
    <ul>
      <li class="active"><a href="#header">Home</a></li>

      <li><a href="#services">Services</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#team">团队成员</a></li>

      <li><a href="#contact">Contact Us</a></li>
    </ul>
  </nav><!-- .nav-menu -->

</div>

    <ol class="carousel-indicators" id="hero-carousel-indicators"></ol>

    <div class="carousel-inner" role="listbox">

      <!-- Slide 1 -->
      <div class="carousel-item active" style="background-image: url('static/assets/img/slide/3.jpg');">
        <div class="carousel-container">
          <div class="carousel-content container">
            <h2 class="animated fadeInDown">关于<span>比特币</span></h2>
            <p class="animated fadeInUp">比特币（Bitcoin）的概念最初由中本聪在2008年11月1日提出，并于2009年1月3日正式诞生。根据中本聪的思路设计发布的开源软件以及建构其上的P2P网络。比特币是一种P2P形式的虚拟的加密数字货币。点对点的传输意味着一个去中心化的支付系统。</p>
            <a href="https://baike.baidu.com/item/%E6%AF%94%E7%89%B9%E5%B8%81/4143690?fr=aladdin" class="btn-get-started animated fadeInUp scrollto">点击了解更多</a>
          </div>
        </div>
      </div>

      <!-- Slide 2 -->
      <div class="carousel-item" style="background-image: url('static/assets/img/slide/slide-2.jpg');">
        <div class="carousel-container">
          <div class="carousel-content container">
            <h2 class="animated fadeInDown">比特币交易网</h2>
            <p class="animated fadeInUp">比特币交易网App实时跟踪比特币交易动态，比特币相关行业资讯，交易行情，支持比特币交易信息发布，并开通分析专栏提供权威的比特币行情解析，汇集和总结业界观点，为比特币交易提供专业的、权威的、具有参考价值的比特币交易平台。
            </p>
            <a href="https://www.ibtctrade.com/" class="btn-get-started animated fadeInUp scrollto">Read More</a>
          </div>
        </div>
      </div>

      <!-- Slide 3 -->
      <div class="carousel-item" style="background-image: url('static/assets/img/slide/1.jpg');">
        <div class="carousel-container">
          <div class="carousel-content container">
            <h2 class="animated fadeInDown">比特币风险评估</h2>
            <p class="animated fadeInUp">自2009年比特币诞生以来,因其特有的流通方式与价格波动规律,迅速受到资本家与金融投资者的关注与追捧.比特币的实质是当代网络信息技术与密码学的结合,颠覆了人们对货币流通方式的认知观念.本文以传统货币的货币职能对比特币进行讨论,同时对比特币在流通当中所暴露出的风险进行分析..</p>
            <a href="https://xueshu.baidu.com/usercenter/paper/show?paperid=100q0p70du0s0e107v6g08a0h4317190&site=xueshu_se" class="btn-get-started animated fadeInUp scrollto">Read More</a>
          </div>
        </div>
      </div>

    </div>

    <a class="carousel-control-prev" href="#heroCarousel" role="button" data-slide="prev">
      <span class="carousel-control-prev-icon icofont-rounded-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#heroCarousel" role="button" data-slide="next">
      <span class="carousel-control-next-icon icofont-rounded-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>

  </div>
</div>

<!-- ======= About Us Section ======= -->
<!-- End About Us Section -->

<!-- ======= About Lists Section ======= -->


<!-- ======= Counts Section ======= -->


<!-- ======= Services Section ======= -->
<section id="services" class="services">
  <div class="container">

    <div class="section-title">
      <h2>Services</h2>
    </div>

    <div class="row">
      <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up">
          <div class="icon"><a href="/shuju"><i class="icofont-computer"></a></i></div>
        <h4 class="title"><a href="/shuju">数据总览</a></h4>
        <p class="description">共整合了741条数据供分析</p>
      </div>
      <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><a href="/zhangdie"><i class="icofont-chart-bar-graph"></a></i></div>
        <h4 class="title"><a href="">各币种涨跌幅情况</a></h4>
        <p class="description">跟着政策走，永远不回头</p>
      </div>
      <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="200">
        <div class="icon"><a href="/shuliang"><i class="icofont-earth"></a></i></div>
        <h4 class="title"><a href="">市值区间币种数量</a></h4>
        <p class="description">肯定还是正太分布了</p>
      </div>
      <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="300">
          <div class="icon"><a href="/qujian"><i class="icofont-image"></i></a></div>
        <h4 class="title"><a href="">最具竞争力的币种</a></h4>
        <p class="description">看看那个最厉害</p>
      </div>
      <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="400">
        <div class="icon"><a href="/sandian"><i class="icofont-settings"></i></a></div>
        <h4 class="title"><a href="">热门币种市值与涨跌幅关系</a></h4>
        <p class="description">只要热门肯定就会涨的啦</p>
      </div>
      <div class="col-lg-4 col-md-6 icon-box" data-aos="fade-up" data-aos-delay="500">
        <div class="icon"><a href="/wordcloud"><i class="icofont-tasks-alt"></a></i></div>
        <h4 class="title"><a href="/wordcloud">币名词云</a></h4>
        <p class="description">猜猜那个词是最大的</p>
      </div>
    </div>

  </div>
</section><!-- End Services Section -->

<!-- ======= Our Portfolio Section ======= -->
<section id="portfolio" class="portfolio section-bg">
  <div class="container" data-aos="fade-up" data-aos-delay="100">

    <div class="section-title">
      <h2>Our Portfolio</h2>
      <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem. Sit sint consectetur velit. Quisquam quos quisquam cupiditate. Et nemo qui impedit suscipit alias ea. Quia fugiat sit in iste officiis commodi quidem hic quas.</p>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <ul id="portfolio-flters">
          <li data-filter="*" class="filter-active">All</li>
          <li data-filter=".filter-app">App</li>
          <li data-filter=".filter-card">Card</li>
          <li data-filter=".filter-web">Web</li>
        </ul>
      </div>
    </div>

    <div class="row portfolio-container">

      <div class="col-lg-4 col-md-6 portfolio-item filter-app">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/1.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>App 1</h4>
            <p>App</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/1.jpg" data-gall="portfolioGallery" class="venobox" title="App 1"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-web">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/2.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>Web 3</h4>
            <p>Web</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/2.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-app">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/3.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>App 2</h4>
            <p>App</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/3.jpg" data-gall="portfolioGallery" class="venobox" title="App 2"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-card">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/4.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>Card 2</h4>
            <p>Card</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/4.jpg" data-gall="portfolioGallery" class="venobox" title="Card 2"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-web">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/5.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>Web 2</h4>
            <p>Web</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/5.jpg" data-gall="portfolioGallery" class="venobox" title="Web 2"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-app">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/6.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>App 3</h4>
            <p>App</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/6.jpg" data-gall="portfolioGallery" class="venobox" title="App 3"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-card">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/7.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>Card 1</h4>
            <p>Card</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/7.jpg" data-gall="portfolioGallery" class="venobox" title="Card 1"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-card">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/8.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>Card 3</h4>
            <p>Card</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/8.jpg" data-gall="portfolioGallery" class="venobox" title="Card 3"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-6 portfolio-item filter-web">
        <div class="portfolio-wrap">
          <img src="static/assets/img/portfolio/9.jpg" class="img-fluid" alt="">
          <div class="portfolio-info">
            <h4>Web 3</h4>
            <p>Web</p>
            <div class="portfolio-links">
              <a href="static/assets/img/portfolio/9.jpg" data-gall="portfolioGallery" class="venobox" title="Web 3"><i class="icofont-eye"></i></a>
              <a href="#" title="More Details"><i class="icofont-external-link"></i></a>
            </div>
          </div>
        </div>
      </div>

    </div>

  </div>
</section><!-- End Our Portfolio Section -->

<!-- ======= Our Team Section ======= -->
<section id="team" class="team">
  <div class="container">

    <div class="section-title">
      <h2>Our Team</h2>
      <p>Magnam dolores commodi suscipit. Necessitatibus eius consequatur ex aliquid fuga eum quidem.</p>
    </div>

    <div class="row">



      <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="200">
        <div class="member">
          <div class="pic"><img src="static/assets/img/team/team-3.jpg" class="img-fluid" alt=""></div>
          <div class="member-info">
            <h4>xiangbo zhu</h4>
            <span>队长</span>

          </div>
        </div>
      </div>

      <div class="col-xl-3 col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="300">
        <div class="member">
          <div class="pic"><img src="static/assets/img/team/team-4.jpg" class="img-fluid" alt=""></div>
          <div class="member-info">
            <h4>Amanda Jepson</h4>
            <span>贴身妹子</span>

          </div>
        </div>
      </div>

    </div>

  </div>
</section><!-- End Our Team Section -->

<!-- ======= Frequently Asked Questions Section ======= -->


<!-- ======= Contact Us Section ======= -->
<section id="contact" class="contact">
  <div class="container">

    <div class="section-title">
      <h2>Contact Us</h2>
    </div>

    <div class="row">

      <div class="col-lg-6 d-flex align-items-stretch" data-aos="fade-up">
        <div class="info-box">
          <i class="bx bx-map"></i>
          <h3>Address</h3>
          <p>江大长山校区文理大楼数据分析实验室</p>
        </div>
      </div>

      <div class="col-lg-3 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="100">
        <div class="info-box">
          <i class="bx bx-envelope"></i>
          <h3>Email Us</h3>
          <p>869676614.com<br>10086.com</p>
        </div>
      </div>

      <div class="col-lg-3 d-flex align-items-stretch" data-aos="fade-up" data-aos-delay="200">
        <div class="info-box ">
          <i class="bx bx-phone-call"></i>
          <h3>Call Us</h3>
          <p>17836925032<br>17851006312</p>
        </div>
      </div>





  </div>
</section><!-- End Contact Us Section -->

  <div class="container">

  </div>


  <div class="copyright">
    &copy; Copyright <strong><span>Mamba</span></strong>. All Rights Reserved
  </div>
  <div class="credits">
    <!-- All the links in the footer should remain intact. -->
    <!-- You can delete the links only if you purchased the pro version. -->
    <!-- Licensing information: https://bootstrapmade.com/license/ -->
    <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/mamba-one-page-bootstrap-template-free/ -->
    Designed by <a href="https://bootstrapmade.com/">BootstrapMade</a>
  </div>

qujian.html

其余部分不再显示，只显示主要部分

    <div class="section-title">
      <h2>比特币数据展示</h2>

    </div>


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width : 700px ;height:800px;"></div>
      <script type="text/javascript">
        var dom = document.getElementById("main");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

option = {
title: {
text: ‘比特币价格饼图’,
subtext: ‘前15位’,
left: ‘center’
},
tooltip: {
trigger: ‘item’,
formatter: ‘{a}
{b} : {c} ({d}%)’
},
legend: {
orient: ‘vertical’,
left: ‘left’,
data: [{{ num[0]|tojson }}, {{ num[1]|tojson }},{{ num[2]|tojson }},{{ num[3]|tojson }}, {{ num[4]|tojson }},{{ num[5]|tojson }},{{ num[6]|tojson }},{{ num[7]|tojson }},{{ num[8]|tojson }},{{ num[9]|tojson }},
{{ num[10]|tojson }},{{ num[11]|tojson }},{{ num[12]|tojson }},{{ num[13]|tojson }},{{ num[14]|tojson }}]
},
series: [
{
name: ‘访问来源’,
type: ‘pie’,
radius: ‘55%’,
center: [‘50%’, ‘60%’],
data: [
{value: {{ sum[0]|tojson }}, name: {{ num[0]|tojson }}},
{value: {{ sum[1]|tojson }}, name: {{ num[1]|tojson }}},
{value: {{ sum[2]|tojson }}, name: {{ num[2]|tojson }}},
{value: {{ sum[3]|tojson }}, name: {{ num[3]|tojson }}},
{value: {{ sum[4]|tojson }}, name: {{ num[4]|tojson }}},
{value: {{ sum[5]|tojson }}, name: {{ num[5]|tojson }}},
{value: {{ sum[6]|tojson }}, name: {{ num[6]|tojson }}},
{value: {{ sum[7]|tojson }}, name: {{ num[7]|tojson }}},
{value: {{ sum[8]|tojson }}, name: {{ num[8]|tojson }}},
{value: {{ sum[9]|tojson }}, name: {{ num[9]|tojson }}},
{value: {{ sum[10]|tojson }}, name: {{ num[10]|tojson }}},
{value: {{ sum[11]|tojson }}, name: {{ num[11]|tojson }}},
{value: {{ sum[12]|tojson }}, name: {{ num[12]|tojson }}},
{value: {{ sum[13]|tojson }}, name: {{ num[13]|tojson }}},
{value: {{ sum[14]|tojson }}, name: {{ num[14]|tojson }}}
],

        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }
]

};
if (option && typeof option === “object”) {
myChart.setOption(option, true);
}

  </div>

  </div>
</section><!-- End Counts Section -->

  </div>
</section><!-- End Our Team Section -->

sandian.html

<div class="container">

    <div class="section-title">
      <h2>比特币数据展示</h2>

    </div>


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width : 1000px ;height:800px;"></div>
      <script type="text/javascript">
        var dom = document.getElementById("main");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

var data = [[1,{{ sum[0]|tojson }},{{ yum[0]|tojson }},{{ num[0]|tojson }}],
[2,{{ sum[1]|tojson }},{{ yum[1]|tojson }},{{ num[1]|tojson }}],
[3,{{ sum[2]|tojson }},{{ yum[2]|tojson }},{{ num[2]|tojson }}],
[4,{{ sum[3]|tojson }},{{ yum[3]|tojson }},{{ num[3]|tojson }}],
[5,{{ sum[4]|tojson }},{{ yum[4]|tojson }},{{ num[4]|tojson }}],
[6,{{ sum[5]|tojson }},{{ yum[5]|tojson }},{{ num[5]|tojson }}],
[7,{{ sum[6]|tojson }},{{ yum[6]|tojson }},{{ num[6]|tojson }}],
[8,{{ sum[7]|tojson }},{{ yum[7]|tojson }},{{ num[7]|tojson }}],
[9,{{ sum[8]|tojson }},{{ yum[8]|tojson }},{{ num[8]|tojson }}],
[10,{{ sum[9]|tojson }},{{ yum[9]|tojson }},{{ num[9]|tojson }}],
[11,{{ sum[10]|tojson }},{{ yum[10]|tojson }},{{ num[10]|tojson }}],
[12,{{ sum[11]|tojson }},{{ yum[11]|tojson }},{{ num[11]|tojson }}],
[13,{{ sum[12]|tojson }},{{ yum[12]|tojson }},{{ num[12]|tojson }}],
[14,{{ sum[13]|tojson }},{{ yum[13]|tojson }},{{ num[13]|tojson }}],
[15,{{ sum[14]|tojson }},{{ yum[14]|tojson }},{{ num[14]|tojson }}],
[16,{{ sum[15]|tojson }},{{ yum[15]|tojson }},{{ num[15]|tojson }}],
[17,{{ sum[16]|tojson }},{{ yum[16]|tojson }},{{ num[16]|tojson }}],
[18,{{ sum[17]|tojson }},{{ yum[17]|tojson }},{{ num[17]|tojson }}],
[19,{{ sum[18]|tojson }},{{ yum[18]|tojson }},{{ num[18]|tojson }}],
[20,{{ sum[19]|tojson }},{{ yum[19]|tojson }},{{ num[19]|tojson }}],
[21,{{ sum[20]|tojson }},{{ yum[20]|tojson }},{{ num[20]|tojson }}],
[22,{{ sum[21]|tojson }},{{ yum[21]|tojson }},{{ num[21]|tojson }}],
[23,{{ sum[22]|tojson }},{{ yum[22]|tojson }},{{ num[22]|tojson }}],
[24,{{ sum[23]|tojson }},{{ yum[23]|tojson }},{{ num[23]|tojson }}],
[25,{{ sum[24]|tojson }},{{ yum[24]|tojson }},{{ num[24]|tojson }}],
[26,{{ sum[25]|tojson }},{{ yum[25]|tojson }},{{ num[25]|tojson }}],
[27,{{ sum[26]|tojson }},{{ yum[26]|tojson }},{{ num[26]|tojson }}],
[28,{{ sum[27]|tojson }},{{ yum[27]|tojson }},{{ num[27]|tojson }}],
[29,{{ sum[28]|tojson }},{{ yum[28]|tojson }},{{ num[28]|tojson }}],
[30,{{ sum[29]|tojson }},{{ yum[29]|tojson }},{{ num[29]|tojson }}]

],

option = {
backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: ‘#f7f8fa’
}, {
offset: 1,
color: ‘#cdd0d5’
}]),
title: {
text: ‘排名前五十市值与涨跌幅关系’
},
legend: {
right: 10,
data: [‘1’, ‘2’]
},
xAxis: {
itemStyle: {
normal: {
label: {
show: true,
positiong: ‘top’,
formatter: ‘{c}%’
}
}
},
splitLine: {
lineStyle: {
type: ‘dashed’
}
}
},
yAxis: {
axisLabel: {
formatter: ‘{value} %’
},
splitLine: {
lineStyle: {
type: ‘dashed’
}
},
scale: true

},
series: [{
    name: '-',
    data: data,
    type: 'scatter',
    symbolSize: function (data) {
        return Math.sqrt(data[2]) ;
    },
    emphasis: {
        label: {
            show: true,
            formatter: function (param) {
                return param.data[3];
            },
            position: 'top'
        }
    },
    itemStyle: {
        shadowBlur: 10,
        shadowColor: 'rgba(120, 36, 50, 0.5)',
        shadowOffsetY: 5,
        color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
            offset: 0,
            color: 'rgb(251, 118, 123)'
        }, {
            offset: 1,
            color: 'rgb(204, 46, 72)'
        }])
    }
}]

}

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
               </script>

  </div>

  </div>
</section><!-- End Counts Section -->

  </div>
</section><!-- End Our Team Section -->

shuju.html

<section class="counts section-bg">
  <div class="container">


      <table class="table table_striped">
          <tr>
                <td>排名</td>
                <td>简称</td>
                <td>全称</td>
                <td>当前价格</td>
                <td>24小时涨跌幅</td>
                <td>交易额</td>
                <td>市值</td>
          </tr>

          {% for movie in movies %}
            <tr>
                <td>{{ movie[0] }}</td>
                <td>

                    {{ movie[1] }}

                </td>
                <td>{{ movie[2] }}</td>
                <td>{{ movie[3] }}</td>
                <td>

                    {{ movie[4] }}

                </td>
                <td>{{ movie[5] }}</td>
                <td>{{ movie[6] }}</td>
          </tr>
          {% endfor %}
      </table>


  </div>
</section><!-- End Counts Section -->

  </div>
</section><!-- End Our Team Section -->

shuliang.html

<div class="container">

    <div class="section-title">
      <h2>比特币数据展示</h2>

    </div>


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width : 1000px ;height:800px;"></div>
      <script type="text/javascript">
        var dom = document.getElementById("main");
        var myChart = echarts.init(dom);
        var app = {};

option = {
color: [’#3398DB’],
tooltip: {
trigger: ‘axis’,
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: ‘shadow’ // 默认为直线，可选为：‘line’ | ‘shadow’
}
},
grid: {
left: ‘3%’,
right: ‘4%’,
bottom: ‘3%’,
containLabel: true
},
xAxis: [
{
type: ‘category’,
data: [‘500亿-1000亿’, ‘100亿-500亿’, ‘1亿-100亿’, ‘1000万-9999万’, ‘100万-1000万’,‘10万-100万’,‘1万-10万’],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: ‘value’
}
],
series: [
{
name: ‘数据’,
type: ‘bar’,
barWidth: ‘60%’,
data: [{{ q }}, {{ w }}, {{ e }}, {{ y }}, {{ r }}, {{ u }}, {{ t }},]
}
]
};

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
               </script>

  </div>

  </div>
</section><!-- End Counts Section -->

  </div>
</section><!-- End Our Team Section -->

zhangdie.html

    <div class="section-title">
      <h2>比特币数据展示</h2>

    </div>


    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1000px ;height:750px;"></div>
      <script type="text/javascript">
        var dom = document.getElementById("main");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;

option = {
tooltip: {
trigger: ‘axis’,
position: function (pt) {
return [pt[0], ‘10%’];
}
},
title: {
left: ‘center’,
text: ‘排名前七十比特币市值涨跌图’,
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: ‘none’
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: ‘category’,
boundaryGap: false,
data: {{ num|tojson }}
},
yAxis: {
axisLabel: {
formatter: ‘{value} %’
},
type: ‘value’,
boundaryGap: [0, ‘100%’]
},
dataZoom: [{
type: ‘inside’,
start: 0,
end: 10
}, {
start: 0,
end: 10,
handleIcon: ‘M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z’,
handleSize: ‘80%’,
handleStyle: {
color: ‘#fff’,
shadowBlur: 3,
shadowColor: ‘rgba(0, 0, 0, 0.6)’,
shadowOffsetX: 2,
shadowOffsetY: 2
}
}],
series: [
{
name: ‘数据’,
type: ‘line’,
smooth: true,
symbol: ‘none’,
sampling: ‘average’,
itemStyle: {
color: ‘rgb(255, 70, 131)’
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: ‘rgb(255, 158, 68)’
}, {
offset: 1,
color: ‘rgb(255, 70, 131)’
}])
},
data: {{ sum|tojson }}
}
]
};

        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
               </script>

  </div>

wordcloud.html

    <div class="row no-gutters">
      <div class="col-lg-6 video-box">
        <img src="static/assets/234.jpg" class="img-fluid" alt="">

      </div>

      <div class="col-lg-6 d-flex flex-column justify-content-center about-content">

        <div class="section-title">
          <h2>词云</h2>
          <p>采用比特币的名称来制作图云，当中network， 币，比特，coin，chain等词出现的频率很高，说明了比特币的命名与本身所包含的意义相关</p>
        </div>

        <div class="icon-box" data-aos="fade-up" data-aos-delay="100">
          <div class="icon"><i class="bx bx-fingerprint"></i></div>
          <h4 class="title"><a href="">Lorem Ipsum</a></h4>
          <p class="description">222</p>
        </div>



      </div>
    </div>

  </div>
</section><!-- End About Us Section -->