羊村懒王

这个屌丝很懒，什么也没留下！

热门标签

【Flask+Echarts】创建基础图例(散点、折线、柱状图、南丁格尔、饼图、堆叠、雷达、热点图)

作者：羊村懒王 | 2024-02-25 23:13:54

踩

flask+echarts

注：本文着重于使用Flask+Echarts画图，所以不会再数据处理上做较大的操作。

本次所使用到的数据
北京每小时空气质量
 房源分布占比
 疫情数据

Echarts官网网址

还需要两个js文件分别是china.js（画地图使用）和echarts.min.js，可自己上网查找

以上数据一般都给了下载链接，若链接失效，或没给下载链接，可以通过本文最下方的微信联系到作者。

数据展示

空气质量数据
在这里插入图片描述
房源占比数据

疫情数据

柱状图

北京每小时空气质量柱状图

通过观察数据发现，我们只需要两列数据，分别是时间和每小时PM2_5。所以我们只需要将所需要的数据截取下来传输到前端即可。

import pandas as pd
from flask import Flask, render_template

beijing_df = pd.read_csv('data/北京每个小时空气质量.csv')
timestamp = beijing_df['时间戳'].tolist()
pm = beijing_df['PM2_5'].tolist()

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('北京每小时空气质量柱状图.html', timestamp=timestamp, pm=pm)


if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

至于html文件的书写，我们可以先去官网上看看
在这里插入图片描述

一处是横坐标的坐标轴，例如在本案列中，我们将使用时间来作为横坐标
二处是表示纵坐标输入的的是值，其实也可以省略不写
三处是输入显示的数据，也即是纵坐标的值，data是具体的数据，type则是显示的表的类型

此时我们将代码复制，并且稍作修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京每小时空气质量柱状图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:500px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var timestamp = [{% for item in timestamp %}{{ item }},{% endfor %}];
      var pm = [{% for item in pm %}{{ item }},{% endfor %}];

      option = {
          xAxis: {
            type: 'category',
            data: timestamp
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: pm,
              type: 'bar'
            }
          ]
        };

      myChart.setOption(option);


</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

其中几行代码的解析
注册myChart

var myChart = echarts.init(document.getElementById('main'));
1

读取后台传输的数据

      var timestamp = [{% for item in timestamp %}{{ item }},{% endfor %}];
      var pm = [{% for item in pm %}{{ item }},{% endfor %}];
1
2

如果读取的数据是字符串类型的话，需要加上单引号,如下所示

      var timestamp = [{% for item in timestamp %}'{{ item }}',{% endfor %}];
1

其实读取数据还有一种写法就是直接获取，如下所示，其中safe是不转义的意思，一般读取字符串的时候需要使用,下面的参数名要和后台传输过来的一致

          xAxis: {
            type: 'category',
            data: {{timestamp}}
          },
1
2
3
4

这是将定义好的option插入myCharts

      myChart.setOption(option);
1

这时可以查看结果
在这里插入图片描述
我们发现横坐标没有显示全，这是有两种解决的办法，一种是设置强制全部显示，另一种是宽度变长
方法一：强制全部显示

          xAxis: {
            type: 'category',
            data: timestamp,
            axisLabel:{
                interval:0,
                rotate:40
            }
          },
1
2
3
4
5
6
7
8

在这里插入图片描述
方法二：加大宽度(500-> 800)

<div id="main" style="width:800px;height:400px"></div>
1

在这里插入图片描述

补充：可以加一些其他的工具时显示效果更好
增加指示器,当鼠标放置图上上，会显示信息

       tooltip: {},
1

在这里插入图片描述
增加图例和动态效果显示

        legend: {
          data: ['销量']
        },
1
2
3

          series: [
            {
              name: 'PM',
              data: pm,
              type: 'bar'
            }
          ]
1
2
3
4
5
6
7

在这里插入图片描述
增加标题

          title: {
          text: '北京每小时空气质量柱状图'
          },
1
2
3

在这里插入图片描述

跳转顶部

北京每小时空气质量条形图

首先我们还是取出自己所需要的数据传输至前端

import pandas as pd
from flask import Flask, render_template

beijing_df = pd.read_csv('data/北京每个小时空气质量.csv')
timestamp = beijing_df['时间戳'].tolist()
pm = beijing_df['PM2_5'].tolist()
aqi = beijing_df['AQI'].tolist()

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('北京每小时空气质量条形图.html', timestamp=timestamp, pm=pm, aqi=aqi)


