## 一、前言
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++ ECharts
{b} : {c}%" }, toolbox: { feature: { restore: {}, saveAsImage: {} } }, series: [ { name: '业务指标', type: 'gauge', detail: {formatter:'{value}%'}, data: [{value: value, name: '完成率'}] } ] };```第三步:数据交互```c++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}
## 三、效果图
![ddfc6958abfe9628635e3de5274319d8.gif](https://i-blog.csdnimg.cn/blog_migrate/0cf3dda803f4c5443fd5d24a81779e47.gif)
## 四、开源主页
1. 国内站点:[https://gitee.com/feiyangqingyun/QWidgetDemo](https://gitee.com/feiyangqingyun/QWidgetDemo)
2. 国际站点:[https://github.com/feiyangqingyun/QWidgetDemo](https://github.com/feiyangqingyun/QWidgetDemo)