数据可视化-Echarts应用

前面看了下echarts的基础，现在用echarts来做一个显示电影评分的图在score.html上

找图表

https://echarts.apache.org/examples/zh/index.html 在echarts官网实例里面找，我跟着老师找了一个Bar Simple 的柱状图，这是一个最基本的柱状图内容非常少。跟着老师的学习方法：去看看别人的图表是怎么写的，有哪些内容可以借鉴，遇到不懂的组件直接在文档的配置项查找 就能知道作用了，多学习多看多借鉴多用就能很快上手。

比如，我想看看这个标题是怎么得到的，点击一下编辑就能看它是怎么写的了

可以看到里面有个title的值，这个就是标题，直接拿过来用就行了

title下面还有个tooltip，不知道是什么，直接去文档配置项查找看看，知道了是提示框组件，也可以拿来用用

grid之前入门的时候见过，好像是直角坐标系的底板，不清楚怎么用，也去文档配置项查查看

最后在Bar Simple的基础上加了title、tooltip、grid三个组件，结果如下

应用到网页

可以直接复制左边的option代码，也可以点击右下角的download，把它的页面下载到本地查看

我直接把他下载到本地，然后加到douban_flask项目里的templates文件夹里，然后修改score.html，首先引入js文件，js文件路径要写对

<script src="/static/assets/js/echarts.min.js"></script>

把Our Team Section里的标题改为’’豆瓣电影Top250评分分布图’’，把下面那段话去掉，把Counts Section里的四个图表div删除，然后在里面加入dom容器

<div id="main" style="width:100%;height:300px;"></div>

最后在Footer上面加入script绘图代码，根据需要修改一下dom要获取的id值

<script type="text/javascript">
var dom = document.getElementById("main");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
    title: {
        text: '电影评分表'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: {{ score }}  {# 字符串用score|tojson #}
        <!--['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']-->
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: {{ num }},
        <!--[120, 200, 150, 80, 70, 110, 130],-->
        type: 'bar'
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>

在app.py里再加一个路由解析，把数据库里的score拿出来再做一个统计，然后传给score.html渲染

@app.route('/score')
def score():
    score=[] #评分
    num=[] #每个评分所统计出的电影数量
    con = sqlite3.connect("movie.db")
    cur = con.cursor()
    sql = "select score,count(score) from movie250 group by score"
    data = cur.execute(sql)
    for item in data:
        score.append(item[0]) #字符串用str(item[0])
        num.append(item[1])
    cur.close()
    con.close()
    return render_template("score.html",score=score,num=num)

因为echarts里的data是[xx,xx]这种类型的，很像python里的列表，所以新建两个列表，一个存评分，一个存各评分的电影数量，然后把数据库的score和count(score)查出来加到两个列表里，因为数据库里的score是数值型的，如果Echarts图表里的data需要数值型可以直接给他用，如果他要的是字符串，那要把把值用str()函数强制转换一下再放到列表里，但是这样处理的结果是score列表里有特殊字符，echarts图表显示不出来，需要用tojson过滤器(它的作用是将变量输出为JSON字符串)，把score列表转换成json格式，在模板里用

{{ score|tojson }}

这样就可以正常显示了。Jinja2能识别所有类型的变量，此外还可以用过滤器修改变量，过滤器名添加在变量名之后，中间用竖线分隔。上面这种用法就是过滤器

结果如下

参考

https://www.bilibili.com/video/BV12E411A7ZQ?p=35

https://www.cnblogs.com/bmjoker/p/13508538.html

http://www.bjhee.com/jinja2-filter.html