Qt ECHART 大屏中心

大屏中心

Qt ECHART 大屏中心

利用Qt加载html数据，在软件中实现大屏中心的的展示，而不依赖第三方的平平台。
Qt加载mysql的数据，采用json格式将数据传递进入echart中，实现大屏的效果

     QStringList cityList;
    QStringList inputList;
    QVariantList jsData;
    QSqlQuery query;
    QString table = "select city from crm_city_list group by city";
    query.prepare(table);
    query.exec();

    while(query.next())
    {
        cityList.append(query.value(0).toString());
    }

    table = QString("select crm_customer_code.city,crm_customer_code.longitude from crm_order_manager Join crm_customer_code "
                    "on crm_order_manager.customer_code = crm_customer_code.customer_code where "
                    "%1 %2   "
                    "group by crm_order_manager.customer_code").arg(onlyMe).arg(dateRangeCondtion);
    query.prepare(table);
    query.exec();
    QString jsEntry;
    while(query.next())
    {
        if(!query.value(0).toString().isEmpty()&&query.value(1).toInt() > 0
                && cityList.contains(query.value(0).toString())
                && !inputList.contains(query.value(0).toString()))
        {
            inputList.append(query.value(0).toString());
            jsEntry = QString("[{ name: '%1' }, { name: '%2', value: %3 }]").arg("宁波").arg(query.value(0).toString()).arg(QRandomGenerator::global()->bounded(40, 100));
            jsData.append(jsEntry);
        }
    }
    jsEntry = QString("[{ name: '%1' }, { name: '%2', value: %3 }]").arg("宁波").arg("宁波").arg(120);
    jsData.append(jsEntry);
    QJsonDocument jsonDoc = QJsonDocument::fromVariant(jsData);
    QString str2 = jsonDoc.toJson(QJsonDocument::Compact);
    str2.replace(QRegExp("\""), "");
    QString jsCode = QString("updateMapData(%1);").arg(str2);
    ui->widget_html->page()->runJavaScript(jsCode);
    ui->widget_html->setStyleSheet("background-color: black;");
// 以上代码实现了大屏中中心地图轨迹显示json格式为：[[{ name: '宁波' }, { name: '上海', value: 80 }]] 宁波为出发地，上海为目的地，80是目的地的涟漪效果



    table = QString("SELECT MONTH(offer_date), sum(offer_quantity), sum(offer_amount_tax), sum(contract_amount_tax)  "
                    "FROM crm_order_manager where "
                    "%1 and ( (YEAR(offer_date) = YEAR(CURDATE()) AND MONTH(offer_date) >= MONTH(CURDATE()) - 5) OR (YEAR(offer_date) = YEAR(CURDATE()) - 1 AND MONTH(offer_date) >= 12 - (5 - MONTH(CURDATE()))))   "
                    "group by MONTH(offer_date) ").arg(onlyMe);
    query.prepare(table);
    query.exec();


    //qDebug()<<table;
    QString monthName;
    double contractAmount,offerAmount;
    QHash <int,QString> MonthList;
    MonthList.insert(1,tr("January"));
    MonthList.insert(2,tr("February"));
    MonthList.insert(3,tr("March"));
    MonthList.insert(4,tr("April"));
    MonthList.insert(5,tr("May"));
    MonthList.insert(6,tr("June"));
    MonthList.insert(7,tr("July"));
    MonthList.insert(8,tr("August"));
    MonthList.insert(9,tr("September"));
    MonthList.insert(10,tr("October"));
    MonthList.insert(11,tr("November"));
    MonthList.insert(12,tr("December"));
    QJsonObject seriesData;
    QJsonArray monthArr;
    QJsonArray data_1Arr ;
    QJsonArray data_2Arr ;
    int k = 0;
    while (query.next())
    {
        monthName = MonthList.value(query.value(0).toInt());
        offerAmount = query.value(2).toDouble() / 10000.0;
        contractAmount = query.value(3).toDouble() / 10000.0;
        monthArr.insert(k,monthName);
        data_1Arr.insert(k,QString::number(offerAmount,'f',1));
        data_2Arr.insert(k,QString::number(contractAmount,'f',1));
        k++;
    }
    seriesData.insert("month", monthArr);
    seriesData.insert("data_1", data_1Arr);
    seriesData.insert("data_2", data_2Arr);

    QString optionStr = QJsonDocument(seriesData).toJson();
    QString js = QString("init_barMonth(%1)").arg(optionStr);
    ui->widget_html->page()->runJavaScript(js);

    
    // 以上段落实现大图右上角每月销售额和报价的数据，标准json格式为
    {
    "month":["一月"，"二月"，"三月"，...]
    "data_1": [800,900,1200,....]
    "data_2": [500,600,1400,....]
    }


    table = QString("SELECT DATE_FORMAT(offer_date,'%m-%d') AS sales_day, SUM(offer_quantity) AS total_sales "
                    "FROM crm_order_manager "
                    "WHERE %1 and offer_date >= CURDATE() - INTERVAL 1 MONTH "
                    "GROUP BY DATE_FORMAT(offer_date,'%m-%d') "
                    "ORDER BY DATE_FORMAT(offer_date,'%m-%d') ").arg(onlyMe);
    query.prepare(table);
    query.exec();
    QJsonObject lineData;
    QJsonArray dayArr;
    QJsonArray dataArr ;
    k = 0;
    while (query.next())
    {
        QString dayName = query.value(0).toString();
        QString offerQuantity = query.value(1).toString();
        dayArr.insert(k,dayName);
        dataArr.insert(k,offerQuantity);
        k++;
    }
    lineData.insert("day", dayArr);
    lineData.insert("data", dataArr);

    optionStr = QJsonDocument(lineData).toJson();
    js = QString("init_line(%1)").arg(optionStr);
    ui->widget_html->page()->runJavaScript(js);
