一、前言
Echart是百度研發團隊開發的一款報表視圖JS插件，功能十分強大，是本人用過的國產作品中最牛逼的，記得四五年前就在qt中使用過，當時用的瀏覽器控件是webkit，由於5.6以后的版本不再支持webkit，而換用webengine內核，很多人在下載使用后不能正常編譯，今天特意抽空做個webengine版本，使得同時支持webkit和webengine。
在webkit中執行JS用的是webView->page()->mainFrame()->evaluateJavaScript(js);
而webengine用的是webView->page()->runJavaScript(js);
在執行效率上，webengine甩webkit好幾條街，在拖動滑塊動態設置值的時候，webengine的CPU占用只有1%，而webkit居然達到了7%，恐怖！怪不得webkit逐漸被qt拋棄了，webengine只是內存使用上增加了些。
二、代碼思路
第一步：准備網頁文件
```c++
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="main" style="height:300px;"></div>
</body>
</html>
第二步：准備JS函數
function setGaugeValue(value){
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
feature: {
restore: {},
saveAsImage: {}
}
},
series: [
{
name: '業務指標',
type: 'gauge',
detail: {formatter:'{value}%'},
data: [{value: value, name: '完成率'}]
}
]
};
第三步：數據交互
void Widget::on_horizontalSlider_valueChanged(int value)
{
QString js = QString("setGaugeValue(%1)").arg(value);
#ifdef webkit
webView->page()->mainFrame()->evaluateJavaScript(js);
#else
webView->page()->runJavaScript(js);
#endif
}
三、效果圖
四、開源主頁
以上作品完整源碼下載都在開源主頁，會持續不斷更新作品數量和質量，歡迎各位關注。