在 Soui 中嵌入 MiniBlink 初体验(二):解决本地 Html 文件显示 ECharts 失败的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u012814856/article/details/79672840

一、引言

在上一篇博客里,我为了实现在桌面程序中显示饼图的需求,选择了在 Soui 中嵌入 MiniBlink 来实现一个浏览器控件的方法。我们通过在这个浏览器控件中使用百度的开源可视化库 ECharts 来显示出我们所需要的图表。

上一篇博客里,我们已经完成了 Soui 中嵌入 MiniBlink 浏览器内核来实现一个浏览器控件的目标,并且已经成功的使用其显示了 ECharts 官网上的示例 Demo。

想要了解上篇博客内容的同学,可以点击这里查看:
在 Soui 中嵌入 MiniBlink 初体验(一):支持百度 ECharts 开源可视化库显示

但是,上一篇博客留下来了一个疑难的问题:

那就是,我编写了一个 Demo1.htm 的文件,并在这个文件的同级目录下放置了 ECharts 库所需引入的库文件 echarts.min.js。然而,在我使用 Soui 中嵌入的 MiniBlink 浏览器控件打开本地的这个 Html 文件时,却发现无法显示出 ECharts 渲染出来的图表内容;而同样的文件,我使用浏览器却可以完美打开。

这是使用 Soui 中封装的 MiniBlink 浏览器控件打开的效果:
MiniBlink

这是直接使用 Chrome 打开该文件的显示结果:
Chrome

那么,问题究竟出在了哪里了呢?

首先,让我们来看看,怎么使用 Soui 中的 MiniBlink 浏览器控件来打开本地的一个 Html 文件进行显示。

二、Soui 中使用封装的 MIniBlink 浏览器控件打开本地 Html 文件

我们要想显示一个 ECharts 渲染图表的效果的 Html 文件,必须要先把 ECharts 的库文件 echarts.min.js 下载下来。

这里,我们假设你已经拥有了一个 Soui 中封装了 MiniBlink 浏览器控件的项目(wke 不支持 H5,所以显示不出来 ECharts;Soui 中封装了 Cef 浏览器控件的应该也可以)

1. 下载 ECharts 库文件。这里是地址:ECharts 下载,选择自己需要的类型进行下载即可,这里并没有什么大的影响。

2. 编写一个入门级别简单的 ECharts Demo,这里我选择了 ECharts 官方的入门 Demo

<!DOCTYPE html>
<html>

<head>
    <meta charset="gb2312">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>

<body>
    hello Soui
    <!--为 ECharts 准备一个具备大小(宽高)的 DOM-->
    <div id="main" style="width:600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>

3. 我们把刚才下载的 ECharts 库文件 echarts.min.js 和编写的 Demo1.html 都放到项目文件夹下(这里我新建了一个 echarts 文件夹进行这些文件的放置)其实放到哪里并不重要,只需要你能够找到它就可以了。

4. 编写加载代码:我们需要在 Soui 中的主窗口类 CMainDlg 中的 OnInitDialog 函数中进行我们本地 Html 文件的加载,这里需要注意的是 MiniBlink 封装的浏览器控件的特殊使用方法,必须使用全局函数 wkeLoadFile() 函数进行调用,这个函数一共有两个参数,第一个参数是一个 wkeWebView 对象,另一个则是文件路径,这里我传入了本地的全路径。

BOOL CMainDlg::OnInitDialog(HWND hWnd, LPARAM lParam)
{
    m_bLayoutInited = TRUE;
    // 加载本地文件
    SOUI::SWkeWebkit *pWkeWebkit = FindChildByName2<SOUI::SWkeWebkit>(L"wke_test");
    if (pWkeWebkit != NULL) {
        wkeLoadFile(pWkeWebkit->GetWebView(), "E:\\myproject\\[4] Just for Fun\\ECharts In Soui\\ECharts In Soui with MiniBlink\\echarts\\Demo1.htm");
    }
    return 0;
}

至此,我们完成了使用 Soui 中的 MiniBlink 浏览器控件打开本地 Html 文件的全部所需操作。检查完了这些,我们确认没出现问题。

那么,引言中的问题,就是什么导致的呢?

三、拨云开日:Unicode 还是 UTF-8

于是我抱着这个问题去咨询了下大神,结果被一位大神点拨了一下,一下子就解决了这个问题:

原来是编码的问题啊!

让我们来看看出问题的 Demo1.htm 文件的类型:
1. 右键->打开方式->记事本打开,文件->另存为,查看出问题的 Demo1.htm 文件的编码类型为 Unicode
unicode

2. 我们将其另存为 UTF-8 编码类型
utf-8

3. 重新运行程序,走起
ECharts In Soui with MiniBlink

这效果是很赞的,哈哈:)
至此,完结撒花~~~

四、总结

这是一个非常有用的工具啊!

Soui + MiniBlink + ECharts

以后遇到复杂的图表需求我都不怕不怕啦 ^_^

对 ECharts 还是很感兴趣的,日后也许还会继续钻研~~~

To be Stronger:)

ps: 想要获取本博客的实验代码的同学,可以点击这里进行查看
wangying2016/ECharts-In-Soui

展开阅读全文

没有更多推荐了,返回首页