在上述架构下，C++桌面端程序通过构造web网页和组织数据，实现借助ECharts展示数据的目的。首先，请大家看一下最终效果，如下图所示。在图示中，左边的两个表格，是我在应用程序中为组织数据提供的用户界面，右边部分是展示的“关联关系”图示。诚然，在这个架构下，如何显示图像，以及如何分析数据之间的关联关系，完全不用开发者费心。

在这个过程中，需要向大家讲明白四个技术点。我们一一道来。

三、几个主要的技术要点

#include <webview2.h>

using namespace Microsoft::WRL

CoInitialize(NULL);

HWND hWnd = this->m_hWnd;

CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,

Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(

[hWnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT{

env->CreateCoreWebView2Controller(hWnd, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(

[hWnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {

if (controller != nullptr) {

webviewController = controller;

webviewController->get_CoreWebView2(&webview);

}

wil::com_ptr<ICoreWebView2Settings> settings;

webview->get_Settings(&settings);

settings->put_IsScriptEnabled(TRUE);

settings->put_AreDefaultScriptDialogsEnabled(TRUE);

settings->put_IsWebMessageEnabled(TRUE);

RECT bounds;

::GetClientRect(hWnd, &bounds);

webviewController->put_Bounds(bounds);

Microsoft::WRL::ComPtr<ICoreWebView2Settings> settings2;

webview->get_Settings(&settings2);

settings2->put_IsScriptEnabled(TRUE);

CString strHtmlFilePath = _T("");

strHtmlFilePath = GetProgramFolder();

strHtmlFilePath += _T("//flsdmap.html");

int len = MultiByteToWideChar(CP_ACP, 0, strHtmlFilePath, -1, NULL, 0); // 计算所需长度

std::wstring wstr(len, 0);

MultiByteToWideChar(CP_ACP, 0, strHtmlFilePath, -1, &wstr[0], len); // 转换

LPCWSTR lpwstr = wstr.c_str(); // 获取 LPCWSTR

webview->Navigate(lpwstr);

EventRegistrationToken token;

webview->add_NavigationStarting(Callback<ICoreWebView2NavigationStartingEventHandler>(

[](ICoreWebView2* webview, ICoreWebView2NavigationStartingEventArgs* args) -> HRESULT {

wil::unique_cotaskmem_string uri;

args->get_Uri(&uri);

std::wstring source(uri.get());

return S_OK;

}).Get(), &token);

webview->AddScriptToExecuteOnDocumentCreated(L"Object.freeze(Object);", nullptr);

webview->ExecuteScript(L"window.document.URL;", Callback<ICoreWebView2ExecuteScriptCompletedHandler>(

[](HRESULT errorCode, LPCWSTR resultObjectAsJson) -> HRESULT {

LPCWSTR URL = resultObjectAsJson;

//doSomethingWithURL(URL);

return S_OK;

}).Get());

webview->add_WebMessageReceived(Callback<ICoreWebView2WebMessageReceivedEventHandler>(

[](ICoreWebView2* webview, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {

wil::unique_cotaskmem_string message;

args->TryGetWebMessageAsString(&message);

webview->PostWebMessageAsString(message.get());

return S_OK;

}).Get(), &token);

return S_OK;

}).Get());

return S_OK;

}).Get());

4、如何动态选择图表类型？

事实上，在ECharts实例网站下载的html文件中，设置有相应的图表类型标识，可以在应用程序中访问该本地文件实现标识符替换，然后刷新就可以显示新的图表类型了。如下图所示，将force替换为circular，就可以变更关联关系图的样式，如下所示。

四、有点感慨