环境说明
windows10,Qt5.15.2,MSVC2019。安装qt时需要勾选webengine模块。
编译运行时,务必选择release模式,debug模式会卡成gou,CPU占用直接飙升(我的是E5 2630 V3,8核16线程,在后面调整仪表盘数值时直接飙到20%多),releas模式下运行时CPU占用仅1%左右。
简单介绍
ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。官方的教程写的很详细,只要花点时间,基本上会写hello word的程序猿都能看懂,在Qt上使用的话只需要熟悉一点点html和JS语法即可,重在掌握方法。
Echarts资源
1、下载Echarts
直接在github上下载即可,或者链接到gitee下载zip包。
2、测试
下载完成解压之后在echarts/dist文件夹内,新建一个空白的xxx.html文件,并写上一下代码(代码来自Echarts官方示例)
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
保存html,使用浏览器打开该文件,不出意外,你将会看到下面的柱状图表。
到此,Echarts已经初步测试成功。
Qt项目集成Echarts
1、在pro文件内,QT += webenginewidgets。
2、在项目的ui中(如果你是可视化设计ui)拉出一个widget并提升为QWebEngineView。
3、代码
#include <QtWebEngineWidgets>
在构造函数中
ui->widget->setContextMenuPolicy(Qt::NoContextMenu);
ui->widget->load(qApp->applicationDirPath() + "xxx.html");
4、编译,不运行。
特别说明:webenginewidgets模块仅支持MSVC!!!
特别说明:webenginewidgets模块仅支持MSVC!!!
特别说明:webenginewidgets模块仅支持MSVC!!!
5、将echarts/dist文件夹内的echarts.min.js和xxx.html拷贝到Qt项目编译出来的可执行文件同级目录。
6、运行Qt程序,不出意外你将看到和上面一样的图表。
7、到此,成功在Qt项目中集成Echarts。
动态加载Echarts数据
*首先要了解一点,要修改Echarts图表的显示内容,就是修改option的内容,包括数据和各种图表属性。
*这里建议参考我的示例代码,下载地址
1、修改xxx.html的代码,这是一个速度仪表盘,参考官方给出的示例稍作修改,定义了两个JS接口,分别是设置data和改变div大小。
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:600px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
series: [{
type: 'gauge',
progress: {
show: true,
width: 18
},
axisLine: {
lineStyle: {
width: 18
}
},
axisTick: {
show: false
},
splitLine: {
length: 15,
lineStyle: {
width: 2,
color: '#999'
}
},
axisLabel: {
distance: 25,
color: '#999',
fontSize: 20
},
anchor: {
show: true,
showAbove: true,
size: 25,
itemStyle: {
borderWidth: 10
}
},
title: {
show: false
},
detail: {
valueAnimation: true,
fontSize: 80,
offsetCenter: [0, '50%']
},
data: [{
value: 50
}]
}]
});
function setData(newValue)
{
var option = {
series:
[{
data: [{
value: newValue
}]}
]
};
myChart.setOption(option);
}
function resizeDiv(newWidth,newHeight) {
var myDiv = document.getElementById('main');
myDiv.style.width = newWidth + "px";
myDiv.style.height = newHeight + "px";
myChart.resize();
}
</script>
</body>
</html>
保存xxx.html文件,使用浏览器打开该文件,不出意外你将看到仪表盘,初始值为50。
2、在Qt项目的ui内拖入一个滑动杆,转到槽valueChanged(int value),写入以下代码,实现仪表盘的数值调整。因为在xxx.html中,自定义了一个JS接口function setData(newValue),在Qt中使用runJavaScript方法就可以直接调用该接口。
ui->widget->page()->runJavaScript( QString("setData(%1)").arg(value));
编译运行,拉动滑动杆就可以看到仪表盘的数值跟着变了。
3、重写widget的resizeEvent,调用JS接口resizeDiv(newWidth,newHeight),实现html中的div大小随widget大小变化。这里做的比较粗糙,仅仅改变div大小,widget拉的太小就会出现下面的情况,需要实际去调整图表的属性,如字体、指针、圆弧,这些也是在option里面修改。
void EchartDemo::resizeEvent(QResizeEvent *event)
{
int newWidth = event->size().width();
int newHeight = event->size().height();
ui->widget->page()->runJavaScript( QString("resizeDiv(%1,%2)").arg(int(newWidth*0.8)).arg(int(newHeight*0.8)));
}
!@#¥%……&*
虽然跟painter绘制的控件相比,在Qt上使用Echarts,效率还是差了点,也比较耗CPU。但Echarts是拿来就用啊,上手简单,还是挺香的。