0
点赞
收藏
分享

微信扫一扫

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

花姐的职场人生 2022-03-23 阅读 53
echartsflaskpython可视化html



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



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



​​Echarts官网网址​​



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



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



创建基础图例

  • ​​数据展示​​
  • ​​柱状图​​
  • ​​北京每小时空气质量柱状图​​
  • ​​北京每小时空气质量条形图​​
  • ​​折线图​​
  • ​​各省份累计确诊折线图​​
  • ​​各省份疫情信息堆叠图​​
  • ​​各省份房源数量占比散点图​​
  • ​​饼图​​
  • ​​房源占比前五的饼图​​
  • ​​房源占比前十南丁格尔玫瑰图​​
  • ​​疫情累计感染最多的两个省份信息雷达图​​
  • ​​热力图​​
  • ​​累计疫情热力图加地图​​



数据展示

​空气质量数据​

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

​房源占比数据​

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

​疫情数据​

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

柱状图

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

​通过观察数据发现，我们只需要两列数据，分别是时间和每小时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)

​至于​​html​​文件的书写，我们可以先去官网上看看​

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

  • ​一处是横坐标的坐标轴，例如在本案列中，我们将使用时间来作为横坐标​
  • ​二处是表示纵坐标输入的的是值，其实也可以省略不写​
  • ​三处是输入显示的数据，也即是纵坐标的值，​​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>

​其中几行代码的解析​

​注册myChart​

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

​读取后台传输的数据​

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

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

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

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

xAxis: {
            type: 'category',
            data: {{timestamp}}
          },

​这是将定义好的​​option​​插入​​myCharts​​​

myChart.setOption(option);

​这时可以查看结果​

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

​我们发现横坐标没有显示全，这是有两种解决的办法，一种是设置强制全部显示，另一种是宽度变长​

​方法一：强制全部显示​

xAxis: {
            type: 'category',
            data: timestamp,
            axisLabel:{
                interval:0,
                rotate:40
            }
          },

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

​方法二：加大宽度(500-> 800)​

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

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

​补充：可以加一些其他的工具时显示效果更好​

​增加指示器,当鼠标放置图上上，会显示信息​

tooltip: {},

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

​增加图例和动态效果显示​

legend: {
          data: ['销量']
        },
series: [
            {
              name: 'PM',
              data: pm,
              type: 'bar'
            }
          ]

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

​增加标题​

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

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

​​跳转顶部​​

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

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

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)

​我们去看看官网上条形图​

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

  • ​可见条形图就是方向相反的柱状图​
  • ​圈住的地方是书写样式的，只是为了图标的美观，可以省略​
  • ​我们可以清晰的发现​​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>

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

​​跳转顶部​​

折线图

各省份累计确诊折线图

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

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)

​分析折线图的写法​

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

​我们此时可以发现折线图和柱状图的写法几乎一致，唯一的区别就是​​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>

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

​​跳转顶部​​

各省份疫情信息堆叠图

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

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)

​​跳转顶部​​

​查看一下什么是堆叠图​

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

​简单的解释就是堆叠图就是多个折线图在同一个图上而已​

<!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>

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

​我们发现代码中多了一行​

tooltip: {
        trigger: 'axis'
      }

​这个是多了一个垂直于横坐标的垂直线，如下图所示​

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

​动态显示效果是当点击标签时，会出现的​

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

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

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

​和之前的一致先取出数据​

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)

​散点图、柱状图和折线图都十分的相似，唯一不同的地方就是​​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>

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

​​跳转顶部​​

饼图

房源占比前五的饼图

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

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)

​查看饼图的格式​

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

​我们发现饼图，不像柱状图那样输入一个​​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>

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

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

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

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)

​去官网上查看案列​

【Flask+Echarts】创建基础图例(散点、折线、柱状图、南丁格尔、饼图、堆叠、雷达、热点图)_可视化_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: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>

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

​​跳转顶部​​

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

​取出自己所需要的数据​

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)

​查看案列​

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

​主要注意的就是圈住的地方​

<!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>

​​​'{{col[0] | safe}}'​​为什么加上了单引号：字符串必须使用单引号​

​​​safe​​是不转义，防止字符串包含一些敏感字符​

​结果如下​

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

​​跳转顶部​​

热力图

​我们先查看热力图的结构​

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

​我们可以发现热力图数据都是有一定格式的​​(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()

​数据展示如下​

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

​完整的代码​

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)
<!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>

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

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

​热力图的第一个值是y轴，第二个才是x轴​

​​​|| '-'​​是不显示数值为0的,我们现在去掉​

visualMap: {
        min: 0,
        max: 5000,
        calculable: true,
        orient: 'vertical',
        bottom: '0%'
      },

​​​min​​和​​min​​设置热力最大和最小值​

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

​​跳转顶部​​

累计疫情热力图加地图

​选取需要的数据数据​

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)

​编写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>

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

​​跳转顶部​​


举报

相关推荐

echarts折线图，饼图，柱状图，散点图的配置

数据饼图柱状图JavaScript前端开发

echarts倾斜横向堆叠柱状图

数据库

Echarts 饼状图与柱状图数据关联

echartsjavascriptelementui

echart折线图，柱状图，饼图设置颜色

chartjavascript饼图f5Html/CSS前端开发

[echarts] 两侧堆叠柱状图

echarts前端javascript图例坐标轴Python后端开发

echarts 双堆叠柱状图（数据整理）

echartsjavascript前端

柱状图,折线图,饼图的js插件

clementineHtml/CSS前端开发

javafx 堆叠柱状图

柱状图JavaFX数据Java后端开发

Echarts柱状图

echarts前端

echarts—柱状图

echartsjavascriptvue.js
0 条评论