Echarts

文档有教程

此处已经有下载好的最小版了

还有另外一种方法下载，进行在线定制

选完后，上面会有绿色对勾，最下方会有直接下载即可

这个可以根据自己的业务需求进行最小化的定制

生活中一些科研图表等，也可能会用到此种图表，用于

所有的可视化最根本的是数据，而可视化效果是js的图形进行的表示

只要学会一个基本的就能会其他的了

5分钟上手echarts，官方教程

将echarts.min.js粘贴到下方

此处完全可以直接打开HTML观察，这个无需打开服务器，只查看测试的话

柱状图如下所示

此时第一个示例已经运行完成了

接下来看echarts基础概念概览

一个网页中可以有多个图表，

系列，在整个图中某一部分寻找对应关系

相同的数据源可以有不同的表示效果

Option选项，通过里面的参数可以使图表显示成自己想要的效果

当我们在实例中看到自己想要的图标时，可以选择将里面的代码复制出来

下面的实例中是可以进行实时修改的

上图左侧的代码是script中的代码

应用

使用豆瓣分析的网站演示

如何找到需要修改的参数
通过查看别人的实例，自己进行实时修改，将别人里面的一些东西进行复制到自己的例子中测试其功能

通过看别人的案例，找到自己想要某部分，然后复制更改

样子选好了，只需要更改里面的data内容就行了，即横坐标内容，纵坐标的数值

在展示之前，先保证SQL语句的正确

@app.route('/score')                             #访问根路径
def score():
    score_data = []         #评分的种类
    num_data = []           #每个评分对应的电影数量
    con = sqlite3.connect("movie.db")  # 连接数据库，路径当前路径
    cur = con.cursor()  # 游标定义
    #下方语句可在数据库测试
    sql = "select score,count(score) from movie250 group by score"  # 从从数据库表movie250中查找分数和有多少个分数，按评分进行分组
    data = cur.execute(sql)
    for item in data:
        score_data.append(item[0])  # 得到的数据要保存到列表中，否则后面关闭时会丢失信息
        num_data.append(item[1])
    cur.close()
    con.close()
    return render_template("score.html",score_data=score_data,num_data=num_data)    #传递变量到页面中

上面的都是数字的形式，直接传入页面渲染的
若是列表得到的是字符串形式的，需要在页面渲染时进行转换
App.py文件下的

score_data.append(str(item[0]))

html下的变量

data: {{ score_data|tojson }}