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

下载

转载于:https://www.cnblogs.com/fyluyg/p/6150545.html

Duilib使用wke显示echarts相关推荐

easyUI显示echarts
easyUi加载echarts图表: <%@ page language="java" contentType="text/html; charset=UTF-8& ...
Delphi窗体显示Echarts图表
笨办法,先保存用着 unit Unit1;interfaceusesWinapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, ...
duilib 关于wke 控件焦点问题
转载请说明原出处,谢谢~~ 对象 : 使用着 Redrain 的 uilib , 下载地址: <Redrain个人维护并使用的DuiLib和UiLib库源码下载地址> 问题描述: wke ...
vue 引入json地图_vue中引入地图的js文件，显示echarts is not loaded
<script type="text/javascript"> var vue = new Vue({ el:'#app', data:{ function () { ...
duilib 分屏显示bug
在分屏窗口中最大化,点击任务栏切换最大,最小化,出现图1情况. 图1 Demo说明:从WindowImplBase派生出来的窗体,未重写父类方法. 注意:分屏的显示器分辨率大于电脑主显示的分辨率. B ...
给echarts添加筛选时间控件时，控件不显示，并设置数据库无数据时echarts模块显示暂无数据
给echarts模块添加时间控件时,控件无效,经检查发现,控件被画布遮盖了,需要用一个form标签包括时间控件,否则时间控件不生效.另外,如果echarts从后台获取到的数据为空,需要提示暂无信息.这 ...
echarts 显示隐藏后宽度高度变小问题
实况解析见下图,此图中,数据总统计下有两个大的分类: 表格数据(table形式) echarts(数据可视化形式) 我可以点击按钮,切换两个视图(通过控制display)产生的问题是: 如果默认显示 ...
Hadoop+hive+flask+echarts大数据可视化项目之flask结合echarts前后端结合显示hive分析结果
Hadoop+hive+flask+echarts大数据可视化项目(五) ------flask与echarts前后端结合显示hive分析结果------- 关注过Hadoop+hive+flask+ ...
百度echarts使用
百度echarts,将数据以图表方式展示: var startDate; var endDate; $(document).ready(function() {startDate = $(" ...
duilib拖动控制功能的实现（源代码）
转载请注明原始出处.谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41144283 duilib库中原本没有显示的对控件添加拖拽的功能.而实 ...

Duilib使用wke显示echarts

Duilib使用wke显示echarts相关推荐

最新文章

热门文章