系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 脚本中心 > python > 详细页面

Python3.x+pyqtgraph实现数据可视化教程

时间:2020-03-14来源:电脑系统城作者:电脑系统城

1、pyqtgraph库数据可视化效果还不错,特别是窗体程序中图像交互性较好;安装也很方便,用 pip 安装。

2、在Python中新建一个 .py 文件,然后写入如下代码并执行可以得到官方提供的很多案例(含代码),出现如下界面图像:

import pyqtgraph.examples
pyqtgraph.examples.run()

Python3.x+pyqtgraph实现数据可视化教程

图1

Python3.x+pyqtgraph实现数据可视化教程

图2

Python3.x+pyqtgraph实现数据可视化教程

图3

4、程序默认是黑色背景,这个是可以修改的。比如,在程序的开头部分写入如下代码就可以修改背景:

pg.setConfigOption('background', 'w')
pg.setConfigOption('foreground', 'k')

更多说明,见 pyqtgraph 官网:http://www.pyqtgraph.org/documentation/style.html,“Line, Fill, and Color”部分的“Default Background and Foreground Colors”部分。

5、一个修改背景颜色的完整案例如下,可以直接运行程序:


 
  1. import numpy as np
  2. import pyqtgraph as pg
  3. from pyqtgraph.Qt import QtGui, QtCore
  4.  
  5. # 如下2行代码是我自己加入的,目的是修改默认的黑色背景为其它颜色背景
  6. pg.setConfigOption('background', 'w')
  7. pg.setConfigOption('foreground', 'k')
  8.  
  9. from pyqtgraph.Point import Point
  10.  
  11. #generate layout
  12. app = QtGui.QApplication([])
  13. win = pg.GraphicsWindow()
  14. win.setWindowTitle('pyqtgraph example: crosshair')
  15. label = pg.LabelItem(justify='right')
  16. win.addItem(label)
  17. p1 = win.addPlot(row=1, col=0)
  18. p2 = win.addPlot(row=2, col=0)
  19.  
  20. region = pg.LinearRegionItem()
  21. region.setZValue(10)
  22. # Add the LinearRegionItem to the ViewBox, but tell the ViewBox to exclude this
  23. # item when doing auto-range calculations.
  24. p2.addItem(region, ignoreBounds=True)
  25.  
  26. #pg.dbg()
  27. p1.setAutoVisible(y=True)
  28.  
  29.  
  30. #create numpy arrays
  31. #make the numbers large to show that the xrange shows data from 10000 to all the way 0
  32. data1 = 10000 + 15000 * pg.gaussianFilter(np.random.random(size=10000), 10) + 3000 *np.random.random(size=10000)
  33. data2 = 15000 + 15000 * pg.gaussianFilter(np.random.random(size=10000), 10) + 3000 *np.random.random(size=10000)
  34.  
  35. p1.plot(data1, pen="r")
  36. p1.plot(data2, pen="g")
  37.  
  38. p2.plot(data1, pen="w")
  39.  
  40. def update():
  41. region.setZValue(10)
  42. minX, maxX = region.getRegion()
  43. p1.setXRange(minX, maxX, padding=0)
  44.  
  45. region.sigRegionChanged.connect(update)
  46.  
  47. def updateRegion(window, viewRange):
  48. rgn = viewRange[0]
  49. region.setRegion(rgn)
  50.  
  51. p1.sigRangeChanged.connect(updateRegion)
  52.  
  53. region.setRegion([1000, 2000])
  54.  
  55. #cross hair
  56. vLine = pg.InfiniteLine(angle=90, movable=False)
  57. hLine = pg.InfiniteLine(angle=0, movable=False)
  58. p1.addItem(vLine, ignoreBounds=True)
  59. p1.addItem(hLine, ignoreBounds=True)
  60.  
  61. vb = p1.vb
  62. def mouseMoved(evt):
  63. pos = evt[0] ## using signal proxy turns original arguments into a tuple
  64. if p1.sceneBoundingRect().contains(pos):
  65. mousePoint = vb.mapSceneToView(pos)
  66. index = int(mousePoint.x())
  67. if index > 0 and index < len(data1):
  68. label.setText("<span style='font-size: 12pt'>x=%0.1f, <span style='color: red'>y1=%0.1f</span>, <span style='color: green'>y2=%0.1f</span>" % (mousePoint.x(),data1[index], data2[index]))
  69. vLine.setPos(mousePoint.x())
  70. hLine.setPos(mousePoint.y())
  71.  
  72. proxy = pg.SignalProxy(p1.scene().sigMouseMoved, rateLimit=60, slot=mouseMoved)
  73. #p1.scene().sigMouseMoved.connect(mouseMoved)
  74.  
  75.  
  76. ## Start Qt event loop unless running in interactive mode or using pyside.
  77. if __name__ == '__main__':
  78. import sys
  79. if (sys.flags.interactive != 1) or not hasattr(QtCore, 'PYQT_VERSION'):
  80. QtGui.QApplication.instance().exec_()

