Echarts数据可视化第9章一款可复制的通用可视化产品搭建全流程

た入场券 2024-03-25 20:46 22阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第9章 一款可复制的通用可视化产品搭建全流程
         *   *  9.1 弄清用户需求
             *  9.2 着手产品设计
             *  9.3 产品前后端开发
             *  9.4 可视化产品展示

> Echarts数据可视化：入门、实战与进阶

#### 第9章 一款可复制的通用可视化产品搭建全流程 ####

##### 9.1 弄清用户需求 #####

明确需求，弄清楚“这款产品是什么？有哪些功能？”

全面获取用户的需求有助于更好地服务于产品设计。

例如我们需要一款可以通过搜索股票代码获得股票各种信息的产品，那么该产品的核心功能就是实现在用户输入需要查询的股票代码后，给出相应的数据可视化统计图表。

##### 9.2 着手产品设计 #####

制定MRD（可制定市场需求文档）后通常是原型设计和视觉设计。

在页面待查询股票代码输入框输入相关股票代码后，点击查询按钮展示该股票的相关可视化信息。

在确定产品布局后，就是撰写产品需求文档（PRD）以细化产品功能。

假设本产品需要展示的可视化包括“近30交易日涨跌次数”(环形图)、“近30交易日净值变化”(折线图)、“近30交易日成交量“(柱状图)、”近30交易日收盘价“(折线图)的信息，并且要求在折线图中标识出最高和最低点。

##### 9.3 产品前后端开发 #####

项目代码结构：

![在这里插入图片描述][41e1b30f710947d78333bcb5549dc9fb.png_pic_center]

*  static：存放要调用的echarts.js
 *  templates：存放前端展示网页
 *  getdata.py：获取并处理股票数据
 *  query.py：调用Flask 框架

使用Python的tushare 包获取股票数据，tushare 是一个免费的开源Python 财经数据接口包。

安装：`pip install tushare -i https://pypi.tuna.tsinghua.edu.cn/simple`

![在这里插入图片描述][20309cab068549ecb12a718d9275a2ea.png_pic_center]

getdata.py

import tushare as ts
    
    def get_data(code):
        dict_return = {
        }  # 存放需要的数据
        data = ts.get_hist_data(code)  # 通过股票代码获取股票最近的数据
        data_30 = data[:30].iloc[::-1]  # 按照日期正序排列数据
        data_30['rise'] = data_30['price_change'] > 0  # 涨
        data_30['fall'] = data_30['price_change'] < 0  # 跌
        close = data_30['close']  # 最近30个交易日的收盘价
        close_index = list(close.index)  # 收盘价x轴数据
        close_value = close.values.tolist()  # 收盘价y轴数据
        df_diff = data_30[['rise', 'fall']].sum()  # 统计近30交易日的涨跌次数
        df_diff_index = list(df_diff.index)  # 将数据转为列表格式
        df_diff_value = df_diff.values.tolist()  # 将数据转为列表格式
        dict_return['diff'] = [{
        "name": item[0], "value": item[1]} for item in
                               list(zip(df_diff_index, df_diff_value))]  # 将数据制作成饼图需要的数据格式
        price_change = data_30['price_change'].values.tolist()  # 统计近30交易日的价格变化
        volume = data_30['volume'].values.tolist()  # 统计近30交易日的成交量
        # 以下为将处理好的数据加入字典
        dict_return['close_index'] = close_index
        dict_return['close_value'] = close_value
        dict_return['price_change'] = price_change
        dict_return['volume'] = volume
        dict_return['df_diff_index'] = df_diff_index
        return dict_return
    
    
    def get_name(code):
        '''通过股票代码导出公司名称'''
        pro = ts.pro_api()
        dat = pro.query('stock_basic', fields='symbol,name')
        company_name = list(dat.loc[dat['symbol'] == code.name])[0]
        return company_name
    
    
    print(get_data('002503'))

下面是测试函数

![在这里插入图片描述][cc8d271b4808401881132d16a681f1c9.png_pic_center]

query.py

from flask import Flask, request, render_template
    from getdata import get_data
    
    app = Flask(__name__)
    
    
    @app.route('/query/', methods=['GET', 'POST'])
    def query():
        if request.method == 'POST':
            code = request.form.get('name')
            dict_return = get_data(code)
            return render_template('query.html', dict_return=dict_return)
        else:
            dict_return = get_data('601318')
            return render_template('query.html', dict_return=dict_return)
    
    
    if __name__ == '__main__':
        app.run(debug=True)

