Qt+ECharts开发笔记（一）：ECharts介绍、下载和Qt调用ECharts基础柱状图Demo
前言
使用Qt开发大数据可视化看板，基于Qt使用QWidget或者QML是很难达到ECharts大数据看板的效果，所以使用Qt来制作。
核心思想
每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。
Demo演示
为了实现我们多模块化，窗口的背景透明是很关键的，测试背景透明：
提升窗口背景透明效果：
测试结果可以达到预期。
ECharts
简介
ECharts，缩写来自 Enterprise Charts，商业级数据图表，是百度的一个开源的数据可视化工具，一个纯 Javascript 的图表库，能够在 PC 端和移动设备上流畅运行，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的 Canvas 库 ZRender，ECharts 提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
主要功能
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
下载
官网地址：echarts.apache.org
在线定制：echarts.apache.org/zh/builder.html
一个一个封装，所以仅勾选柱状图
经过等待：
然后会卡住，卡住的原因是因为勾选了“兼容IE8”，所以补勾选久可，请耐心等下，最后会下载一个js，如下图：
那么直接使用全部下下来的吧，3.5MB左右，并不是很大，后续如果细化发布再看使用到了什么去定制什么。
Qt中引入ECharts
步骤一：引入web模块
这个很关键，在Qt5.6以后使用了谷歌浏览器内核，不再支持mingw32版本的，所以要使用msvc版本的Qt。
msvc遇到了错误，参照《关于 Qt编译时使用msvc编译器报错“Error: cannot open …main.obj.10836.32.jom for write” 的解决方法》解决。
QT += webenginewidgets
步骤二：初始化窗口
构造函数中，置0
BarEChartWidget::BarEChartWidget(QWidget *parent) :
QWidget(parent),
ui(new Ui::BarEChartWidget),
_pWebEngineView(0),
_pWebEnginePage(0),
_pWebChannel(0),
_htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html"), // 使用了绝对路径,引到html文件夹
_indexFileName("barEChartWidget.html"){
ui->setupUi(this);
QString version = "v1.0.0";
setWindowTitle(QString("Qt调用EChartsDemo %1(长沙红胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
// 设置无边框，以及背景透明
// 背景透明，在界面构架时，若为本窗口为其他窗口提升为本窗口时，
// 则再qss会在主窗口第一级添加frame_all，防止其他窗口提升本窗口而冲掉qss设置// setWindowFlag(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground, true);
// 让滚动条不出来
resize(600 + 20, 400 + 20);
initControl();}
一个是浏览器窗口初始化，一个是js交互的初始化
void BarEChartWidget::initControl(){
_pWebEngineView = new QWebEngineView(this);
_pWebEnginePage = new QWebEnginePage(this);
_pWebChannel = new QWebChannel(this);
QString filePath;#if 0
filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);#else
filePath = "qrc:/barEChartWidget/html/barEChartWidget.html";#endif
LOG << "file exist:" << QFile::exists(filePath) << filePath;#if 0
// 打印html文件内容
QFile file(_indexFilePath);
file.open(QIODevice::ReadOnly);
LOG << QString(file.readAll());
file.close();#endif
_pWebEnginePage->load(QUrl(filePath));
_pWebEnginePage->setWebChannel(_pWebChannel);
_pWebEngineView->setPage(_pWebEnginePage);
// 背景透明// _pWebEngineView->setStyleSheet("background-color: transparent");// _pWebEnginePage->setBackgroundColor(Qt::transparent);}
步骤三：窗口大小跟随
void BarEChartWidget::resizeEvent(QResizeEvent *event){
if(_pWebEngineView)
{
_pWebEngineView->setGeometry(rect());
}}
模块化
这是柱状图模块。
Demo
BarEChartWidget.h
#ifndef BARECHARTWIDGET_H#define BARECHARTWIDGET_H#include <QWidget>#include <QWebEngineView>#include <QWebEnginePage>#include <QWebChannel>namespace Ui {class BarEChartWidget;}class BarEChartWidget : public QWidget{
Q_OBJECTpublic:
explicit BarEChartWidget(QWidget *parent = 0);
~BarEChartWidget();protected:
void initControl();protected:
void resizeEvent(QResizeEvent *event);private:
Ui::BarEChartWidget *ui;private:
QWebEngineView *_pWebEngineView; // 浏览器窗口
QWebEnginePage *_pWebEnginePage; // 浏览器页面
QWebChannel *_pWebChannel; // 浏览器js交互
QString _htmlDir; // html文件夹路径
QString _indexFileName; // html文件};#endif // BARECHARTWIDGET_H
BarEChartsWidget.cpp
#include "BarEChartWidget.h"#include "ui_BarEChartWidget.h"#include <QFile>#include <QMessageBox>// QtCreator在msvc下设置编码也或有一些乱码，直接一刀切,避免繁琐的设置#define MSVC#ifdef MSVC#define QSTRING(s) QString::fromLocal8Bit(s)#else#define QSTRING(s) QString(s)#endif#include <QDebug>#include <QDateTime>//#define LOG qDebug()<<__FILE__<<__LINE__//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__//#define LOG qDebug()<<__FILE__<<__LINE__<<QThread()::currentThread()//#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd")#define LOG qDebug()<<__FILE__<<__LINE__<<QDateTime::currentDateTime().toString("yyyy-MM-dd hh:mm:ss:zzz")BarEChartWidget::BarEChartWidget(QWidget *parent) :
QWidget(parent),
ui(new Ui::BarEChartWidget),
_pWebEngineView(0),
_pWebEnginePage(0),
_pWebChannel(0),
_htmlDir("D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html"), // 使用了绝对路径,引到html文件夹
_indexFileName("barEChartWidget.html"){
ui->setupUi(this);
QString version = "v1.0.0";
setWindowTitle(QString("Qt调用EChartsDemo %1(长沙红胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
// 设置无边框，以及背景透明
// 背景透明，在界面构架时，若为本窗口为其他窗口提升为本窗口时，
// 则再qss会在主窗口第一级添加frame_all，防止其他窗口提升本窗口而冲掉qss设置// setWindowFlag(Qt::FramelessWindowHint);
setAttribute(Qt::WA_TranslucentBackground, true);
// 让滚动条不出来
resize(600 + 20, 400 + 20);
initControl();}BarEChartWidget::~BarEChartWidget(){
delete ui;}void BarEChartWidget::initControl(){
_pWebEngineView = new QWebEngineView(this);
_pWebEnginePage = new QWebEnginePage(this);
_pWebChannel = new QWebChannel(this);
QString filePath;#if 0
filePath = QString("%1/%2").arg(_htmlDir).arg(_indexFileName);#else
filePath = "qrc:/barEChartWidget/html/barEChartWidget.html";#endif
LOG << "file exist:" << QFile::exists(filePath) << filePath;#if 0
// 打印html文件内容
QFile file(_indexFilePath);
file.open(QIODevice::ReadOnly);
LOG << QString(file.readAll());
file.close();#endif
_pWebEnginePage->load(QUrl(filePath));
_pWebEnginePage->setWebChannel(_pWebChannel);
_pWebEngineView->setPage(_pWebEnginePage);
// 背景透明// _pWebEngineView->setStyleSheet("background-color: transparent");// _pWebEnginePage->setBackgroundColor(Qt::transparent);}void BarEChartWidget::resizeEvent(QResizeEvent *event){
if(_pWebEngineView)
{
_pWebEngineView->setGeometry(rect());
}}
barEChartWidget.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 --><!-- <script src="echarts.js"></script>-->
<script src="./echarts.js"></script><!-- <script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.js"></script>--><!-- <script src="echarts.min.js"></script>--><!-- <script src="./echarts.min.js"></script>--><!-- <script src="./html/echarts.min.js"></script>--><!-- <script src="D:/qtProject/echartsDemo/echartsDemo/modules/barEChartWidget/html/echarts.min.js"></script>-->
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width:600px; height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
const 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>
工程模板v1.0.0
入坑
入坑一：“js: Uncaught TypeError: echarts.init is not a function”错误
问题
各种测试都不行：
解决方法
echarts的版本5.x太高，换成低版本的4.x就解决了
https://github.com/apache/echarts/tree/4.9.0/dist
成功加载：