知识补充:python图形化实例分享--pyqt5与pyqtgraph嵌入绘图

序言

之前也写过一些图形化界面的程序,基本上都是用wxPython写的,确实简单粗暴易上手。这次的任务是要写一个绘图的程序,wx模块就显得不太友好了,我就去网上找了一些资料,发现PyQtGraph画这种K线图、波形图等图形真是太简单了,更多的关于wx、qt等模块的细节学习可以看我后面的参考资料,我这里就分享一下我本程序的心得,和对有些方法使用上自己的理解

项目开始

引用头文件

pyqt5_draw_1 这是主程序文件,负责主窗口图形化界面


 
  1. import sys # 与PyQt5配合使用
  2. from PyQt5.QtWidgets import (QApplication, QMainWindow, QWidget, QGridLayout,
  3. QHBoxLayout, QVBoxLayout,QLabel, QComboBox,QPushButton,
  4. QDateEdit, QSpacerItem,QFrame, QSizePolicy, QSplitter,
  5. QRadioButton, QGroupBox,QCheckBox,QLineEdit, QAction)
  6. # 上面是QT图形化要引用的所有包
  7. from PyQt5.QtCore import Qt, QDate, QRect # 对齐、时间等
  8. from PyQt5.QtCore import QThread, pyqtSignal # 多线程管理
  9. import pyqtgraph as pg # 绘图包
  10. from Tmp_Data import * # 自定义文件,下面有介绍
  11. from Mythreading import * # 自定义文件,下面有介绍
  12. from pyqt5_graph import * # 自定义文件,下面有介绍


如果PyQt5、pyqtgraph未安装的,最简单的安装方式就用python自带的pip工具安装,如果没有pip的或不会安装可直接百度

c:\> pip install PyQt5 pyqtgraph