if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

我们去看看官网上条形图
在这里插入图片描述

可见条形图就是方向相反的柱状图
圈住的地方是书写样式的，只是为了图标的美观，可以省略
我们可以清晰的发现series是可以写多个data的，可以显示多个数据

我们自己的代码书写如下所示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京每小时空气质量条形图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var timestamp = [{% for item in timestamp %}{{ item }},{% endfor %}];
      var pm = [{% for item in pm %}{{ item }},{% endfor %}];
      var aqi = [{% for item in aqi %}{{ item }},{% endfor %}];

      option = {
      title: {
        text: '北京每小时空气质量条形图'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: timestamp
      },
      series: [
        {
          name: 'PM',
          type: 'bar',
          data: pm
        },
        {
          name: 'AQI',
          type: 'bar',
          data: aqi
        }
      ]
    };

      myChart.setOption(option);



</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

在这里插入图片描述

跳转顶部

折线图

各省份累计确诊折线图

从数据中读取省份列和累计列即可

import pandas as pd
from flask import Flask, render_template

df = pd.read_csv('data/中国疫情.csv')
province = df['地区'].tolist()
all = df['累计'].tolist()

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('各省份累计确诊折线图.html', province=province, all=all)


if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

分析折线图的写法
在这里插入图片描述
我们此时可以发现折线图和柱状图的写法几乎一致，唯一的区别就是type不一致，所以我们可以将柱状图复制过来，来进行更改即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各省份累计确诊折线图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var province = [{% for item in province %}'{{ item }}',{% endfor %}];
      var all = [{% for item in all %}{{ item }},{% endfor %}];

      option = {
          title: {
          text: '各省份累计确诊折线图'
          },
          xAxis: {
            type: 'category',
            data: province,
            axisLabel:{
                interval:0,
                rotate:40
            }
          },
          tooltip: {},
          legend: {
          data: ['累计确诊']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '累计确诊',
              data: all,
              type: 'line'
            }
          ]
        };

      myChart.setOption(option);



</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

在这里插入图片描述

跳转顶部

各省份疫情信息堆叠图

在这个图中我们需要取出全部的数据

import pandas as pd
from flask import Flask, render_template

df = pd.read_csv('data/中国疫情.csv')
province = df['地区'].tolist()
new = df['新增'].tolist()
exist = df['现有'].tolist()
all = df['累计'].tolist()
cure = df['治愈'].tolist()
dead = df['死亡'].tolist()

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('各省份疫情信息堆叠图.html', province=province, new=new, exist=exist, all=all, cure=cure, dead=dead)


if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

跳转顶部

查看一下什么是堆叠图
在这里插入图片描述
简单的解释就是堆叠图就是多个折线图在同一个图上而已

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各省份疫情信息堆叠图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var province = [{% for item in province %}'{{ item }}',{% endfor %}];
      var all = [{% for item in all %}{{ item }},{% endfor %}];
      var add = [{% for item in add %}{{ item }},{% endfor %}];
      var cure = [{% for item in cure %}{{ item }},{% endfor %}];
      var exist = [{% for item in exist %}{{ item }},{% endfor %}];
      var dead = [{% for item in dead %}{{ item }},{% endfor %}];

      option = {
      title: {
        text: '各省份疫情信息堆叠图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {

      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: province,
        axisLabel:{
           interval:0,
           rotate:40
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增',
          type: 'line',
          stack: 'Total',
          data: add
        },
        {
          name: '累计',
          type: 'line',
          stack: 'Total',
          data: all
        },
        {
          name: '现有',
          type: 'line',
          stack: 'Total',
          data: exist
        },
        {
          name: '治愈',
          type: 'line',
          stack: 'Total',
          data: cure
        },
        {
          name: '死亡',
          type: 'line',
          stack: 'Total',
          data: dead
        }
      ]
};

      myChart.setOption(option);



</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

在这里插入图片描述
我们发现代码中多了一行

      tooltip: {
        trigger: 'axis'
      }
1
2
3

这个是多了一个垂直于横坐标的垂直线，如下图所示
在这里插入图片描述
动态显示效果是当点击标签时，会出现的

可以看到累计的折线已经不显示了

各省份房源数量占比散点图

和之前的一致先取出数据

import pandas as pd
from flask import Flask, render_template

