zoukankan      html  css  js  c++  java
  • 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

    下载

  • 相关阅读:
    Python超级篇-机器学习
    python高给篇-爬虫
    机器学习之-sklearn
    luogu3384 【模板】树链剖分
    bzoj3884 上帝与集合的正确用法
    luogu2765 魔术球问题
    poj2976 Dropping tests 01分数规划
    luogu2764 最小路径覆盖问题
    luogu2763 试题库问题
    luogu2762 太空飞行计划问题
  • 原文地址:https://www.cnblogs.com/fyluyg/p/6150545.html
Copyright © 2011-2022 走看看