图形化主界面搭建


 
  1. # pyqt5_draw_1.py 文件名
  2. import sys
  3. import cgitb
  4. from PyQt5.QtWidgets import (QApplication, QMainWindow, QWidget, QGridLayout,
  5. QHBoxLayout, QVBoxLayout,QLabel, QComboBox,QPushButton,
  6. QDateEdit, QSpacerItem,QFrame, QSizePolicy, QSplitter,
  7. QRadioButton, QGroupBox,QCheckBox,QLineEdit, QAction)
  8. from PyQt5.QtCore import Qt, QDate, QRect
  9. from TmpData import *
  10. from Mythreading import *
  11. from pyqt5_graph import *
  12.  
  13.  
  14. class Qt_Test_Frame(QMainWindow):
  15.  
  16. Items = []
  17.  
  18. def __init__(self):
  19. #super(Qt_Test_Frame, self).__init__(*args, **kw)
  20. super().__init__()
  21.  
  22. # 初始化界面
  23. self._initUI()
  24.  
  25. self.show()
  26.  
  27. def _initUI(self):
  28. self.setWindowTitle("QT图形界面测试")
  29. self.resize(800, 600)
  30.  
  31. wwg = QWidget()
  32.  
  33. # 全局布局
  34. wlayout = QVBoxLayout()
  35. h1_wlayout = QHBoxLayout()
  36. h2_wlayout = QHBoxLayout()
  37. h3_wlayout = QHBoxLayout()
  38. v4_wlayout = QVBoxLayout()
  39. v5_wlayout = QVBoxLayout()
  40.  
  41. self.statusBar().showMessage("状态栏")
  42.  
  43. # 第一层
  44. self._frist_story(h1_wlayout)
  45.  
  46. # 第二层
  47. self._second_story(h2_wlayout)
  48.  
  49. # 第三层 左
  50. self._third_left(v4_wlayout, v5_wlayout)
  51.  
  52. # 第三层 右
  53. self._fouth_right(v5_wlayout)
  54.  
  55. # 加载
  56. splt = self._my_line()
  57. splt2 = self._my_line(False)
  58. wlayout.addSpacing(10) # 增加布局间距
  59. wlayout.addLayout(h1_wlayout)
  60. wlayout.addSpacing(10) # 增加布局间距
  61. wlayout.addLayout(h2_wlayout)
  62. wlayout.addSpacing(10) # 增加布局间距
  63. wlayout.addWidget(splt)
  64. wlayout.addLayout(h3_wlayout)
  65. wlayout.addWidget(self.statusBar())
  66. h3_wlayout.addLayout(v4_wlayout, 0)
  67. h3_wlayout.addWidget(splt2)
  68. h3_wlayout.addLayout(v5_wlayout, 2)
  69.  
  70. #wlayout.setAlignment(Qt.AlignTop)
  71.  
  72. wwg.setLayout(wlayout)
  73. self.setCentralWidget(wwg)
  74.  
  75. def _frist_story(self, h1_wlayout):
  76. # 第一层布局
  77. self.h1_combox1 = QComboBox(minimumWidth=100)
  78. self.h1_combox1.addItems(wind_field)
  79. self.h1_combox2 = QComboBox(minimumWidth=100)
  80. self.h1_combox2.addItems(wind_mach_chooice(self.h1_combox1.currentText()))
  81. self.h1_combox3 = QComboBox(minimumWidth=100)
  82. self.h1_combox3.addItems(wind_blade)
  83. self.h1_combox4 = QComboBox(minimumWidth=100)
  84. self.h1_combox4.addItems(signal_type)
  85.  
  86. # 行为测试 暂时无法使用
  87. h1_cb1_action = QAction("风场选择", self)
  88. h1_cb1_action.setStatusTip("请选择风场")
  89. self.h1_combox1.addAction(h1_cb1_action)
  90.  
  91. h1_wlayout.addItem(QSpacerItem(20, 20))
  92. h1_wlayout.addWidget(QLabel("风场"),0)
  93. h1_wlayout.addWidget(self.h1_combox1,0)
  94. h1_wlayout.addItem(QSpacerItem(40, 20))
  95. h1_wlayout.addWidget(QLabel("风机"), 0)
  96. h1_wlayout.addWidget(self.h1_combox2, 0)
  97. h1_wlayout.addItem(QSpacerItem(40, 20))
  98. h1_wlayout.addWidget(QLabel("叶片ID"), 0)
  99. h1_wlayout.addWidget(self.h1_combox3, 0)
  100. h1_wlayout.addItem(QSpacerItem(40, 20))
  101. h1_wlayout.addWidget(QLabel("信号类型"), 0)
  102. h1_wlayout.addWidget(self.h1_combox4, 0)
  103.  
  104. h1_wlayout.setAlignment(Qt.AlignLeft)
  105.  
  106. # 事件绑定
  107. self.h1_combox1.currentIndexChanged.connect(self._wind_chooice)
  108.  
  109. def _second_story(self, h2_wlayout):
  110. # 第二层布局
  111. self.h2_date1 = QDateEdit(QDate.currentDate())
  112. self.h2_date1.setCalendarPopup(True)
  113. self.h2_date2 = QDateEdit(QDate.currentDate())
  114. self.h2_date2.setCalendarPopup(True)
  115. self.h2_button = QPushButton("运行")
  116. self.h2_button2 = QPushButton("停止")
  117.  
  118. h2_wlayout.addItem(QSpacerItem(20, 20))
  119. h2_wlayout.addWidget(QLabel("起始"),0)
  120. h2_wlayout.addWidget(self.h2_date1)
  121. h2_wlayout.addItem(QSpacerItem(50, 20))
  122. h2_wlayout.addWidget(QLabel("结束"), 0)
  123. h2_wlayout.addWidget(self.h2_date2)
  124. h2_wlayout.addItem(QSpacerItem(70, 20))
  125. h2_wlayout.addWidget(self.h2_button)
  126. h2_wlayout.addWidget(self.h2_button2)
  127.  
  128. h2_wlayout.setAlignment(Qt.AlignLeft)
  129.  
  130. # 事件绑定
  131. self.h2_button.clicked.connect(lambda: self._start_func())
  132. self.h2_button2.clicked.connect(lambda: self._stop_func())
  133.  
  134. def _third_left(self, v4_wlayout, v5_wlayout):
  135. # 第三层布局
  136. # 分量布局
  137. v4_group_imf = QGridLayout()
  138. vbox1 = QGroupBox("分量值")
  139. self.radio_1 = QRadioButton("分量1")
  140. self.radio_2 = QRadioButton("分量2")
  141. self.radio_3 = QRadioButton("分量3")
  142. self.radio_4 = QRadioButton("分量4")
  143. self.radio_5 = QRadioButton("分量5")
  144. self.radio_6 = QRadioButton("分量6")
  145. self.radio_7 = QRadioButton("分量7")
  146. self.radio_8 = QRadioButton("分量8")
  147. self.radio_9 = QRadioButton("分量9")
  148. self.radio_1.setChecked(True)
  149. self.radio_val = self.radio_1.text()
  150.  
  151. # 优先级布局
  152. v4_group_prior = QGridLayout()
  153. vbox2 = QGroupBox("优先级")
  154. cb1 = QCheckBox("叶片1")
  155. cb2 = QCheckBox("叶片2")
  156. cb3 = QCheckBox("叶片3")
  157. self.v4_lineEdit = QLineEdit()
  158.  
  159. # 时间布局
  160. v4_group_time = QGridLayout()
  161. vbox3 = QGroupBox("时间选择")
  162. self.v4_combox1 = QComboBox(minimumWidth=100)
  163. self.v4_combox1.addItem("空")
  164.  
  165. # 按键
  166. v4_button = QPushButton("显示图形")
  167.  
  168. # 写入网格格布局
  169. v4_group_imf.addWidget(self.radio_1, 0, 0)
  170. v4_group_imf.addWidget(self.radio_2, 0, 1)
  171. v4_group_imf.addWidget(self.radio_3, 1, 0)
  172. v4_group_imf.addWidget(self.radio_4, 1, 1)
  173. v4_group_imf.addWidget(self.radio_5, 2, 0)
  174. v4_group_imf.addWidget(self.radio_6, 2, 1)
  175. v4_group_imf.addWidget(self.radio_7, 3, 0)
  176. v4_group_imf.addWidget(self.radio_8, 3, 1)
  177. v4_group_imf.addWidget(self.radio_9, 4, 0)
  178.  
  179. v4_group_prior.addWidget(cb1, 1, 0)
  180. v4_group_prior.addWidget(cb2, 2, 0)
  181. v4_group_prior.addWidget(cb3, 3, 0)
  182. v4_group_prior.addWidget(QLabel("选择是:"),4,0)
  183. v4_group_prior.addWidget(self.v4_lineEdit, 5, 0)
  184.  
  185. v4_group_time.addWidget(self.v4_combox1)
  186.  
  187. # 写入左侧布局
  188. vbox1.setLayout(v4_group_imf)
  189. vbox2.setLayout(v4_group_prior)
  190. vbox3.setLayout(v4_group_time)
  191. v4_wlayout.addItem(QSpacerItem(50, 20))
  192. v4_wlayout.addWidget(vbox1)
  193. v4_wlayout.addItem(QSpacerItem(50, 20))
  194. v4_wlayout.addWidget(vbox2)
  195. v4_wlayout.addItem(QSpacerItem(50, 20))
  196. v4_wlayout.addWidget(vbox3)
  197. v4_wlayout.addItem(QSpacerItem(50, 20))
  198. v4_wlayout.addWidget(v4_button)
  199. v4_wlayout.addItem(QSpacerItem(50, 20))
  200.  
  201. # 事件绑定
  202. self.radio_1.toggled.connect(lambda: self._changestyle(self.radio_1))
  203. self.radio_2.toggled.connect(lambda: self._changestyle(self.radio_2))
  204. self.radio_3.toggled.connect(lambda: self._changestyle(self.radio_3))
  205. self.radio_4.toggled.connect(lambda: self._changestyle(self.radio_4))
  206. self.radio_5.toggled.connect(lambda: self._changestyle(self.radio_5))
  207. self.radio_6.toggled.connect(lambda: self._changestyle(self.radio_6))
  208. self.radio_7.toggled.connect(lambda: self._changestyle(self.radio_7))
  209. self.radio_8.toggled.connect(lambda: self._changestyle(self.radio_8))
  210. self.radio_9.toggled.connect(lambda: self._changestyle(self.radio_9))
  211.  
  212. cb1.stateChanged.connect(lambda: self._prior_func(cb1))
  213. cb2.stateChanged.connect(lambda: self._prior_func(cb2))
  214. cb3.stateChanged.connect(lambda: self._prior_func(cb3))
  215.  
  216. v4_button.clicked.connect(lambda: self._show_func(v5_wlayout))
  217.  
  218. def _fouth_right(self, v5_wlayout):
  219. # 加载波形图
  220. self.tmp_plt = plt_init()
  221. v5_wlayout.addWidget(self.tmp_plt)
  222.  
  223. def _my_line(self, var=True):
  224. # var 为True时,为横线,否则为竖线
  225. line = QFrame(self)
  226. line_var = QFrame.HLine
  227. sp_var = Qt.Horizontal
  228. if not var:
  229. line_var = QFrame.VLine
  230. sp_var = Qt.Vertical
  231. line.setFrameShape(line_var)
  232. line.setFrameShadow(QFrame.Sunken)
  233. splitter = QSplitter(sp_var)
  234. splitter.addWidget(line)
  235. return splitter
  236.  
  237. def _wind_chooice(self):
  238. tmp_list = wind_mach_chooice(self.h1_combox1.currentText())
  239. self.h1_combox2.clear()
  240. self.h1_combox2.addItems(tmp_list)
  241.  
  242. def _start_func(self):
  243. a = self.h1_combox1.currentText()
  244. b = self.h1_combox2.currentText()
  245. c = self.h1_combox3.currentText()
  246. d = self.h1_combox4.currentText()
  247. e = self.h2_date1.dateTime().toString("yy-MM-dd")
  248. f = self.h2_date2.dateTime().toString("yy-MM-dd")
  249. # 多线程的引用
  250. self.start_func = RunThread(target=self._start_thread, args=(a, b, c, d, e, f))
  251. # 多线程启动
  252. self.start_func.start()
  253.  
  254. def _stop_func(self):
  255. # 线程停止
  256. self.start_func.stop()
  257. print("运行结束")
  258.  
  259. def _start_thread(self, a, b, c, d, e, f):
  260. print("*****运行打印*****")
  261. print(wind_mach_chooice(a))
  262. print(a,b,c,d)
  263. print(e)
  264. print(f)
  265. print("%s" % (time.strftime('<%H:%M:%S>', time.localtime())))
  266. self.v4_combox1.clear()
  267. self.v4_combox1.addItems(tmp_time_list)
  268. print("*****运行打印*****")
  269.  
  270. def _changestyle(self, btn):
  271. # 单选项的判断函数
  272. if btn.isChecked():
  273. self.radio_val = btn.text()
  274. #print("%s"%(time.strftime('<%H:%M:%S>', time.localtime())))
  275.  
  276. def _prior_func(self, cb):
  277. # 复选框内容添加
  278. if cb.isChecked():
  279. if cb.text()[-1] not in self.Items:
  280. self.Items.append(cb.text()[-1])
  281. shop_cart= ",".join(self.Items)
  282. self.v4_lineEdit.setText(shop_cart)
  283. else:
  284. if cb.text()[-1] in self.Items:
  285. self.Items.remove(cb.text()[-1])
  286. shop_cart = ",".join(self.Items)
  287. self.v4_lineEdit.setText(shop_cart)
  288.  
  289. def _show_func(self, v5_wlayout):
  290. print("*****显示打印*****")
  291. print(self.radio_val)
  292. num = self.v4_lineEdit.text()
  293. print(self.v4_combox1.currentText())
  294. v5_wlayout.removeWidget(self.tmp_plt)
  295. self.tmp_plt = plt_show(num)
  296. v5_wlayout.addWidget(self.tmp_plt)
  297. print("*****显示打印*****")
  298.  
  299.  
  300. if __name__ == '__main__':
  301. cgitb.enable(format="text")
  302. app = QApplication(sys.argv)
  303. win = Qt_Test_Frame()
  304. sys.exit(app.exec_())