df = pd.read_csv('data/房源数量占比.csv')
province = df['省份'].tolist()
rank = df['房源数量分布占比'].tolist()

app = Flask(__name__)


@app.route("/")
def index():
    return render_template('各省份房源数量占比散点图.html', province=province, rank=rank)


if __name__ == '__main__':
    app.run(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

散点图、柱状图和折线图都十分的相似，唯一不同的地方就是type的区别，所以我们可以复制之前的代码，更改类型即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各省份房源数量占比散点图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var province = [{% for item in province %}'{{ item }}',{% endfor %}];
      var rank = [{% for item in rank %}{{ item }},{% endfor %}];

      option = {
          title: {
          text: '各省份房源数量占比散点图'
          },
          xAxis: {
            type: 'category',
            data: province,
            axisLabel:{
                interval:0,
                rotate:40
            }
          },
          tooltip: {},
          legend: {
          data: ['房源占比']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '房源占比',
              data: rank,
              type: 'scatter'
            }
          ]
        };

      myChart.setOption(option);


</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在这里插入图片描述

跳转顶部

饼图

房源占比前五的饼图

老规矩读取数据,但这里是要进行排序和筛选的了

import pandas as pd
from flask import Flask, render_template

# df = pd.read_csv('data/房源数量占比.csv')
# df = df.sort_values('房源数量分布占比', ascending=False)
# province = df['省份'].head(5).tolist()
# rank = df['房源数量分布占比'].head(5).tolist()

datas = {}
df = pd.read_csv('data/房源数量占比.csv')
df = df.sort_values('房源数量分布占比', ascending=False)

for item in df.head().values:
    datas[item[0]] = item[1]

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('房源占比前五的饼图.html', datas=datas)


if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

查看饼图的格式

