正文

Duilib使用wke显示echarts

IP云
IP云V管理员/4 阅读
11/30
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

不得不说wke是个简洁好用的浏览器内核。网上很多大神已经把wke嵌入到duilib中了，先感谢他们辛勤的工作。这里通过wke吧C++的数据在ECharts上美观的显示出来。借鉴前人，将ECharts进行了二次封装，接口在C++中容易使用了。如果觉得那里不够好大家可以修改。水平有限，希望大家多多指正。先上图看看效果:

封装好的接口都在interface.js这个文件里面了，我们来看看interface.js中的接口。

绘制饼图: 

function DrawPie(data, containerId, name, theme) {}

组折线图形: 

function DrawLines(data, containerId, name, is_stack, theme) {}

组柱状图形: 

function DrawBars(data, containerId, name, is_stack, theme) {}

单一形图: 

//type 类型 'line'或者'bar'

function DrawSingleChart(data, containerId, name, order, type, theme) {}

C++中使用这些接口很简单，只要调用CWkeWebkitUI的ExecuteJS(LPCTSTR lpJS)函数就好了。

我们显示个简单的折线图只要这样就好, 

     CDuiString jsData = _T("var data = [\

                         { name: '2014-01', value: , group: '品牌A' },\

                         { name: '2014-01', value: , group: '品牌B' },\

                         { name: '2014-02', value: , group: '品牌A' },\

                         { name: '2014-02', value: , group: '品牌B' },\

                         { name: '2014-03', value: , group: '品牌A' },\

                         { name: '2014-03', value: , group: '品牌B' },\

                         { name: '2014-04', value: , group: '品牌A' },\

                         { name: '2014-04', value: , group: '品牌B' },\

                         { name: '2014-05', value: , group: '品牌A' },\

                         { name: '2014-05', value: , group: '品牌B' },\

                         { name: '2014-06', value: , group: '品牌A' },\

                         { name: '2014-06', value: , group: '品牌B' }];");

     m_pWkeWebkit->ExecuteJS(jsData);

     CDuiString jsStr = _T("DrawSingleChart(data, 'main', {xName:'日期', yName:'销量'}, '', 'line');");

     m_pWkeWebkit->ExecuteJS(jsData);

使用比较简单，代码写很清楚了，大家看代码就好。想了解更多echarts的使用可以网上查查。

转载请注明出处:http://www.cnblogs.com/fyluyg/p/6150545.html

下载

相关阅读

目录[+]