目录
- Echarts官网下载Html示例
- QtDesigner绘制界面
- 展示图表
- 动态修改图表数据
Echarts官网下载Html示例
Echarts官网：https://echarts.apache.org/zh/index.html
以折线图为例：
<!DOCTYPE html>
<html lang="zh-CN",style="height:100%">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container" style="height:100%"></div>
<script type="text/javascript" src="./echarts.min.js"></script>
<script>
var dom=document.getElementById('container');
var myChart=echarts.init(dom,null,{
renderer:'canvas',
useDirtyRect:false
});
var app={};
var option;
option={
title:{
text:'gamma'
},
tooltip:{
trigger:'axis
},
legend:{
data:['1.9','2.5','测试值']
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true,
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
boundaryGap:false,
data:[0,15,31,47,63]
},
yAxis: [{
type:'value',
min:function(value){
return value.min;
},
max:function(value){
return value.max;
},
}],
series:[
{
name:'1.9',
type:'line',
data:[1,2,3,4,5,6,7,8]
},
{
name:'2.2',
type:'line',
data:[2,3,4,5,6,7,8,9]
},
{
name:'测试值',
type:'line',
data:[3,4,5,6,7,8,9,10]
}
],
};
if (option && typeof option === 'object'){
myChart.setOption(option);
}
</script>
</body>
</html>
QtDesigner绘制界面
htmlTest.py
from PyQt5 import QtCore, QtWidgets
from PyQt5.QtCore import QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEngineSettings
class Ui_Dialog(object):
def setupUi(self, Dialog):
Dialog.setObjectName('Dialog')
Dialog.resize(991, 650)
self.horizontalLayout = QtWidgets.QHBoxLayout(Dialog)
self.horizontalLayout.setObjectName("horizontalLayout")
# 设置全局变量
web_settings = QWebEngineSettings.globalSettings()
web_settings.setAttribute(QWebEngineSettings.JavascriptEnabled, True)
web_settings.setAttribute(QWebEngineSettings.PluginsEnabled, True)
web_settings.setAttribute(QWebEngineSettings.JavascriptCanOpenWindows, True)
self.web_view = QWebEngineView()
self.web_view.load(QUrl("file:///绝对路径")) #注意file后面是///
self.horizontalLayout.addWidget(self.web_view)
self.retranslateUi(Dialog)
QtCore.QMetaObject.connectSlotsByName(Dialog)
def retranslateUi(self, Dialog):
_translate = QtCore.QCoreApplication.translate
Dialog.setWindowTitle(_translate('Dialog', 'Dialog'))
展示图表
main.py
import sys
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QDialog
from htmlTest import Ui_Dialog
class WebEngineWin(QDialog, Ui_Dialog):
def __init__(self):
super().__init__()
self.setupUi(self)
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
win = WebEngineWin()
win.show()
sys.exit(app.exec_())
动态修改图表数据
- html添加方法
function setValue(val1,val2) {
option.series[0].data = val1
option.series[1].data = val2
myChart.setOption(option)
}
完整html代码
<!DOCTYPE html>
<html lang="zh-CN",style="height:100%">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="container" style="height:100%"></div>
<script type="text/javascript" src="./echarts.min.js"></script>
<script>
var dom=document.getElementById('container');
var myChart=echarts.init(dom,null,{
renderer:'canvas',
useDirtyRect:false
});
var app={};
var option;
option={
title:{
text:'gamma'
},
tooltip:{
trigger:'axis
},
legend:{
data:['1.9','2.5','测试值']
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
containLabel:true,
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
boundaryGap:false,
data:[0,15,31,47,63]
},
yAxis: [{
type:'value',
min:function(value){
return value.min;
},
max:function(value){
return value.max;
},
}],
series:[
{
name:'1.9',
type:'line',
data:[1,2,3,4,5,6,7,8]
},
{
name:'2.2',
type:'line',
data:[2,3,4,5,6,7,8,9]
},
{
name:'测试值',
type:'line',
data:[3,4,5,6,7,8,9,10]
}
],
};
if (option && typeof option === 'object'){
myChart.setOption(option);
}
function setValue(val1,val2) {
option.series[0].data = val1
option.series[1].data = val2
myChart.setOption(option)
}
</script>
</body>
</html>
- 修改main.py
import sys
from PyQt5 import QtWidgets
from PyQt5.QtWidgets import QDialog
from htmlTest import Ui_Dialog
class WebEngineWin(QDialog, Ui_Dialog):
def __init__(self):
super().__init__()
self.setupUi(self)
self.listener()
def listener(self):
self.web_view.loadFinished.connect(self.set_table_data)
def set_table_data(self):
js = "setValue({},{})".format([], [])
self.web_view.page().runJavaScript(js)
if __name__ == '__main__':
app = QtWidgets.QApplication(sys.argv)
win = WebEngineWin()
win.show()
sys.exit(app.exec_())
