<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。
- 什么是脚本？ - ***脚本***就是一系列指令，演员看了指令就知道自己该表演什么，说什么台词；计算机看了指令就知道自己该做什么事情。所以 script 其实就是短小的、用来***让计算机自动化完成一系列工作的程序***，这类程序可以用文本编辑器修改，不需要编译，通常是解释运行的。 **在网站前端编*****程的语境下***，***脚本通常是指在浏览器里运行的小程序，**用来控制网页上的各类元素该怎么表演给观众看***
## python与pyecharts结合： （前后端分离） ** ## index.html ** ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Awesome_pyecharts</title> <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script> </head> <body> <div id="bar" style="width:1000px; height:600px;"></div> <script> /* $( function () { var chart=echarts.init(document.getElementById('bar'),'white',{renderer:'canvas'}); $.ajax({ type:"GET", url:"http://127.0.0.1:5000/barChart", dataType:'json', success:function (result) { chart.setOption(result); } }); } ) */ /* var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'}); $( function () { fetchData(chart); setInterval(fetchData, 2000);//定时刷新 setinterval定时刷新核心 } ); function fetchData() { $.ajax({ type: "GET", url: "http://127.0.0.1:5000/barChart", dataType: 'json', success: function (result) { chart.setOption(result); } }); } */ var chart = echarts.init(document.getElementById('bar'), 'white', {renderer: 'canvas'}); var old_data = []; $( function () { fetchData(chart); setInterval(getDynamicData, 2000); } ); //获取（fetch）数据（data） //前端向127.0.0.1:5000/lineChart发送请求，app.py需添加改地址的路由函数，实现动态数据更新 function fetchData() { $.ajax({ type: "GET", url: "http://127.0.0.1:5000/lineChart", dataType: "json", success: function (result) { chart.setOption(result); old_data = chart.getOption().series[0].data; } }); } //获取更新数据数据 function getDynamicData() { $.ajax({ type: "GET", //从后端获取数据 url: "http://127.0.0.1:5000/lineDynamicData", //后端返回的数据类型 dataType: "json", //获取成功的话 success: function (result) { old_data.push([result.name, result.value]); chart.setOption({ series: [{data: old_data}] }); } }); } </script> </body> </html> # from flask import Flask, render_template # from random import randrange # from jinja2 import Markup # # # from pyecharts import options as opts # from pyecharts.charts import Bar # # app = Flask(__name__, static_folder="templates") # # # def bar_base() -> Bar: # c = ( # Bar() # .add_xaxis(["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]) # .add_yaxis("商家A", [5, 20, 36, 10, 75, 90]) # .add_yaxis("商家B", [15, 25, 16, 55, 48, 8]) # .set_global_opts(title_opts=opts.TitleOpts(title="Bar-基本示例", subtitle="我是副标题")) # ) # return c # # # @app.route("/") # def index(): # return render_template("index.html") # # @app.route("/barChart") # def get_bar_chart(): # c = bar_base() # return c.dump_options_with_quotes() # # if __name__ == "__main__": # app.run() #增量更新后端代码也需要相应的改变 from random import randrange from flask.json import jsonify from flask import Flask, render_template from pyecharts import options as opts from pyecharts.charts import Line app = Flask(__name__, static_folder="templates") def line_base() -> Line: line = ( Line() .add_xaxis(["{}".format(i) for i in range(10)]) .add_yaxis( series_name="", y_axis=[randrange(50, 80) for _ in range(10)], is_smooth=True, label_opts=opts.LabelOpts(is_show=False), ) .set_global_opts( title_opts=opts.TitleOpts(title="动态数据"), xaxis_opts=opts.AxisOpts(type_="value"), yaxis_opts=opts.AxisOpts(type_="value"), ) ) return line @app.route("/") def index(): return render_template("index.html") @app.route("/lineChart") def get_line_chart(): c = line_base() return c.dump_options_with_quotes() idx = 9 @app.route("/lineDynamicData") def update_line_data(): global idx idx = idx + 1 return jsonify({"name": idx, "value": randrange(50, 80)}) if __name__ == "__main__": app.run()