处理把列表文件转成字典与绘图


 
  1. # pyqt5_graph.py 文件名
  2. import pyqtgraph as pg
  3. from TmpData import _read_data, wind_mach_chooice
  4.  
  5. colour = ["r", "g", "b"]
  6. yp_list = ["叶片1", "叶片2", "叶片3"]
  7.  
  8. def _data_to_dict():
  9. mydict = {}
  10. for my_vars, i in zip(_read_data(), range(len(_read_data()))):
  11. tmp_dict = {}
  12. for var, j in zip(my_vars, range(len(my_vars))):
  13. tmp_dict[var[0]] =var[1]
  14. mydict[i] = tmp_dict
  15. return mydict
  16.  
  17. def plt_init():
  18. # 绘图初始化
  19. pg.setConfigOption("background", "w")
  20. plt = pg.PlotWidget()
  21. plt.addLegend(size=(150, 80))
  22. plt.showGrid(x=True, y=True, alpha=0.5)
  23. return plt
  24.  
  25. def plt_show(num):
  26. # 传绘制的新图
  27. mydict = _data_to_dict()
  28. pg.setConfigOption("background", "w")
  29. plt = pg.PlotWidget()
  30. plt.addLegend(size=(150, 80))
  31. plt.showGrid(x=True, y=True, alpha=0.5)
  32. for i in num.split(","):
  33. i = int(i)-1
  34. plt.plot(x=list(mydict[i].keys()), y=list(mydict[i].values()), pen=colour[i],
  35. name=yp_list[i])
  36.  
  37. return plt
  38.  
  39. if __name__ == '__main__':
  40. _data_to_dict()
  41. pass

