├── README.md
├── config.py
├── instance
    ├── __init__.py
    └── config.py
├── visualization.ini
├── visualization
    ├── __init__.py
    ├── model.pyc
    ├── static
    │   ├── city_count.json
    │   ├── city_list.json
    │   ├── count_company_name.json
    │   ├── count_tag.json
    │   ├── map_coord.json
    │   └── time_tag.json
    ├── templates
    │   └── index.html
    └── view.py
└── wsgi.py


/README.md:
--------------------------------------------------------------------------------
 1 | # Flask+Echarts data visualization
 2 | Flask+Echarts数据可视化
 3 | 
 4 | See [My Blog](http://xxuan.me/2017-03-13-mongodb-flask-echarts-data-visualize.html)
 5 | 
 6 | ## Dependencis (Ubuntu 14.04/16.04)
 7 | 
 8 | 1. flask
 9 | [flask中文文档](http://docs.jinkan.org/docs/flask/)
10 | 
11 |  ```bash
12 | $ sudo pip install Flask
13 | ```
14 | 
15 | ## Test
16 | 
17 | ```bash
18 | $ python visualization/view.py
19 | ```
20 | 
21 | 进入`127.0.0.1:8080`下预览吧
22 | 
23 | ---
24 | 
25 | ## 关于这个repo
26 | 
27 | 1. 这个看起来很fancy的repo默默成了我star最多的repo...本着尽责的态度, 决定把代码整理一下
28 | 2. repo建立之初使用了py2, 为此花了巨量精力解决中文编码/解码的问题. 现已迁移至py3, 少了无数坑. 欢迎使用py3
29 | 3. 前后端已经分离. 现在的代码很简单, 也和scrapy/mongodb无关了. 
30 | 4. 现在这个repo只是将以json格式保存的数据使用[flask](https://github.com/pallets/flask)加载到了网页上并用[Echarts](https://github.com/ecomfe/echarts)的代码渲染成图表
31 | 5. 因此使用什么样的方法获得这样的json数据就因人而异了. 请尽情使用你喜欢的手段, 无论是用json文件做缓存还是直接读取数据库. 整理成dict喂给`view.py`里的`data`就行了
32 | 
33 | ## About this project
34 | 1. This repo is about loading data from json file then rendering it using [flask](https://github.com/pallets/flask) & [Echarts](https://github.com/ecomfe/echarts).
35 | 2. You can use any method to get the data, rather than using scrapy + mogodb to update static json files in this repo.
36 | 


--------------------------------------------------------------------------------
/config.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shawnau/flask_echarts/0ab2ed8241d2d476754ab5715824e134638f60d2/config.py


--------------------------------------------------------------------------------
/instance/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shawnau/flask_echarts/0ab2ed8241d2d476754ab5715824e134638f60d2/instance/__init__.py


--------------------------------------------------------------------------------
/instance/config.py:
--------------------------------------------------------------------------------
1 | SECRET_KEY = 'your_secret_key'


--------------------------------------------------------------------------------
/visualization.ini:
--------------------------------------------------------------------------------
 1 | [uwsgi]
 2 | module = wsgi
 3 | 
 4 | master = true
 5 | processes = 5
 6 | 
 7 | socket = /home/ubuntu/interns_visualization/intern_visualization/%n.sock
 8 | chmod-socket = 666
 9 | vacuum = true
10 | 
11 | die-on-term = true
12 | logto = /home/ubuntu/interns_visualization/intern_visualization/%n.log
13 | 


--------------------------------------------------------------------------------
/visualization/__init__.py:
--------------------------------------------------------------------------------
1 | from .view import app
2 | 


--------------------------------------------------------------------------------
/visualization/model.pyc:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shawnau/flask_echarts/0ab2ed8241d2d476754ab5715824e134638f60d2/visualization/model.pyc


--------------------------------------------------------------------------------
/visualization/static/city_count.json:
--------------------------------------------------------------------------------
1 | {"city_list": ["\u5317\u4eac", "\u4e0a\u6d77", "\u5e7f\u5dde", "\u676d\u5dde", "\u6210\u90fd", "\u6df1\u5733", "\u5357\u4eac", "\u6b66\u6c49", "\u5927\u8fde", "\u82cf\u5dde", "\u897f\u5b89", "\u53a6\u95e8", "\u73e0\u6d77", "\u91cd\u5e86", "\u5929\u6d25"], "count_list": [720, 420, 171, 128, 109, 103, 66, 53, 31, 18, 18, 17, 14, 14, 14], "city_count": [{"name": "\u5317\u4eac", "value": 720}, {"name": "\u4e0a\u6d77", "value": 420}, {"name": "\u5e7f\u5dde", "value": 171}, {"name": "\u676d\u5dde", "value": 128}, {"name": "\u6210\u90fd", "value": 109}, {"name": "\u6df1\u5733", "value": 103}, {"name": "\u5357\u4eac", "value": 66}, {"name": "\u6b66\u6c49", "value": 53}, {"name": "\u5927\u8fde", "value": 31}, {"name": "\u82cf\u5dde", "value": 18}, {"name": "\u897f\u5b89", "value": 18}, {"name": "\u53a6\u95e8", "value": 17}, {"name": "\u73e0\u6d77", "value": 14}, {"name": "\u91cd\u5e86", "value": 14}, {"name": "\u5929\u6d25", "value": 14}]}


--------------------------------------------------------------------------------
/visualization/static/city_list.json:
--------------------------------------------------------------------------------
1 | ["\u6d77\u95e8", "\u9102\u5c14\u591a\u65af", "\u62db\u8fdc", "\u821f\u5c71", "\u9f50\u9f50\u54c8\u5c14", "\u76d0\u57ce", "\u8d64\u5cf0", "\u9752\u5c9b", "\u4e73\u5c71", "\u91d1\u660c", "\u6cc9\u5dde", "\u83b1\u897f", "\u65e5\u7167", "\u80f6\u5357", "\u5357\u901a", "\u62c9\u8428", "\u4e91\u6d6e", "\u6885\u5dde", "\u6587\u767b", "\u4e0a\u6d77", "\u6500\u679d\u82b1", "\u5a01\u6d77", "\u627f\u5fb7", "\u53a6\u95e8", "\u6c55\u5c3e", "\u6f6e\u5dde", "\u4e39\u4e1c", "\u592a\u4ed3", "\u66f2\u9756", "\u70df\u53f0", "\u798f\u5dde", "\u74e6\u623f\u5e97", "\u5373\u58a8", "\u629a\u987a", "\u7389\u6eaa", "\u5f20\u5bb6\u53e3", "\u9633\u6cc9", "\u83b1\u5dde", "\u6e56\u5dde", "\u6c55\u5934", "\u6606\u5c71", "\u5b81\u6ce2", "\u6e5b\u6c5f", "\u63ed\u9633", "\u8363\u6210", "\u8fde\u4e91\u6e2f", "\u846b\u82a6\u5c9b", "\u5e38\u719f", "\u4e1c\u839e", "\u6cb3\u6e90", "\u6dee\u5b89", "\u6cf0\u5dde", "\u5357\u5b81", "\u8425\u53e3", "\u60e0\u5dde", "\u6c5f\u9634", "\u84ec\u83b1", "\u97f6\u5173", "\u5609\u5cea\u5173", "\u5e7f\u5dde", "\u5ef6\u5b89", "\u592a\u539f", "\u6e05\u8fdc", "\u4e2d\u5c71", "\u6606\u660e", "\u5bff\u5149", "\u76d8\u9526", "\u957f\u6cbb", "\u6df1\u5733", "\u73e0\u6d77", "\u5bbf\u8fc1", "\u54b8\u9633", "\u94dc\u5ddd", "\u5e73\u5ea6", "\u4f5b\u5c71", "\u6d77\u53e3", "\u6c5f\u95e8", "\u7ae0\u4e18", "\u8087\u5e86", "\u5927\u8fde", "\u4e34\u6c7e", "\u5434\u6c5f", "\u77f3\u5634\u5c71", "\u6c88\u9633", "\u82cf\u5dde", "\u8302\u540d", "\u5609\u5174", "\u957f\u6625", "\u80f6\u5dde", "\u94f6\u5ddd", "\u5f20\u5bb6\u6e2f", "\u4e09\u95e8\u5ce1", "\u9526\u5dde", "\u5357\u660c", "\u67f3\u5dde", "\u4e09\u4e9a", "\u81ea\u8d21", "\u5409\u6797", "\u9633\u6c5f", "\u6cf8\u5dde", "\u897f\u5b81", "\u5b9c\u5bbe", "\u547c\u548c\u6d69\u7279", "\u6210\u90fd", "\u5927\u540c", "\u9547\u6c5f", "\u6842\u6797", "\u5f20\u5bb6\u754c", "\u5b9c\u5174", "\u5317\u6d77", "\u897f\u5b89", "\u91d1\u575b", "\u4e1c\u8425", "\u7261\u4e39\u6c5f", "\u9075\u4e49", "\u7ecd\u5174", "\u626c\u5dde", "\u5e38\u5dde", "\u6f4d\u574a", "\u91cd\u5e86", "\u53f0\u5dde", "\u5357\u4eac", "\u6ee8\u5dde", "\u8d35\u9633", "\u65e0\u9521", "\u672c\u6eaa", "\u514b\u62c9\u739b\u4f9d", "\u6e2d\u5357", "\u9a6c\u978d\u5c71", "\u5b9d\u9e21", "\u7126\u4f5c", "\u53e5\u5bb9", "\u5317\u4eac", "\u5f90\u5dde", "\u8861\u6c34", "\u5305\u5934", "\u7ef5\u9633", "\u4e4c\u9c81\u6728\u9f50", "\u67a3\u5e84", "\u676d\u5dde", "\u6dc4\u535a", "\u978d\u5c71", "\u6ea7\u9633", "\u5e93\u5c14\u52d2", "\u5b89\u9633", "\u5f00\u5c01", "\u6d4e\u5357", "\u5fb7\u9633", "\u6e29\u5dde", "\u4e5d\u6c5f", "\u90af\u90f8", "\u4e34\u5b89", "\u5170\u5dde", "\u6ca7\u5dde", "\u4e34\u6c82", "\u5357\u5145", "\u5929\u6d25", "\u5bcc\u9633", "\u6cf0\u5b89", "\u8bf8\u66a8", "\u90d1\u5dde", "\u54c8\u5c14\u6ee8", "\u804a\u57ce", "\u829c\u6e56", "\u5510\u5c71", "\u5e73\u9876\u5c71", "\u90a2\u53f0", "\u5fb7\u5dde", "\u6d4e\u5b81", "\u8346\u5dde", "\u5b9c\u660c", "\u4e49\u4e4c", "\u4e3d\u6c34", "\u6d1b\u9633", "\u79e6\u7687\u5c9b", "\u682a\u6d32", "\u77f3\u5bb6\u5e84", "\u83b1\u829c", "\u5e38\u5fb7", "\u4fdd\u5b9a", "\u6e58\u6f6d", "\u91d1\u534e", "\u5cb3\u9633", "\u957f\u6c99", "\u8862\u5dde", "\u5eca\u574a", "\u83cf\u6cfd", "\u5408\u80a5", "\u6b66\u6c49", "\u5927\u5e86"]


--------------------------------------------------------------------------------
/visualization/static/count_company_name.json:
--------------------------------------------------------------------------------
1 | [{"name": "\u597d\u672a\u6765", "value": 21}, {"name": "\u767e\u5ea6", "value": 19}, {"name": "\u7231\u5947\u827a", "value": 18}, {"name": "\u94fe\u5bb6\u7f51", "value": 17}, {"name": "\u91d1\u5c71\u4e91", "value": 16}, {"name": "\u777f\u742a\u8f6f\u4ef6", "value": 16}, {"name": "\u8baf\u732b", "value": 15}, {"name": "\u641c\u72d0", "value": 14}, {"name": "UISEE", "value": 12}, {"name": "\u975e\u767d\u4e09\u7ef4", "value": 12}, {"name": "\u661f\u73af\u79d1\u6280", "value": 12}, {"name": "\u7f8e\u56e2\u70b9\u8bc4", "value": 11}, {"name": "\u4eca\u65e5\u5934\u6761", "value": 11}, {"name": "\u5317\u7eac\u901a\u4fe1", "value": 11}, {"name": "\u5927\u8fde\u4e1c\u8f6f", "value": 10}]


--------------------------------------------------------------------------------
/visualization/static/count_tag.json:
--------------------------------------------------------------------------------
1 | [{"name": "\u8f6f\u4ef6", "value": 422}, {"name": "IT\u8fd0\u7ef4", "value": 185}, {"name": "Java", "value": 147}, {"name": "\u524d\u7aef", "value": 144}, {"name": "\u7b97\u6cd5", "value": 138}, {"name": "\u4e91\u8ba1\u7b97/\u5927\u6570\u636e", "value": 129}, {"name": "C/C++", "value": 124}, {"name": "\u6d4b\u8bd5", "value": 124}, {"name": "\u6570\u636e\u6316\u6398", "value": 108}, {"name": "\u6570\u636e\u5e93", "value": 101}, {"name": "PHP", "value": 95}, {"name": "Android", "value": 77}, {"name": "Python", "value": 63}, {"name": "IOS", "value": 63}, {"name": "Node.js", "value": 11}]


--------------------------------------------------------------------------------
/visualization/static/map_coord.json:
--------------------------------------------------------------------------------
1 | {"\u5357\u5145": [106.110698, 30.837793], "\u6ea7\u9633": [119.48, 31.43], "\u7126\u4f5c": [113.21, 35.24], "\u53f0\u5dde": [121.420757, 28.656386], "\u62db\u8fdc": [120.38, 37.35], "\u6e05\u8fdc": [113.01, 23.7], "\u9633\u6cc9": [113.57, 37.85], "\u83b1\u897f": [120.53, 36.86], "\u4e34\u5b89": [119.72, 30.23], "\u54b8\u9633": [108.72, 34.36], "\u81ea\u8d21": [104.778442, 29.33903], "\u4e91\u6d6e": [112.02, 22.93], "\u4f5b\u5c71": [113.11, 23.05], "\u9075\u4e49": [106.9, 27.7], "\u5317\u4eac": [116.46, 39.92], "\u672c\u6eaa": [123.73, 41.3], "\u5f20\u5bb6\u6e2f": [120.555821, 31.875428], "\u592a\u4ed3": [121.1, 31.45], "\u62c9\u8428": [91.11, 29.97], "\u5373\u58a8": [120.45, 36.38], "\u4e2d\u5c71": [113.38, 22.52], "\u897f\u5b89": [108.95, 34.27], "\u80f6\u5357": [119.97, 35.88], "\u897f\u5b81": [101.74, 36.56], "\u4e3d\u6c34": [119.92, 28.45], "\u4e09\u4e9a": [109.511909, 18.252847], "\u6d77\u53e3": [110.35, 20.02], "\u6e5b\u6c5f": [110.359377, 21.270708], "\u94dc\u5ddd": [109.11, 35.09], "\u83b1\u829c": [117.67, 36.19], "\u6d77\u95e8": [121.15, 31.89], "\u7ecd\u5174": [120.58, 30.01], "\u7261\u4e39\u6c5f": [129.58, 44.6], "\u5bcc\u9633": [119.95, 30.07], "\u83b1\u5dde": [119.942327, 37.177017], "\u6e56\u5dde": [120.1, 30.86], "\u5927\u540c": [113.3, 40.12], "\u6e58\u6f6d": [112.91, 27.87], "\u5b9c\u5bbe": [104.56, 29.77], "\u5b89\u9633": [114.35, 36.1], "\u6c5f\u9634": [120.26, 31.91], "\u9f50\u9f50\u54c8\u5c14": [123.97, 47.33], "\u97f6\u5173": [113.62, 24.84], "\u5bbf\u8fc1": [118.3, 33.96], "\u84ec\u83b1": [120.75, 37.8], "\u978d\u5c71": [122.85, 41.12], "\u8363\u6210": [122.41, 37.16], "\u91d1\u575b": [119.56, 31.74], "\u91d1\u534e": [119.64, 29.12], "\u829c\u6e56": [118.38, 31.33], "\u65e0\u9521": [120.29, 31.59], "\u91cd\u5e86": [106.54, 29.59], "\u5434\u6c5f": [120.63, 31.16], "\u8302\u540d": [110.88, 21.68], "\u4e5d\u6c5f": [115.97, 29.71], "\u90a2\u53f0": [114.48, 37.05], "\u5eca\u574a": [116.7, 39.53], "\u53a6\u95e8": [118.1, 24.46], "\u6606\u660e": [102.73, 25.04], "\u5b9c\u5174": [119.82, 31.36], "\u5b81\u6ce2": [121.56, 29.86], "\u5929\u6d25": [117.2, 39.13], "\u79e6\u7687\u5c9b": [119.57, 39.95], "\u6587\u767b": [122.05, 37.2], "\u67a3\u5e84": [117.57, 34.86], "\u77f3\u5634\u5c71": [106.39, 39.04], "\u63ed\u9633": [116.35, 23.55], "\u90af\u90f8": [114.47, 36.6], "\u5fb7\u5dde": [116.29, 37.45], "\u7ae0\u4e18": [117.53, 36.72], "\u4e09\u95e8\u5ce1": [111.19, 34.76], "\u94f6\u5ddd": [106.27, 38.47], "\u547c\u548c\u6d69\u7279": [111.65, 40.82], "\u5408\u80a5": [117.27, 31.86], "\u67f3\u5dde": [109.4, 24.33], "\u5357\u5b81": [108.33, 22.84], "\u4e1c\u839e": [113.75, 23.04], "\u682a\u6d32": [113.16, 27.83], "\u6210\u90fd": [104.06, 30.67], "\u73e0\u6d77": [113.52, 22.3], "\u5e93\u5c14\u52d2": [86.06, 41.68], "\u6606\u5c71": [120.95, 31.39], "\u6e29\u5dde": [120.65, 28.01], "\u5ef6\u5b89": [109.47, 36.6], "\u4e0a\u6d77": [121.48, 31.22], "\u6f4d\u574a": [119.1, 36.62], "\u7389\u6eaa": [102.52, 24.35], "\u6b66\u6c49": [114.31, 30.52], "\u8fde\u4e91\u6e2f": [119.16, 34.59], "\u8861\u6c34": [115.72, 37.72], "\u66f2\u9756": [103.79, 25.51], "\u5f00\u5c01": [114.35, 34.79], "\u957f\u6cbb": [113.08, 36.18], "\u627f\u5fb7": [117.93, 40.97], "\u65e5\u7167": [119.46, 35.42], "\u6cf0\u5dde": [119.9, 32.49], "\u54c8\u5c14\u6ee8": [126.63, 45.75], "\u6e2d\u5357": [109.5, 34.52], "\u6c55\u5c3e": [115.375279, 22.786211], "\u6dc4\u535a": [118.05, 36.78], "\u9526\u5dde": [121.15, 41.13], "\u6f6e\u5dde": [116.63, 23.68], "\u9633\u6c5f": [111.95, 21.85], "\u9102\u5c14\u591a\u65af": [109.781327, 39.608266], "\u4e34\u6c82": [118.35, 35.05], "\u5e38\u5fb7": [111.69, 29.05], "\u957f\u6c99": [113, 28.21], "\u5927\u5e86": [125.03, 46.58], "\u70df\u53f0": [121.39, 37.52], "\u798f\u5dde": [119.3, 26.08], "\u9a6c\u978d\u5c71": [118.48, 31.56], "\u6cf8\u5dde": [105.39, 28.91], "\u5e38\u719f": [120.74, 31.64], "\u629a\u987a": [123.97, 41.97], "\u5e73\u5ea6": [119.97, 36.77], "\u6d4e\u5357": [117, 36.65], "\u8bf8\u66a8": [120.23, 29.71], "\u5510\u5c71": [118.02, 39.63], "\u9547\u6c5f": [119.44, 32.2], "\u77f3\u5bb6\u5e84": [114.48, 38.03], "\u5357\u660c": [115.89, 28.68], "\u5f20\u5bb6\u754c": [110.479191, 29.117096], "\u5409\u6797": [126.57, 43.87], "\u8087\u5e86": [112.44, 23.05], "\u83cf\u6cfd": [115.480656, 35.23375], "\u5fb7\u9633": [104.37, 31.13], "\u6cf0\u5b89": [117.13, 36.18], "\u5357\u901a": [121.05, 32.08], "\u80f6\u5dde": [120.03336, 36.264622], "\u5e7f\u5dde": [113.23, 23.16], "\u592a\u539f": [112.53, 37.87], "\u6ee8\u5dde": [118.03, 37.36], "\u5cb3\u9633": [113.09, 29.37], "\u5927\u8fde": [121.62, 38.92], "\u5f90\u5dde": [117.2, 34.26], "\u8d35\u9633": [106.71, 26.57], "\u91d1\u660c": [102.188043, 38.520089], "\u82cf\u5dde": [120.62, 31.32], "\u4e1c\u8425": [118.49, 37.46], "\u5e38\u5dde": [119.95, 31.79], "\u4e39\u4e1c": [124.37, 40.13], "\u5bff\u5149": [118.73, 36.86], "\u6d4e\u5b81": [116.59, 35.38], "\u8862\u5dde": [118.88, 28.97], "\u60e0\u5dde": [114.4, 23.09], "\u6c55\u5934": [116.69, 23.39], "\u5170\u5dde": [103.73, 36.03], "\u8346\u5dde": [112.239741, 30.335165], "\u804a\u57ce": [115.97, 36.45], "\u6885\u5dde": [116.1, 24.55], "\u626c\u5dde": [119.42, 32.39], "\u957f\u6625": [125.35, 43.88], "\u9752\u5c9b": [120.33, 36.07], "\u6d1b\u9633": [112.44, 34.7], "\u5609\u5cea\u5173": [98.289152, 39.77313], "\u6500\u679d\u82b1": [101.718637, 26.582347], "\u6c88\u9633": [123.38, 41.8], "\u76d8\u9526": [122.070714, 41.119997], "\u5609\u5174": [120.76, 30.77], "\u7ef5\u9633": [104.73, 31.48], "\u514b\u62c9\u739b\u4f9d": [84.77, 45.59], "\u74e6\u623f\u5e97": [121.979603, 39.627114], "\u5b9d\u9e21": [107.15, 34.38], "\u5a01\u6d77": [122.1, 37.5], "\u6c5f\u95e8": [113.06, 22.61], "\u76d0\u57ce": [120.13, 33.38], "\u4e4c\u9c81\u6728\u9f50": [87.68, 43.77], "\u6cc9\u5dde": [118.58, 24.93], "\u6cb3\u6e90": [114.68, 23.73], "\u6df1\u5733": [114.07, 22.62], "\u8425\u53e3": [122.18, 40.65], "\u4fdd\u5b9a": [115.48, 38.85], "\u6842\u6797": [110.28, 25.29], "\u53e5\u5bb9": [119.16, 31.95], "\u4e49\u4e4c": [120.06, 29.32], "\u5b9c\u660c": [111.3, 30.7], "\u676d\u5dde": [120.19, 30.26], "\u8d64\u5cf0": [118.87, 42.28], "\u4e34\u6c7e": [111.5, 36.08], "\u5f20\u5bb6\u53e3": [114.87, 40.82], "\u6ca7\u5dde": [116.83, 38.33], "\u4e73\u5c71": [121.52, 36.89], "\u5357\u4eac": [118.78, 32.04], "\u821f\u5c71": [122.207216, 29.985295], "\u90d1\u5dde": [113.65, 34.76], "\u5317\u6d77": [109.12, 21.49], "\u6dee\u5b89": [119.15, 33.5], "\u5305\u5934": [110, 40.58], "\u846b\u82a6\u5c9b": [120.836932, 40.711052], "\u5e73\u9876\u5c71": [113.29, 33.75]}


--------------------------------------------------------------------------------
/visualization/static/time_tag.json:
--------------------------------------------------------------------------------
1 | {"tag_time_list": [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 2, 0, 1, 0, 1, 0, 2, 1, 2, 0, 1, 3, 4, 3, 4, 26, 5, 6, 38, 2, 9, 22, 16, 3, 3, 84, 168], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 3, 1, 1, 4, 2, 0, 0, 7, 4, 8, 0, 4, 1, 0, 5, 13, 9, 9, 19, 0, 0, 62, 29], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 2, 0, 1, 0, 0, 6, 16, 25, 2, 3, 63, 27], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 16, 10, 16, 6, 0, 53, 37], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 16, 1, 15, 20, 13, 4, 4, 51, 10], [0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 2, 1, 1, 2, 2, 2, 4, 1, 0, 0, 4, 4, 4, 0, 0, 0, 5, 1, 3, 2, 1, 1, 0, 5, 5, 5, 15, 8, 2, 0, 29, 9], [0, 0, 0, 0, 0, 0, 0, 0, 2, 1, 0, 0, 0, 0, 0, 0, 0, 2, 4, 2, 0, 5, 1, 0, 0, 0, 0, 0, 2, 4, 5, 3, 5, 0, 0, 4, 7, 12, 7, 9, 1, 3, 30, 8], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 1, 0, 0, 0, 0, 0, 0, 82, 32], [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 3, 0, 0, 2, 0, 2, 1, 0, 0, 1, 3, 5, 2, 2, 5, 0, 0, 9, 9, 5, 9, 8, 1, 0, 20, 15], [0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 2, 0, 1, 0, 1, 1, 2, 1, 0, 0, 0, 0, 1, 1, 1, 2, 0, 0, 2, 2, 4, 1, 5, 0, 0, 8, 4, 12, 14, 8, 1, 0, 13, 6], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 4, 0, 3, 0, 0, 0, 2, 1, 2, 1, 0, 1, 0, 2, 1, 3, 1, 2, 0, 0, 3, 4, 7, 7, 6, 2, 1, 22, 12], [0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 2, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 0, 0, 0, 0, 0, 3, 1, 1, 0, 0, 1, 2, 1, 7, 5, 6, 5, 0, 27, 7], [0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 2, 2, 1, 1, 0, 1, 0, 1, 5, 2, 0, 0, 1, 1, 4, 4, 6, 0, 1, 12, 14], [0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 3, 2, 1, 0, 1, 2, 0, 4, 8, 3, 3, 0, 15, 6], [0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 2, 0, 1, 2, 0]], "time_list": ["2017/01/05", "2017/01/10", "2017/01/11", "2017/01/12", "2017/01/18", "2017/01/19", "2017/02/03", "2017/02/04", "2017/02/06", "2017/02/07", "2017/02/08", "2017/02/09", "2017/02/10", "2017/02/11", "2017/02/12", "2017/02/13", "2017/02/14", "2017/02/15", "2017/02/16", "2017/02/17", "2017/02/19", "2017/02/20", "2017/02/21", "2017/02/22", "2017/02/23", "2017/02/24", "2017/02/25", "2017/02/26", "2017/02/27", "2017/02/28", "2017/03/01", "2017/03/02", "2017/03/03", "2017/03/04", "2017/03/05", "2017/03/06", "2017/03/07", "2017/03/08", "2017/03/09", "2017/03/10", "2017/03/11", "2017/03/12", "2017/03/13", "2017/03/14"]}


