Echarts实现动态提取数据到饼状图

吐槽

今天做python web项目时候做饼状图时候遇到了问题，网页不报错但是就是一片空白，没有显示饼状图。
查看检查元素之后发现是数据到提取有问题，所以没在网页上显示出来。

在网上查了好多动态加载数据的教程起始都是互相抄而且并不是真的动态加载，而是静态的，都是垃圾，没有自己钻研的精神
我自己研究了一下午，终于做出来了，我来给大家分享一下

---

首先看看饼状图的输入数据结构

很显然，map类型，哦在python里面叫字典，dict，反正是键值对类型的，这就很尴尬了，我只学过输入单个列表的，这种显然是同时输入两个数据。

data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ],

看了例子里的数据我们发现，可以提取出公共格式

{value: ___ , name: ‘____’},

如上，是一个数据，准确的说，是一个for循环，我们把字典里所有的键值对遍历一次就可以了

具体操作

从数据库提取数据

已知需要传入一个字典，那我们首先在python代码里需要从数据库里提出一个字典，我这里是统计各个行业的招聘信息，键就应该是行业名字，值就是这个行业的工作总数。

我的爬取的数据库如图所示，sqlite存的，比较方便，选中的列就是工作地点，用sql语句提出来，并且计算每个行业的出现数量

    sql = "select company_area,count(*) from jobInformation group by company_area"

sql语句看不懂自己百度

将数据存入字典发送给网页

我们需要将数据存入一个变量发送到那个网页，这里需要的变量是字典类型的，就新建一个字典，然后遍历刚才的数据，把工作行业作键，数量作值。

@app.route('/company_area')
def company_area():
    areas = []
    datas = {}
    conn = sqlite3.connect("test.db")
    c = conn.cursor()
    sql = "select company_area,count(*) from jobInformation group by company_area"
    data_list = c.execute(sql)
    for item in data_list:
        datas[item[0]] = item[1]
        areas.append(str(item[0]))
    c.close()
    conn.close()
    return render_template("company_area.html", datas=datas, areas=areas)

传给网页一个字典，还有一个装了行业名的列表
（事实上不用这个列表，遍历字典取键就行，但是我写时候没想那么多）

在网页上提取收到的字典（重要！）

这一步就是各种教程都回避的一步，因为他们不会自己钻研技术。

把刚才的data部分，换成如下

data: [
                        {% for data in datas %}
                            {value:{{ datas[data] }}, name: '{{data}}'},
                        {% endfor %}
                    ],

自己体会！
写一个for循环遍历，然后挨个读取生成要求的html格式语句，就完事了
以后遇到要传入键值对的，就这么读取就完事了！
具体语法要是看不懂就只能百度了

看个效果图

就这样，靠谁都不如靠自己，网上教程不靠谱呀，自己多钻研多做记录，避免重复踩坑！