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)函數就好了。

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

    CDuiString jsData = _T("var data = [\
                        { name: '2014-01', value: 20, group: '品牌A' },\
                        { name: '2014-01', value: 40, group: '品牌B' },\
                        { name: '2014-02', value: 30, group: '品牌A' },\
                        { name: '2014-02', value: 10, group: '品牌B' },\
                        { name: '2014-03', value: 200, group: '品牌A' },\
                        { name: '2014-03', value: 60, group: '品牌B' },\
                        { name: '2014-04', value: 50, group: '品牌A' },\
                        { name: '2014-04', value: 45, group: '品牌B' },\
                        { name: '2014-05', value: 110, group: '品牌A' },\
                        { name: '2014-05', value: 80, group: '品牌B' },\
                        { name: '2014-06', value: 90, group: '品牌A' },\
                        { name: '2014-06', value: 60, 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

下載