menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

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

武飞扬头像
飝鱻.
帮助1人

注：本文着重于使用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)
学新通

至于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>
学新通

其中几行代码的解析
注册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);

这时可以查看结果
学新通
我们发现横坐标没有显示全，这是有两种解决的办法，一种是设置强制全部显示，另一种是宽度变长
方法一：强制全部显示

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

学新通
方法二：加大宽度(500-> 800)

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

学新通

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

       tooltip: {},

学新通
增加图例和动态效果显示

        legend: {
          data: ['销量']
        },

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

学新通
增加标题

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

学新通

跳转顶部

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

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

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)
学新通

我们去看看官网上条形图
学新通

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

学新通

跳转顶部

折线图

各省份累计确诊折线图

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

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)
学新通

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

学新通

跳转顶部

各省份疫情信息堆叠图

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

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)
学新通

跳转顶部

查看一下什么是堆叠图
学新通
简单的解释就是堆叠图就是多个折线图在同一个图上而已

<!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>
学新通

学新通
我们发现代码中多了一行

      tooltip: {
        trigger: 'axis'
      }

这个是多了一个垂直于横坐标的垂直线，如下图所示
学新通
动态显示效果是当点击标签时，会出现的
学新通
可以看到累计的折线已经不显示了

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

和之前的一致先取出数据

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>
学新通

学新通

跳转顶部

饼图

房源占比前五的饼图

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

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)
学新通

查看饼图的格式

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

学新通

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

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

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)
学新通

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

<!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>
学新通

学新通

跳转顶部

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

取出自己所需要的数据

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)
学新通

查看案列

学新通
主要注意的就是圈住的地方

<!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是不转义，防止字符串包含一些敏感字符

结果如下
学新通

跳转顶部

热力图

我们先查看热力图的结构
学新通
我们可以发现热力图数据都是有一定格式的(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()

数据展示如下
学新通
完整的代码

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>
学新通

学新通

    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设置热力最大和最小值
学新通

跳转顶部

累计疫情热力图加地图

选取需要的数据数据

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>
学新通

学新通

跳转顶部

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhgbhagb
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群