# 基于boostrap4_pyecharts_jQuery的大数据实训前端部分

**Repository Path**: coldz/BDataTraing

## Basic Information

- **Project Name**: 基于boostrap4_pyecharts_jQuery的大数据实训前端部分
- **Description**: 更加熟悉Jquery操作DOM、Ajax的两种写法、Boostrap4的文档阅读能力有所提升，使用起来更随心，在PyEcharts文档中找到了官方的前后端分类数据交互方式、无意发现Nginx本地广播这一隐藏功能
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-29
- **Last Updated**: 2022-01-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Boostrap4_Pyecharts_jquery的大数据实训前端部分

### 收获

```
通过本次实训，我们对前端有更深刻的理解，回忆起了原生的DOM操作，对 Jquery 的简介操作更加顺手；
本次也意外得注意到 Ajax 的两种写法，丰富了自己的代码风格，也学习了一些关于XmlHttpRequest的
封装方法。在阅读Boostrap4 文档阅读能力同时，对文档的解读能力也有所提高有所提升。在 PyEcharts 
文档中找到了官方的前后端分类数据交互方式，改变了以往盲目diy json数据的方法，使得发送请求更加
规范和高效，感谢百度开源Pyecharts这一壮举；同时，无意发现 Nginx 本地广播这一隐藏功能，给局域
网内小组协作带来了极大的便利；本次在前端开发过程中，多次出现js位置不当，无法找到某个标签或其他
渲染问题，对这一类问题有了进一步的了解；前端排查错误的能力也得到进一步锻炼。
```

#### 以上将是丰富的素材和样例，一今后毕业设计平时需求开发提供帮助。

####  后台实现，一个例子，具有参考价值

```python
from flask import Flask
import pyecharts.options as opts
from pyecharts.charts import Line
from pyecharts.commons.utils import JsCode
from jinja2 import Markup
app = Flask(__name__)


@app.route('/attractionline')
def demo():
    x_data = ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]
    y_data = [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200]

    background_color_js = (
        "new echarts.graphic.LinearGradient(0, 0, 0, 1, "
        "[{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false)"
    )
    area_color_js = (
        "new echarts.graphic.LinearGradient(0, 0, 0, 1, "
        "[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
    )

    c = (
        Line(init_opts=opts.InitOpts(bg_color=JsCode(background_color_js)))
            .add_xaxis(xaxis_data=x_data)
            .add_yaxis(
            series_name="注册总量111",
            y_axis=y_data,
            is_smooth=True,
            is_symbol_show=True,
            symbol="circle",
            symbol_size=6,
            linestyle_opts=opts.LineStyleOpts(color="#fff"),
            label_opts=opts.LabelOpts(is_show=True, position="top", color="white"),
            itemstyle_opts=opts.ItemStyleOpts(
                color="red", border_color="#fff", border_width=3
            ),
            tooltip_opts=opts.TooltipOpts(is_show=False),
            areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),
        )
            .set_global_opts(
            title_opts=opts.TitleOpts(
                title="OCTOBER 2015",
                pos_bottom="5%",
                pos_left="center",
                title_textstyle_opts=opts.TextStyleOpts(color="#fff", font_size=16),
            ),
            xaxis_opts=opts.AxisOpts(
                type_="category",
                boundary_gap=False,
                axislabel_opts=opts.LabelOpts(margin=30, color="#ffffff63"),
                axisline_opts=opts.AxisLineOpts(is_show=False),
                axistick_opts=opts.AxisTickOpts(
                    is_show=True,
                    length=25,
                    linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
                ),
                splitline_opts=opts.SplitLineOpts(
                    is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
                ),
            ),
            yaxis_opts=opts.AxisOpts(
                type_="value",
                position="right",
                axislabel_opts=opts.LabelOpts(margin=20, color="#ffffff63"),
                axisline_opts=opts.AxisLineOpts(
                    linestyle_opts=opts.LineStyleOpts(width=2, color="#fff")
                ),
                axistick_opts=opts.AxisTickOpts(
                    is_show=True,
                    length=15,
                    linestyle_opts=opts.LineStyleOpts(color="#ffffff1f"),
                ),
                splitline_opts=opts.SplitLineOpts(
                    is_show=True, linestyle_opts=opts.LineStyleOpts(color="#ffffff1f")
                ),
            ),
            legend_opts=opts.LegendOpts(is_show=False),
        )
    )
    #返回渲染结果
    # return Markup(c.render_embed())
    #返回配置项
    return c.dump_options_with_quotes()


if __name__ == '__main__':

    app.run()

```

#### 开启同源策略组,跨域访问

```python
from FlaskPyECharts.__init__ import create_app
from flask_cors import *


app = create_app()


if __name__ == '__main__':
    CORS(app, supports_credentials=True)
    app.run(host="0.0.0.0",port=80, debug=True)
```

### 存在的问题

1、line_color_with_js_func,接收配置项会变黑，并没有发现颜色有什么问题，网上说有数据范围太小可能这样，但还存在其他可能导致的问题。 目前解决：通过iframe中接收结果呈现。