【echarts饼图】python flask+echarts+ajax动态修改html页面饼图的数据

前言：

最近需要在html页面展示信息，选择的是百度的echarts。

其中之一就是要用饼图，但总是无法把后台从数据库查询到的数据通过ajax传送到前台，询问高人无果（光改个饼图就要80，我看8块还差不多，gg），于是还是决定靠自己，终于鼓捣出来了，上图——

具体步骤：

1.从数据库查询到数据。

饼图嘛，就是展示两个数据，什么东西占了多少，即name占了多少value，一个name对应一个value。

我的待展示数据如下——

2.在路由函数（不知道这么喊对不对，其实我之前没接触过Flask）中获取这些待展示数据，并返回json格式。

需要注意的是，因为这些数据是包含在一个元组中，而我们需要修改饼图.js中的option{}的series[]中的data[]才能展示出来这些数据，这是官方实例——

可以看到data[]是一个列表[]，里面的数据是字典{}，也就是[{}]，而且字典里包含两个key——value和name，所以我们要把待展示数据也改成这样value：xxx和name：xxx的形式，好与之对应。

这是修改完的样子——

实现代码——

3.编写ajax函数，实现数据在前台html页面展示。

就是把饼图的option中的data[]更新成上一步获取到的data[]

4.启动服务器，查看前台，已经实现。

注意，有时候显示的还是上一次的图像，可以清除浏览器缓存试试。