> Flask 是一款使用Python 编写的轻量级Web 应用框架，一款后端框架，通过Flask 可以开启Web 服务
> 
> Github 仓库地址：[https://github.com/pallets/flask][https_github.com_pallets_flask]
> 
> ![在这里插入图片描述][3f44763ec19548018dd0c80ea599e58d.png_pic_center]
> 
> 官方文档：[https://flask.palletsprojects.com/en/2.2.x/][https_flask.palletsprojects.com_en_2.2.x]
> 
> ![在这里插入图片描述][4354965f0b2e42b68195d3e438a25264.png_pic_center]

templates中的query.html

<!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>股票实时查询产品DEMO</title>
    <script src="{
         { url_for('static',filename='echarts.js') }}"></script>
    </head>
    <body>
        
    	<center>
    	<form id="form" name="form" method='POST' action='/query/' style="text-alige:left">
    		<h1>请输入需要查询股票代码:
    		<input type="text" name="name" style="height:30px;width:160px;font-size:30px;">
    		<input type="submit" value="点击查询" ></h1>
    	</form>
    	<div id="main" style="width:1500px;height:750px;alige:center"></div>
        
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('main'));
            var option = {
          
    			 title: [	
    				 {
          
    					 text: '近30交易日\n涨跌天数',
    					 x: '25%',
    					 y: '25%',
    					 textAlign: 'center',
    					 textBaseline: 'middle',
    					 textStyle: {
          
    						 fontSize: 20
    					 }
    				 },
    				 {
          
    					 text: '近30交易日净值变化',
    					 x: '73%',
    					 y: '9%',
    					 textAlign: 'center',
    					 textBaseline: 'middle',
    					 textStyle: {
          
    						 fontSize: 20
    					 }
    				 },
    				 {
          
    					 text: '近30交易日成交量',
    					 x: '20.8%',
    					 y: '55%',
    					 textStyle: {
          
    						 fontSize: 20
    					 }
    				 },
    				 {
          
    					 text: '近30个交易日收盘价',
    					 x: '73%',
    					 y: '55%',
    					 textAlign: 'center',
    					 textBaseline: 'middle',
    					 textStyle: {
          
    						 fontSize: 20
    					 }
    				 },
    			 ],
    			 tooltip: {
          
    				 trigger: 'axis',
    				 axisPointer: {
          
    					 type: 'shadow'
    				 }
    			 },
    			 backgroundColor:'rgba(255,255,255,1)',
    			 grid: [
    			 	 {
          
    					 left: '5%',
    					 right: '55%',
    					 top: '60%',
    					 bottom: '5%',
    					 containLabel: true
    				 },
    				 {
          
    					 gridindex: 1,
    					 left: '50%',
    					 right: '5%',
    					 top: '60%',
    					 bottom: '5%',
    					 containLabel: true
    				 },
    				 {
          
    					 gridindex: 2,
    					 left: '50%',
    					 right: '5%',
    					 top: '17%',
    					 bottom: '55%',
    					 containLabel: true
    				 }
    			 ],
    			 xAxis: [
    				 {
          
    					 type: 'category',
    					 data: {
          {
          dict_return['close_index']|tojson}},
    					 axisLabel: {
          
    						 interval: 0,
    						 rotate:90
    					 },
    				 },
    				 {
          
    					 gridIndex: 1,
    					 type: 'category',
    					 boundaryGap: false,
    					 data: {
          {
          dict_return['close_index']|tojson}}
    				 },
    				 {
          
    					 gridIndex: 2,
    					 type: 'category',
    					 boundaryGap: false,
    					 data: {
          {
          dict_return['close_index']|tojson}}
    				 }
    			 ],
    			 yAxis: [
    			 	 {
          
    					 type: 'value',
    					 axisLabel: {
          
    						 formatter: '{value} '
    					 },
    					 boundaryGap: [0, 0.02]
    				 },
    				 {
          
    					 gridIndex: 1,
    					 type: 'value',
    					 axisLabel: {
          
    						 formatter: '{value} '
    					 }
    				 },
    				 {
          
    					 gridIndex: 2,
    					 type: 'value',
    					 axisLabel: {
          
    						 formatter: '{value} '
    					 }
    				 }
    			 ],
    			 series: [{
          
    					 name: '',
    					 type: 'bar',
    					 label: {
          
    						 normal: {
          
    							 show: true,
    							 position: 'top',
    							 rotate:90,
    							 show: false 
    						 }
    					 },
    					 data: {
          {
          dict_return['volume']|tojson}}
    				 },
    				 {
          
    					 name: '',
    					 type: 'pie',
    					 center: ['25%', '25%'],
    					 radius: ['25%', '35%'],
    					 label: {
          
    						 normal: {
          
    							 formatter: '{b} :\n{c}({d}%)'
    						 }
    					 },
    					 data: {
          {
          dict_return['diff']|tojson}}
    				 },
    				 {
          
    					 xAxisIndex: 1,
    					 yAxisIndex: 1,
    					 name: '',
    					 type: 'line',
    					 lineStyle: {
          
    						 normal: {
          
    							 color: ''
    						 }
    					 },
    					 //data: ['416', '382', '318', '184', '215', '265', '557', '954', '1627', '1180', '2416', '2678', '3021', '2590','2100','1809','2300','2539',],
    					 data: {
          {
          dict_return['close_value']|tojson}},
    					 smooth: true,
    					 markPoint: {
          
    						 data: [{
          
    								 type: 'max',
    								 name: '最大值',
    								 symbolSize: 60
    							 },
    							 {
          
    								 type: 'min',
    								 name: '最小值',
    								 symbolSize: 60
    							 }
    						 ],
    						 itemStyle: {
          
    							 normal: {
          
    								 color: '#F36100'
    							 }
    						 }
    					 },
    					 markLine: {
          
    						 data: [{
          
    							 type: 'average',
    							 name: '平均值'
    						 }]
    					 }
    				 },
    				 {
          
    					 xAxisIndex: 2,
    					 yAxisIndex: 2,
    					 name: '',
    					 type: 'line',
    					 lineStyle: {
          
    						 normal: {
          
    							 color: ''
    						 }
    					 },
    					 //data: ['416', '382', '318', '184', '215', '265', '557', '954', '1627', '1180', '2416', '2678', '3021', '2590','2100','1809','2300','2539',],
    					 data: {
          {
          dict_return['price_change']|tojson}},
    					 smooth: true,
    					 markPoint: {
          
    						 data: [{
          
    								 type: 'max',
    								 name: '最大值',
    								 symbolSize: 60
    							 },
    							 {
          
    								 type: 'min',
    								 name: '最小值',
    								 symbolSize: 60
    							 }
    						 ],
    						 itemStyle: {
          
    							 normal: {
          
    								 color: '#F36100'
    							 }
    						 }
    					 },
    					 markLine: {
          
    						 data: [{
          
    							 type: 'average',
    							 name: '平均值'
    						 }]
    					 }
    				 }
    			 ]
    		 };
            // 为echarts对象加载数据 
            myChart.setOption(option);
        </script>
    	</center>
    </body>
    </html>