// 以上代码实现大图中中间最下方每天处理订单的数量，标准格式
{
"day": ["10-12","10-13","10-14",....]
"data": [50,60,90,....]
}


    js = QString("init_offerRatio(['%1%'])").arg(QString::number(offer_effective,'f',1));
    qDebug()<<js;
    ui->widget_html->page()->runJavaScript(js);


    QString jsdata = QString("[{name: '%1', value: %2},{name: '%3', value: %4},{name: '%5', value: %6}]")
            .arg("报价").arg(QString::number(offer_Value/10000,'f',1))
            .arg("合同").arg(QString::number(contract_Value/10000,'f',1))
            .arg("开票").arg(QString::number(invoice_Value/10000,'f',1));

    js = QString("init_circle(%1)").arg(jsdata);
    ui->widget_html->page()->runJavaScript(js);
 以上代码实现大图中中间最左下方两个饼图的数据展示
{

}

    // top 50 company
    QJsonArray companyArr;
    table = QString("SELECT company_name, sum(contract_amount_tax) "
                    "FROM crm_order_manager where "
                    "%1 %2   "
                    "group by customer_code order by sum(contract_amount_tax) desc LIMIT 50").arg(onlyMe).arg(dateRangeCondtion);
    query.prepare(table);
    query.exec();
    int ranking = 0;
    while(query.next())
    {
        QString str = QString("{ranking: %1, company: '%2' }")
                .arg(ranking+1).arg(query.value(0).toString());
        companyArr.insert(ranking,str);
        ranking++;
    }

    optionStr = QJsonDocument(companyArr).toJson();
    js = QString("initLiMarquee(%1)").arg(optionStr);
    js.replace(QRegExp("\""), "");
     js.replace(QRegExp("\n"), "");
    ui->widget_html->page()->runJavaScript(js);
    // 以上代码实现左上方服务公司名单的滚动展示

 qDebug()<<js;

    QJsonObject projectData;
    QJsonArray nameArr;
    QJsonArray dataProArr;
    table = QString("SELECT sale_region, COUNT(mana_code) AS mana_code_count "
                    "FROM crm_project_manage "
                    "WHERE 1=1 "
                    "GROUP BY sale_region");
    query.prepare(table);
    query.exec();
    while(query.next())
    {
        QString str = QString("{value: %2, name: '%1' }")
                .arg(query.value(0).toString()).arg(query.value(1).toString());
        dataProArr.insert(0,str);
        QString str2 = QString("'%1'")
                .arg(query.value(0).toString());
        nameArr.insert(0,str2);
    }
   projectData.insert("name",nameArr);
   projectData.insert("data",dataProArr);
   optionStr = QJsonDocument(projectData).toJson();

    js = QString("init_project(%1)").arg(optionStr);
    js.replace(QRegExp("\""), "");
    ui->widget_html->page()->runJavaScript(js);
      // 以上代码实现右下方玫瑰图的展示

图片展示

优点

对于采用QT开发来说，可以直接继承到软件里

缺点

本人不懂j相关的语言，采用了较多的网上整合的资源，采用最简单的方式展现，没有太多的技术性技巧