在代码中使用js初始化echarts：
BarECartWidget.h

#ifndef BARECHARTWIDGET_H#define BARECHARTWIDGET_H#include #include #include #include namespace Ui {class BarEChartWidget;}class BarEChartWidget : public QWidget{
    Q_OBJECTpublic:
    explicit BarEChartWidget(QWidget *parent = 0);
    ~BarEChartWidget();protected:
    void initControl();protected slots:
    void slot_loadFinished(bool result);protected:
    void initJs();protected:
    void runJsScript(QString str);protected:
    void resizeEvent(QResizeEvent *event);private slots:
    void on_pushButton_clear_clicked();
    void on_pushButton_flush_clicked();
    void on_pushButton_createRandom_clicked();
    void on_pushButton_reset_clicked();private:
    Ui::BarEChartWidget *ui;private:
    QWebEngineView *_pWebEngineView;            // 浏览器窗口
    QWebEnginePage *_pWebEnginePage;            // 浏览器页面
    QWebChannel *_pWebChannel;                  // 浏览器js交互
    QString _htmlDir;                           // html文件夹路径
    QString _indexFileName;                     // html文件
    QString _initJsStr;                         // 第一次初始化的表格};#endif // BARECHARTWIDGET_H

BarEChartWidget.cpp

#include "BarEChartWidget.h"#include "ui_BarEChartWidget.h"#include #include #include // QtCreator在msvc下设置编码也或有一些乱码，直接一刀切,避免繁琐的设置//#define MSVC#ifdef MSVC#define QSTRING(s)  QString::fromLocal8Bit(s)#else#define QSTRING(s)  QString(s)#endif#include #include //#define LOG qDebug()<<__FILE__<<__LINE__//#define LOG qDebug()<<__FILE__<<__LINE__<<__FUNCTION__//#define LOG qDebug()<<__FILE__<<__LINE__<setupUi(this);
    QString version = "v1.0.0";
    setWindowTitle(QString("基于Qt的ECharts条状图Demo %1(长沙红胖子 QQ:21497936 WX:15173255813 blog:hpzwl.blog.csdn.net").arg(version));
    // 设置无边框，以及背景透明
    // 背景透明，在界面构架时，若为本窗口为其他窗口提升为本窗口时，
    // 则再qss会在主窗口第一级添加frame_all，防止其他窗口提升本窗口而冲掉qss设置//    setWindowFlag(Qt::FramelessWindowHint);//    setAttribute(Qt::WA_TranslucentBackground, true);#if 0
    // 这是方法一：让滚动条不出来(通过大小)，还有一个方法是在html设置body的overflow: hidden//    resize(600 + 20, 400 + 20);#endif
    initControl();}BarEChartWidget::~BarEChartWidget(){
    delete ui;}void BarEChartWidget::initControl(){
    _pWebEngineView = new QWebEngineView(this);
    _pWebEnginePage = new QWebEnginePage(this);
    _pWebChannel = new QWebChannel(this);
    QString filePath;#if 1
    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
    connect(_pWebEnginePage, SIGNAL(loadFinished(bool)), this, SLOT(slot_loadFinished(bool)));
    _pWebEnginePage->load(QUrl(filePath));
    _pWebEnginePage->setWebChannel(_pWebChannel);
    _pWebEngineView->setPage(_pWebEnginePage);
    // 背景透明//    _pWebEngineView->setStyleSheet("background-color: transparent");
    _pWebEnginePage->setBackgroundColor(Qt::transparent);}void BarEChartWidget::slot_loadFinished(bool result){
    if(result)
    {
        initJs();
    }}void BarEChartWidget::initJs(){
    _initJsStr = QSTRING(
            "var option;"
            "option = {"
            "    tooltip: {"
            "        trigger: 'axis'"
            "    },"
            "    grid: {"
            "        left: '10',"
            "        right: '10',"
            "        top: '10',"
            "        bottom: 30,"
            "        containLabel: true"
            "    },"
            "    legend: {"
            "        orient: 'horizontal',"
            "        x: 'center',"
            "        y: 'bottom',"
            "        itemGap: 20"
            "    },"
            "    xAxis: {"
            "        type: 'value'"
            "    },"
            "    yAxis: {"
            "        type: 'category',"
            "        data: ['项目1', '项目2', '项目3']"
            "    },"
            "    series: ["
            "        {"
            "            name: '变量1',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [11, 12, 13]"
            "        },"
            "        {"
            "            name: '变量2',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [24, 20, 21]"
            "        },"
            "        {"
            "            name: '变量3',"
            "            type: 'bar',"
            "            stack: 'totla',"
            "            label: {"
            "                show: true"
            "            },"
            "            data: [95, 87, 55]"
            "        }"
            "    ]"
            "};"
            "myChart.setOption(option);");
    runJsScript(_initJsStr);}void BarEChartWidget::runJsScript(QString str){
    if(_pWebEnginePage)
    {
        _pWebEnginePage->runJavaScript(str);
    }}void BarEChartWidget::resizeEvent(QResizeEvent *event){
    if(_pWebEngineView)
    {
        _pWebEngineView->setGeometry(ui->label_echarts->geometry());
    }}void BarEChartWidget::on_pushButton_clear_clicked(){
    QString jsStr =
            "option.series[0].data = [];"
            "option.series[1].data = [];"
            "option.series[2].data = [];"
            "myChart.setOption(option, true);";
    runJsScript(jsStr);}void BarEChartWidget::on_pushButton_flush_clicked(){
    QString jsStr =
            "var empty = {};"
            "myChart.setOption(empty, true);"
            "myChart.setOption(option, true);";
    runJsScript(jsStr);}void BarEChartWidget::on_pushButton_createRandom_clicked(){
    QString jsStr =
    "var min = 0;"
    "var max = 100;"
    "for(var i = 0; i < option.series.length; i++)"
    "{"
    "    for(var j = 0; j < option.yAxis.data.length; j++)"
    "    {"
    "        option.series[i].data[j] = Math.floor(Math.random() * (max - min)) + min;"
    "    }"
    "}"
    "myChart.setOption(option, true);";
    runJsScript(jsStr);}void BarEChartWidget::on_pushButton_reset_clicked(){
    initJs();}

入坑

入坑一：调用js函数失败

问题

  通过qt代码跑js调用函数失败。
  

原理

  先要等页面加载完成后才能调用定义的函数。

解决

  发现是调用成功了，原来只定义也会报这个错误。
   
  由此可以看出，在qt中去初始化需要等待页面加载完成才行。

入坑二：Qt的msvc编译器少数中文乱码

问题

  少数中文乱码，加空格等都无法解决。
  

解决

  最终解决了，尝试了QTextCodec等各种都不行，最终：
  
  

工程模板v1.2.0