一、思路分析

本文采用位元幣網站作為爬取目標（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

Mamba Bootstrap Template - Index

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/240849.html

標籤：其他

上一篇：云計算1+X平臺運維與開發認證能（初級）選擇題

下一篇：MFC單檔案實驗（SDI/登錄/圖片）

python爬蟲及其可視化

一、思路分析

二、資料爬取

1.引入庫

2.獲取目標網頁

2.決議網頁

3.資料保存到excel

4.資料保存到sqlite資料庫

三、基于flask框架的可視化

app.py

index.html

qujian.html

sandian.html

shuju.html

shuliang.html

zhangdie.html

wordcloud.html