在这里插入图片描述
我们发现饼图，不像柱状图那样输入一个list列表就好了，而是像字典一样的格式，但是叫我们一个个的手写又不现实，所以我们将会在这里使用循环来输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房源占比前五的饼图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      option = {
      title: {
        text: '房源占比前五的饼图',
        subtext: '饼图练习',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '房源占比',
          type: 'pie',
          radius: '50%',
          data: [
               {% for data in datas %}
               {value:{{ datas[data] }}, name: '{{data}}'},
               {% endfor %}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);




</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

在这里插入图片描述

房源占比前十南丁格尔玫瑰图

南丁格尔玫瑰图和饼图大致一致，我们先取出数据

import pandas as pd
from flask import Flask, render_template

datas = {}
df = pd.read_csv('data/房源数量占比.csv')
df = df.sort_values('房源数量分布占比', ascending=False)

for item in df.head(10).values:
    datas[item[0]] = item[1]

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('房源占比前十南丁格尔玫瑰图.html', datas=datas)


if __name__ == '__main__':
    app.run(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

去官网上查看案列
在这里插入图片描述
南丁格尔图的数据也是以字典的形式输入的，因此我们也需要使用到循环
他和饼图最大的区别就是框住的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>房源占比前十南丁格尔玫瑰图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:800px;height:600px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      option = {
       title: {
        text: '房源占比前十南丁格尔玫瑰图'
      },
      tooltip:{},
      legend: {
        top: 'bottom'
      },
      toolbox: {
        show: true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: '房源占比',
          type: 'pie',
          radius: [50, 250],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: [
            {% for data in datas %}
            {value:{{datas[data]}},name: '{{data}}'},
            {% endfor %}
          ]
        }
      ]
};

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);




</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

在这里插入图片描述

跳转顶部

疫情累计感染最多的两个省份信息雷达图

取出自己所需要的数据

import pandas as pd
from flask import Flask, render_template

df = pd.read_csv('data/中国疫情.csv')
df = df.sort_values('累计', ascending=False).head(2)
province = df['地区'].tolist()
col = df.columns.tolist()[2:]
data = df.iloc[:, 2:].values.tolist()



app = Flask(__name__)


@app.route("/")
def index():
    return render_template('疫情累计感染最多的两个省份信息雷达图.html', province=province, col=col, data=data)


if __name__ == '__main__':
    app.run(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

查看案列

在这里插入图片描述
主要注意的就是圈住的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>疫情累计感染最多的两个省份信息雷达图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1400px;height:700px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      option = {
      title: {
        text: '疫情累计感染最多的两个省份信息雷达图'
      },
      tooltip:{},
      legend: {

      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '{{col[0] | safe}}', max: 200 },
          { name: '{{col[1] | safe}}', max: 16000 },
          { name: '{{col[2] | safe}}', max: 75000 },
          { name: '{{col[3] | safe}}', max: 70000 },
          { name: '{{col[4] | safe}}', max: 10000 }
        ]
      },
      series: [
        {
          name: '疫情对比表',
          type: 'radar',
          data: [
            {
              value: {{data[0]}},
              name: '{{province[0] | safe}}'
            },
            {
              value: {{data[1]}},
              name: '{{province[1] | safe}}'
            }
          ]
        }
      ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

'{{col[0] | safe}}'为什么加上了单引号：字符串必须使用单引号
safe是不转义，防止字符串包含一些敏感字符

结果如下
在这里插入图片描述

跳转顶部

热力图

我们先查看热力图的结构
在这里插入图片描述
我们可以发现热力图数据都是有一定格式的(x,y,m)，前两个是他的坐标信息，后面是值，也可以理解成前两个确定位置，后一个确定大小

由于我们并没有热力图的数据，我们此时可以自己生成一些随机的数据

temp = np.random.randint(40, size=100)
days = np.random.randint(7, size=100) + 1
hour = np.random.randint(12, size=100) + 1

data = pd.DataFrame({
    '日期': days.tolist(),
    '时间': hour.tolist(),
    '温度': temp.tolist()
})
data = data.values.tolist()
1
2
3
4
5
6
7
8
9
10

数据展示如下
在这里插入图片描述
完整的代码

import pandas as pd
import numpy as np
from flask import Flask, render_template

temp = np.random.randint(40, size=100)
days = np.random.randint(7, size=100)
hour = np.random.randint(12, size=100)

data = pd.DataFrame({
    '日期': days.tolist(),
    '时间': hour.tolist(),
    '温度': temp.tolist()
})
datas = data.values.tolist()

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('热力图.html', datas=datas)


if __name__ == '__main__':
    app.run(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>热力图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // prettier-ignore
        const hours = [
           1,2,3,4,5,6,7,8,9,10,11,12
        ];
     // prettier-ignore
        const days = [
            'Saturday', 'Friday', 'Thursday',
            'Wednesday', 'Tuesday', 'Monday', 'Sunday'
        ];
    // prettier-ignore
    data = {{datas}}.map(function (item) {
              return [item[1], item[0], item[2] || '-'];
           });
    option = {
      tooltip: {
        position: 'top'
      },
      grid: {
        height: '50%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: hours,
        splitArea: {
          show: true
        }
      },
      yAxis: {
        type: 'category',
        data: days,
        splitArea: {
          show: true
        }
      },
      visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
      },
      series: [
        {
          name: '温度',
          type: 'heatmap',
          data: data,
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

在这里插入图片描述

    data = {{datas}}.map(function (item) {
              return [item[1], item[0], item[2] || '-'];
           });
1
2
3

热力图的第一个值是y轴，第二个才是x轴
|| '-'是不显示数值为0的,我们现在去掉

      visualMap: {
        min: 0,
        max: 5000,
        calculable: true,
        orient: 'vertical',
        bottom: '0%'
      },
1
2
3
4
5
6
7

min和min设置热力最大和最小值
在这里插入图片描述

跳转顶部

累计疫情热力图加地图

选取需要的数据数据

import pandas as pd
from flask import Flask, render_template

datas = {}
df = pd.read_csv('data/中国疫情.csv')

for item in df.values:
    datas[item[1]] = item[4]

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('累计疫情热力图加地图.html', datas=datas)


if __name__ == '__main__':
    app.run(debug=True)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>累计疫情热力图加地图</title>
    <script src="../static/echarts.min.js"></script>
    <script src="../static/china.js"></script>
</head>
<body>
<div id="main" style="width:600px;height:500px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      option = {
      title: {
        text: '累计疫情热力图加地图',
        subtext: '地图加热力图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      visualMap: {
        min: 0,
        max: 5000,
        calculable: true,
        orient: 'vertical',
        bottom: '0%'
      },
       series:[
         {
            name:'中国',
            type:'map',
            mapType:'china',
            label:{
               emphasis:{
                  show:true
               },
               normal:{
                  show:true
               }
            },
            data: [
                   {% for data in datas %}
                   {value:{{ datas[data] }}, name: '{{data}}'},
                   {% endfor %}
            ]
          }
       ]
    };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);


</script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

在这里插入图片描述

跳转顶部

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】