前言

??上一篇成功是EChart隨著Qt窗口變化而變化，本篇將開(kāi)始正式介紹柱狀圖介紹、基礎(chǔ)使用，并將其封裝一層Qt。
??本篇的demo實(shí)現(xiàn)了隱藏js代碼的方式，實(shí)現(xiàn)了一個(gè)條形圖的基本交互方式，即Qt調(diào)用js腳本操作html。

Demo演示

??

ECharts調(diào)試工具

??ECharts提供的純JS代碼編輯開(kāi)發(fā)調(diào)試工具，可編輯js，并且查看運(yùn)行效果：
??https://echarts.apache.org/examples/zh/editor.html
??

??開(kāi)發(fā)過(guò)程中對(duì)于屬性的查詢和調(diào)試ECharts也提供了配置幫助。
??官方配置手冊(cè)：https://echarts.apache.org/zh/option.html
??

目標(biāo)

??隨便找一個(gè)預(yù)期目標(biāo)：
??

ECharts接口靜態(tài)方式

??使用EChart調(diào)試工具開(kāi)發(fā)，先調(diào)試出基礎(chǔ)框架。
??這里貼出的全部代碼:

ECharts接口動(dòng)態(tài)方式

??動(dòng)態(tài)方式，最初目的是為了動(dòng)態(tài)實(shí)現(xiàn)數(shù)據(jù)的js操作，在開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)動(dòng)態(tài)方式還能隱藏echarts代碼，使echarts代碼不被抓取，最后決定全部改為動(dòng)態(tài)加載方式。

步驟一：修改html

步驟二：初始化

??新增了loadFinished信號(hào)槽關(guān)聯(lián)。

步驟三：加載完成頁(yè)面后進(jìn)行初始化

步驟四：動(dòng)態(tài)執(zhí)行js操作

重置

刷新

清空

隨機(jī)生成（使用js代碼）

??后續(xù)用會(huì)將數(shù)據(jù)進(jìn)行Qt的一份緩存數(shù)據(jù)，由Qt的數(shù)據(jù)去生成ecahrts的js腳本。

Demo

html文件

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

BarEChartWidget.cpp

入坑

入坑一：調(diào)用js函數(shù)失敗

問(wèn)題

??通過(guò)qt代碼跑js調(diào)用函數(shù)失敗。
??

??

原理

??先要等頁(yè)面加載完成后才能調(diào)用定義的函數(shù)。

解決

??發(fā)現(xiàn)是調(diào)用成功了，原來(lái)只定義也會(huì)報(bào)這個(gè)錯(cuò)誤。
?? 

??由此可以看出，在qt中去初始化需要等待頁(yè)面加載完成才行。

入坑二：Qt的msvc編譯器少數(shù)中文亂碼

問(wèn)題

??少數(shù)中文亂碼，加空格等都無(wú)法解決。
??

解決

??最終解決了，嘗試了QTextCodec等各種都不行，最終：
??

??

工程模板v1.2.0

??

后話

??條形圖將會(huì)根據(jù)實(shí)際需求持續(xù)升級(jí)版本，下一篇會(huì)繼續(xù)折線圖的基礎(chǔ)封裝。