##### 9.4 可视化产品展示 #####

直接运行query.py，`python query.py`

![在这里插入图片描述][9cf27654566d4a749692f0b189b8b3b8.png_pic_center]

访问http://localhost:5000/query/

![在这里插入图片描述][4066997df46343deabfe485dbb790288.png_pic_center]

这是601318的股票信息

输入一个 600120 进行查询

![在这里插入图片描述][d3575384c0364f878853ba608c56bc1a.gif_pic_center]

OK， 就这样。

[41e1b30f710947d78333bcb5549dc9fb.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/83a3476087f047fdb15ec9ce13cc6dde.png
[20309cab068549ecb12a718d9275a2ea.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/d56647c8406e4c8082c2d5f112ee7324.png
[cc8d271b4808401881132d16a681f1c9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/311d0f032ba34dfeac6171bc83cb1409.png
[https_github.com_pallets_flask]: https://github.com/pallets/flask
[3f44763ec19548018dd0c80ea599e58d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6ef679533b0c4f77bae592b811c37d14.png
[https_flask.palletsprojects.com_en_2.2.x]: https://flask.palletsprojects.com/en/2.2.x/
[4354965f0b2e42b68195d3e438a25264.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4c31317ab9aa4160acefa619bba8abf9.png
[9cf27654566d4a749692f0b189b8b3b8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/04adb5013b1d48689166266adb2babe1.png
[4066997df46343deabfe485dbb790288.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a95a06ca45af41da823ff0a99600a877.png
[d3575384c0364f878853ba608c56bc1a.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3ebaf51873df41d8b894faefbedb2979.png