Duilib使用wke顯示echarts

　　不得不說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)函數就行了。

咱們顯示個簡單的折線圖只要這樣就好,

 1     CDuiString jsData = _T("var data = [\
 2                         { name: '2014-01', value: 20, group: '品牌A' },\
 3                         { name: '2014-01', value: 40, group: '品牌B' },\
 4                         { name: '2014-02', value: 30, group: '品牌A' },\
 5                         { name: '2014-02', value: 10, group: '品牌B' },\
 6                         { name: '2014-03', value: 200, group: '品牌A' },\
 7                         { name: '2014-03', value: 60, group: '品牌B' },\
 8                         { name: '2014-04', value: 50, group: '品牌A' },\
 9                         { name: '2014-04', value: 45, group: '品牌B' },\
10                         { name: '2014-05', value: 110, group: '品牌A' },\
11                         { name: '2014-05', value: 80, group: '品牌B' },\
12                         { name: '2014-06', value: 90, group: '品牌A' },\
13                         { name: '2014-06', value: 60, group: '品牌B' }];");
14 
15     m_pWkeWebkit->ExecuteJS(jsData);
16 
17     CDuiString jsStr = _T("DrawSingleChart(data, 'main', {xName:'日期', yName:'銷量'}, '', 'line');");
18 
19     m_pWkeWebkit->ExecuteJS(jsData);

使用比較簡單，代碼寫很清楚了，你們看代碼就好。想了解更多echarts的使用能夠網上查查。

轉載請註明出處:http://www.cnblogs.com/fyluyg/p/6150545.html

下載