模拟给其它文件传指定数据


 
  1. # TmpData.py 文件名
  2. import os
  3. import numpy as np
  4.  
  5. file_path = os.path.join(os.getcwd(), "风机采集信号数据\\")
  6.  
  7. wind_field = ["风场1", "风场2", "风场3"]
  8. wind_machine = {"风场1":["大别山", "天目山"],
  9. "风场2":["昆仑山", "三清山"],
  10. "风场3":["五指山", "火焰山"]}
  11. wind_blade = ["X-20Hz", "X-1K", "Y-20Hz", "Y-1K"]
  12. signal_type = ["包络", "振动"]
  13.  
  14. tmp_time_list = ["20190501", "20190502", "20190504", "20190508", "20190515"]
  15.  
  16. def wind_mach_chooice(val):
  17. return wind_machine[val]
  18.  
  19. def _read_data():
  20. file_list = os.listdir(file_path)
  21. file_list = [var for var in file_list if var.split(".")[1] == "csv"]
  22. a = []
  23. for var in file_list:
  24. tmp = os.path.join(file_path, var)
  25. rd_file = np.loadtxt(tmp, delimiter=",", usecols=(0, 1))
  26. a.append(rd_file)
  27. return a[0], a[1], a[2]

多线程管理

因为程序运行时间久,主界面就会出现假死的状态,要引用多线程


 
  1. # Mythreading.py 文件名
  2. from PyQt5.QtCore import QThread, pyqtSignal
  3.  
  4. class RunThread(QThread):
  5.  
  6. counter_value = pyqtSignal(int)
  7.  
  8. def __init__(self, target, args, name=""):
  9. QThread.__init__(self)
  10. self.target = target
  11. self.args = args
  12. self.is_running = True
  13.  
  14. def run(self):
  15. #print("starting",self.name, "at:",ctime())
  16. self.res = self.target(*self.args)
  17.  
  18. def stop(self):
  19. # 负责停止线程
  20. self.terminate()
  21.  

关于QT异常直接退出没有报错的情况,查bug比较麻烦


 
  1. import cgitb
  2.  
  3. # 这句放在所有程序开始前,这样就可以正常打印异常了
  4. cgitb.enable(format="text")

这些天本人身体不舒服,但还是把做完的这个分享出来,有些细节没有具体说明,下次身体好点,再单独拿出来分享,累了,晚安!

以上这篇Python3.x+pyqtgraph实现数据可视化教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载