一 前言
之前寫過一篇QT怎麼調用EChart的文章，在文章中有寫到關於EChart與QT窗口自適應問題。最近由於項目中需要用到這一技術，所以在做項目過程中，有新的體會。
https://blog.csdn.net/octdream/article/details/90482654
二 效果圖
二 功能實現
1 新建一個GUI工程
2 在ui編輯器中，在窗口中新增一個QWidget並設置主窗口的自動佈局。
3 將新增的QWidget提升爲QWebEngineView
4 編寫html文件（重點）
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="clicked_forward_chart" style="height:500px"></div>
<!-- ECharts單文件引入 -->
<script src="build/dist/echarts.js"></script>
<script type="text/javascript">
var clickedForwardChart;
var xx;
var dataClicked;
var dataForward;
function setClickedForwardDatta(scale, clicked, forward) {
xx = scale.split(",");
dataClicked = clicked.split(",");
dataForward = forward.split(",");
}
// 路徑配置
require.config({
paths: {
echarts: 'build/dist'
}
});
require(
[
'echarts',
'echarts/chart/bar'
],
function (ec) {
clickedForwardChart = ec.init(document.getElementById('clicked_forward_chart'), 'macarons');
setClickedForwardDatta("0,1,2,3,4,5", "0", "0");
var option = {
animation: false,
title: {
text: '事件點擊率與轉發率統計'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['點擊率', '轉發率']
},
calculable: true,
xAxis: [
{
type: 'category',
data: xx,
axisLabel: {
interval:0,
rotate:40
}
}
],
yAxis: [
{
type: 'value',
max: 1.5,
min: 0
}
],
series: [
{
name: '點擊率',
type: 'bar',
data: dataClicked,
},
{
name: '轉發率',
type: 'bar',
data: dataForward,
}
]
};
//窗體自適應
//window.onresize = clickedForwardChart.resize;
// 爲echarts對象加載數據
clickedForwardChart.setOption(option);
}
);
function updateClickedForwardData(scale, clicked, forward) {
if (!clickedForwardChart) {
return;
}
setClickedForwardDatta(scale, clicked, forward);
//更新數據
var option = clickedForwardChart.getOption();
option.xAxis[0].data = xx;
option.series[0].data = dataClicked;
option.series[1].data = dataForward;
clickedForwardChart.clear();
clickedForwardChart.setOption(option);
}
</script>
<script>
function resizeWindow() {
window.onresize = function () {
clickedForwardChart.resize();
}
}
resizeWindow();
</script>
</body>
注意：
1）用於加載EChart的<div>標籤需要設置高度樣式，不然顯示不出來，寬度不需要設置
2）底下的JS代碼resizeWindow一定要加，並且一定要調用resizeWindow，這樣纔會自動設置窗口。
4 在cpp文件中，爲提升的QWidget控件，加載html文件
EchartMainWin::EchartMainWin(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::EchartMainWin)
{
ui->setupUi(this);
ui->widget->load(QUrl("E:/workspace/QT_PRJ/echartsTest/htmlEcharts/KDStatisticalChart.html"));
}
5 在CPP文件中，添加加載數據功能
void EchartMainWin::on_pushButton_load_clicked()
{
QString xx = "事件1,事件2,事件3,事件4,事件5,事件6,事件7,事件8,事件9,事件10,事件11,事件12";
QString clicked = "2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 80.6, 70.2, 32.6, 20.0, 6.4, 3.3";
QString forward = "2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 80.6, 70.2, 48.7, 18.8, 6.0, 2.3";
QString strVal = QString("updateClickedForwardData(\"%1\",\"%2\",\"%3\");").arg(xx).arg(clicked).arg(forward);
ui->widget->page()->runJavaScript(strVal);
}
6 如果要在頁面中添加兩個圖表，只需要按上面的依葫蘆畫瓢即可
a)新增一個<div>標籤並設置高度
<div id="other_chart" style="height:400px"></div>
b)新增一個<javascript>標籤，用於加載第二個圖的數據
<script type="text/javascript">
var myChart;
var otherX;
var dataMood;
function setOtherData(scale, mood) {
otherX = scale.split(",");
dataMood = mood.split(",");
}
// 路徑配置
require.config({
paths: {
echarts: 'build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line'
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
myChart = ec.init(document.getElementById('other_chart'), 'macarons');
setOtherData("0,1,2,3,4,5", "0")
var option = {
animation: false,
title: {
text: '情緒與政治傾向折線圖'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['情緒值']
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
//data : ['0','1','2','3','4','5']
data: otherX
}
],
yAxis: [
{
type: 'value',
scale: true,
name: '情緒值',
boundaryGap: [0.2, 0.2]
}
],
series: [
{
name: '情緒值',
type: 'line',
data: dataMood,
symbol: 'none' //取消折點圓圈
//data:[0,1,2,3,4,5],
}
]
};
//窗體自適應
//window.onresize = myChart.resize;
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
function updateOtherData(scale, mood) {
if (!myChart) {
return;
}
setOtherData(scale, mood);
//更新數據
var option = myChart.getOption();
option.xAxis[0].data = otherX;
option.series[0].data = dataMood;
myChart.clear();
myChart.setOption(option);
}
</script>
c）在窗口自適應中新增新圖表的窗口重繪
<script>
function resizeWindow() {
window.onresize = function () {
clickedForwardChart.resize();
myChart.resize();
}
}
resizeWindow();
</script>
d) 在CPP中添加新增圖表數據加載功能
#include <QTimer>
int g_Amplitude = 25;
int g_Cycle = 6;
int g_SinOffset = 135;
int g_AxisIndex = 0;
EchartMainWin::EchartMainWin(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::EchartMainWin)
{
ui->setupUi(this);
ui->widget->load(QUrl("E:/workspace/QT_PRJ/echartsTest/htmlEcharts/KDStatisticalChart.html"));
}
void EchartMainWin::on_pushButton_load_2_clicked()
{
timer = new QTimer(this);
timer->setInterval(1000);
connect(timer, SIGNAL(timeout()), this, SLOT(updateValue()));
timer->start();
}
void EchartMainWin::updateValue()
{
double g_AxisY = g_Amplitude * sin( 3.141592654 / g_Cycle * g_AxisIndex ) + g_SinOffset;
mood.append(QString::number(g_AxisY));
g_AxisIndex++;
x.append(QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss"));
QString strVal = QString("updateOtherData(\"%1\",\"%2\");").arg(x.join(",")).arg(mood.join(","));
ui->widget->page()->runJavaScript(strVal);
}