--------------------------------------------------------------------------------
/visualization/templates/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 | <head>
  4 |     <meta charset='utf-8'>
  5 |     <title>ECharts</title>
  6 |     <!-- 引入 echarts.js -->
  7 |     <script src='https://cdn.bootcss.com/echarts/3.4.0/echarts.js'></script>
  8 |     <script src='http://gallery.echartsjs.com/dep/echarts/map/js/china.js'></script>
  9 | </head>
 10 | <body>
 11 |     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 12 |     <div id='hist' style='width: 600px; height: 400px; float: left;'></div>
 13 |     <div id='scatter' style='width: 600px; height: 400px; float: right;'></div>
 14 |     <div id='pie_tag' style='width: 600px; height: 400px; float: left;'></div>
 15 |     <div id='line' style='width: 600px; height: 400px; float: right;'></div>
 16 | 
 17 |     <script type='text/javascript'>
 18 |         // 基于准备好的dom，初始化echarts实例
 19 |         var hist = echarts.init(document.getElementById('hist'));
 20 |         // 指定图表的配置项和数据
 21 |         var dataAxis = {{ data['city_list'] | safe }};
 22 |         var data = {{ data['count_list'] }};
 23 |         var yMax = 500;
 24 |         var dataShadow = [];
 25 |         
 26 |         for (var i = 0; i < data.length; i++) {
 27 |             dataShadow.push(yMax);
 28 |         }
 29 |         
 30 |         option = {
 31 |             backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
 32 |                 offset: 0,
 33 |                 color: '#f7f8fa'
 34 |                 }, {
 35 |                 offset: 1,
 36 |                 color: '#cdd0d5'
 37 |             }]),
 38 |             title: {
 39 |                 text: '实习数量-城市分布排名',
 40 |                 subtext: 'data from 实习僧',
 41 |                 sublink: 'http://www.shixiseng.com',
 42 |             },
 43 |             tooltip : {
 44 |                 trigger: 'axis',
 45 |                 axisPointer : {        // 坐标轴指示器，坐标轴触发有效
 46 |                 type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
 47 |                 }
 48 |             },
 49 |             xAxis: {
 50 |                 data: dataAxis,
 51 |                 axisLabel: {
 52 |                     inside: true,
 53 |                     textStyle: {
 54 |                         color: '#000'
 55 |                     }
 56 |                 },
 57 |                 axisTick: {
 58 |                     show: false
 59 |                 },
 60 |                 axisLine: {
 61 |                     show: false
 62 |                 },
 63 |                 z: 10
 64 |             },
 65 |             yAxis: {
 66 |                 axisLine: {
 67 |                     show: false
 68 |                 },
 69 |                 axisTick: {
 70 |                     show: false
 71 |                 },
 72 |                 axisLabel: {
 73 |                     textStyle: {
 74 |                         color: '#999'
 75 |                     }
 76 |                 }
 77 |             },
 78 |             dataZoom: [
 79 |                 {
 80 |                     type: 'inside'
 81 |                 }
 82 |             ],
 83 |             series: [
 84 |                 {
 85 |                     type: 'bar',
 86 |                     name: '数量',
 87 |                     itemStyle: {
 88 |                         normal: {
 89 |                             color: new echarts.graphic.LinearGradient(
 90 |                                 0, 0, 0, 1,
 91 |                                 [
 92 |                                     {offset: 0, color: '#83bff6'},
 93 |                                     {offset: 0.5, color: '#188df0'},
 94 |                                     {offset: 1, color: '#188df0'}
 95 |                                 ]
 96 |                             )
 97 |                         },
 98 |                         emphasis: {
 99 |                             color: new echarts.graphic.LinearGradient(
100 |                                 0, 0, 0, 1,
101 |                                 [
102 |                                     {offset: 0, color: '#2378f7'},
103 |                                     {offset: 0.7, color: '#2378f7'},
104 |                                     {offset: 1, color: '#83bff6'}
105 |                                 ]
106 |                             )
107 |                         }
108 |                     },
109 |                     data: data
110 |                 }
111 |             ]
112 |         };
113 |         
114 |         // Enable data zoom when user click bar.
115 |         var zoomSize = 6;
116 |         hist.on('click', function (params) {
117 |             console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
118 |             hist.dispatchAction({
119 |                 type: 'dataZoom',
120 |                 startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
121 |                 endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
122 |             });
123 |         });
124 | 
125 |         // 使用刚指定的配置项和数据显示图表。
126 |         hist.setOption(option);
127 |     </script>
128 | 
129 |     <script type='text/javascript'>
130 |     var scatter = echarts.init(document.getElementById('scatter'));  
131 |     var data = {{ data['city_count'] | safe }};
132 |     var geoCoordMap = {{ data['coord_map'] | safe }}
133 |     
134 |     var convertData = function (data) {
135 |         var res = [];
136 |         for (var i = 0; i < data.length; i++) {
137 |             var geoCoord = geoCoordMap[data[i].name];
138 |             if (geoCoord) {
139 |                 res.push({
140 |                     name: data[i].name,
141 |                     value: geoCoord.concat(data[i].value)
142 |                 });
143 |             }
144 |         }
145 |         return res;
146 |     };
147 |     
148 |     option = {
149 |         backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
150 |                 offset: 0,
151 |                 color: '#f7f8fa'
152 |                 }, {
153 |                 offset: 1,
154 |                 color: '#cdd0d5'
155 |             }]),
156 |         title: {
157 |             text: '实习数量-城市分布总览',
158 |             left: 'left',
159 |             textStyle: {
160 |                 color: '#000'
161 |             }
162 |         },
163 |         tooltip : {
164 |             trigger: 'item'
165 |         },
166 |         legend: {
167 |             orient: 'vertical',
168 |             y: 'bottom',
169 |             x:'right',
170 |             data:['实习数量'],
171 |             textStyle: {
172 |                 color: '#000'
173 |             }
174 |         },
175 |         geo: {
176 |             map: 'china',
177 |             label: {
178 |                 emphasis: {
179 |                     show: false
180 |                 }
181 |             },
182 |             roam: true,
183 |             itemStyle: {
184 |                 normal: {
185 |                     areaColor: '#ccc',
186 |                     borderColor: '#000'
187 |                 },
188 |                 emphasis: {
189 |                     areaColor: '#2a333d'
190 |                 }
191 |             }
192 |         },
193 |         series : [
194 |             {
195 |                 name: '实习数量',
196 |                 type: 'scatter',
197 |                 coordinateSystem: 'geo',
198 |                 data: convertData(data),
199 |                 // 圆圈大小做了对数修正
200 |                 symbolSize: function (val) {
201 |                     return Math.log(val[2]) * 5;
202 |                 },
203 |                 label: {
204 |                     normal: {
205 |                         formatter: '{b}',
206 |                         position: 'right',
207 |                         show: false
208 |                     },
209 |                     emphasis: {
210 |                         show: true
211 |                     }
212 |                 },
213 |                 itemStyle: {
214 |                     normal: {
215 |                         color: '#c23531'
216 |                     }
217 |                 }
218 |             },
219 |             {
220 |                 name: 'Top 5',
221 |                 type: 'effectScatter',
222 |                 coordinateSystem: 'geo',
223 |                 data: convertData(data.sort(function (a, b) {
224 |                     return b.value - a.value;
225 |                 }).slice(0, 6)),
226 |                 // 圆圈大小做了对数修正
227 |                 symbolSize: function (val) {
228 |                     return Math.log(val[2]) * 5;
229 |                 },
230 |                 showEffectOn: 'render',
231 |                 rippleEffect: {
232 |                     brushType: 'stroke'
233 |                 },
234 |                 hoverAnimation: true,
235 |                 label: {
236 |                     normal: {
237 |                         formatter: '{b}',
238 |                         position: 'right',
239 |                         show: true
240 |                     }
241 |                 },
242 |                 itemStyle: {
243 |                     normal: {
244 |                         color: '#c23531',
245 |                         shadowBlur: 10,
246 |                         shadowColor: '#333'
247 |                     }
248 |                 },
249 |                 zlevel: 1
250 |             }
251 |         ]
252 |     };
253 |     scatter.setOption(option);
254 |     </script>
255 | 
256 |     <script type='text/javascript'>
257 |         var pie = echarts.init(document.getElementById('pie_tag'));
258 |         option = {
259 |             backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
260 |                 offset: 0,
261 |                 color: '#f7f8fa'
262 |                 }, {
263 |                 offset: 1,
264 |                 color: '#cdd0d5'
265 |             }]),
266 |             title: {
267 |                 text: '实习标签/公司-数量分布',
268 |                 left: 'left',
269 |                 textStyle: {
270 |                     color: '#000'
271 |                 }
272 |             },
273 |             tooltip: {
274 |                 trigger: 'item',
275 |                 formatter: "{a} <br/>{b}: {c} ({d}%)"
276 |             },
277 |             legend: {
278 |                 orient: 'vertical',
279 |                 x: 'left',
280 |             },
281 |             series: [
282 |                 {
283 |                     name:'标签',
284 |                     type:'pie',
285 |                     radius: ['50%', '70%'],
286 |                     avoidLabelOverlap: true,
287 |                     label: {
288 |                         normal: {
289 |                             show: true,
290 |                             position: 'outside'
291 |                         },
292 |                         emphasis: {
293 |                             show: true,
294 |                             textStyle: {
295 |                                 fontSize: '30',
296 |                                 fontWeight: 'bold'
297 |                             }
298 |                         }
299 |                     },
300 |                     labelLine: {
301 |                         normal: {
302 |                             show: true
303 |                         }
304 |                     },
305 |                     data: {{ data['tags'] | safe }}
306 |                 },
307 | 
308 |                 {
309 |                     name:'公司',
310 |                     type:'pie',
311 |                     radius: ['10%', '40%'],
312 |                     avoidLabelOverlap: true,
313 |                     label: {
314 |                         normal: {
315 |                             show: false,
316 |                             position: 'inside'
317 |                         },
318 |                         emphasis: {
319 |                             show: true,
320 |                             textStyle: {
321 |                                 color: '#000',
322 |                                 fontSize: '20',
323 |                                 fontWeight: 'bold'
324 |                             }
325 |                         }
326 |                     },
327 |                     labelLine: {
328 |                         normal: {
329 |                             show: true
330 |                         }
331 |                     },
332 |                     data: {{ data['company'] | safe }}
333 |                 }
334 |             ]
335 |         };
336 |         pie.setOption(option);
337 |     </script>
338 | 
339 |     <script type='text/javascript'>
340 |             var line = echarts.init(document.getElementById('line'));
341 |             option = {
342 |                 backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
343 |                 offset: 0,
344 |                 color: '#f7f8fa'
345 |                 }, {
346 |                 offset: 1,
347 |                 color: '#cdd0d5'
348 |                 }]),
349 |                 title: {
350 |                     text: '堆叠区域图',
351 |                     left: 'left'
352 |                 },
353 |                 tooltip : {
354 |                     trigger: 'axis'
355 |                 },
356 |                 legend: {
357 |                     data:{{ data['tag_names'] | safe }}
358 |                 },
359 |                 toolbox: {
360 |                     feature: {
361 |                         saveAsImage: {}
362 |                     }
363 |                 },
364 |                 grid: {
365 |                     left: '3%',
366 |                     right: '4%',
367 |                     bottom: '3%',
368 |                     containLabel: true
369 |                 },
370 |                 xAxis : [
371 |                     {
372 |                         type : 'category',
373 |                         boundaryGap : false,
374 |                         data : {{ data['time_list']  | safe }}
375 |                     }
376 |                 ],
377 |                 yAxis : [
378 |                     {
379 |                         type : 'value'
380 |                     }
381 |                 ],
382 |                 series : [
383 |                     {% for tag in data['tag_names_list'] %}
384 |                     {
385 |                         name: '{{ tag | safe }}',
386 |                         type: 'line',
387 |                         stack: '总量',
388 |                         areaStyle: {normal: {}},
389 |                         data: {{ data['time_tag'][loop.index0] }}
390 |                     },
391 |                     {% endfor %}
392 |                 ]
393 |             };
394 |         line.setOption(option);
395 |     </script>
396 | </body>
397 | </html>
398 | 


--------------------------------------------------------------------------------
/visualization/view.py:
--------------------------------------------------------------------------------
 1 | # -*- coding: utf-8 -*-
 2 | from flask import Flask, render_template
 3 | import json
 4 | import os
 5 | 
 6 | import logging
 7 | logging.basicConfig()
 8 | 
 9 | app = Flask(__name__, instance_relative_config=True)
10 | 
11 | 
12 | def load_json(app, filename):
13 |     filename = os.path.join(app.static_folder, filename)
14 |     with open(filename, 'r') as json_data:
15 |         return json.load(json_data)
16 | 
17 | @app.route('/')
18 | def home_page():
19 |     tag_names = [x['name'] for x in load_json(app, 'count_tag.json')]
20 | 
21 |     data = {
22 |         'coord_map': load_json(app, 'map_coord.json'),
23 |         'city_list': load_json(app, 'city_count.json')['city_list'],
24 |         'count_list': load_json(app, 'city_count.json')['count_list'],
25 |         'city_count': load_json(app, 'city_count.json')['city_count'],
26 |         'tags': load_json(app, 'count_tag.json'),
27 |         'company': load_json(app, 'count_company_name.json'),
28 |         'tag_names_list': tag_names,
29 |         'tag_names': json.dumps(tag_names, ensure_ascii=False),
30 |         'time_list': load_json(app, 'time_tag.json')['time_list'],  # 如果需要在jinja2里循环, 就不能dump成json
31 |         'time_tag': load_json(app, 'time_tag.json')['tag_time_list']
32 |     }
33 | 
34 |     return render_template('index.html', data=data)
35 | 
36 | 
37 | if __name__ == '__main__':
38 |     app.run(host='0.0.0.0', port=8080)
39 | 


--------------------------------------------------------------------------------
/wsgi.py:
--------------------------------------------------------------------------------
1 | from visualization import app as application
2 | 
3 | if __name__ == "__main__":
4 |     application.run()
5 | 


--------------------------------------------------------------------------------