前言

  上一篇成功是EChart随着Qt窗口变化而变化，本篇将开始正式介绍柱状图介绍、基础使用，并将其封装一层Qt。
  本篇的demo实现了隐藏js代码的方式，实现了一个条形图的基本交互方式，即Qt调用js脚本操作html。

Demo演示

ECharts调试工具

  ECharts提供的纯JS代码编辑开发调试工具，可编辑js，并且查看运行效果：
  https://echarts.apache.org/examples/zh/editor.html
  

  开发过程中对于属性的查询和调试ECharts也提供了配置帮助。
  官方配置手册：https://echarts.apache.org/zh/option.html
  

目标

  随便找一个预期目标：
  

ECharts接口静态方式

  使用EChart调试工具开发，先调试出基础框架。
  这里贴出的全部代码:

ECharts接口动态方式

  动态方式，最初目的是为了动态实现数据的js操作，在开发过程中发现动态方式还能隐藏echarts代码，使echarts代码不被抓取，最后决定全部改为动态加载方式。

步骤一：修改html

步骤二：初始化

  新增了loadFinished信号槽关联。

步骤三：加载完成页面后进行初始化

步骤四：动态执行js操作

重置

刷新

清空

随机生成（使用js代码）

  后续用会将数据进行Qt的一份缓存数据，由Qt的数据去生成ecahrts的js脚本。

Demo

html文件

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

BarEChartWidget.cpp

入坑

入坑一：调用js函数失败

问题

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

原理

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

解决

  发现是调用成功了，原来只定义也会报这个错误。
   

  由此可以看出，在qt中去初始化需要等待页面加载完成才行。

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

问题

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

解决

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

工程模板v1.2.0

后话

  条形图将会根据实际需求持续升级版本，下一篇会继续折线图的基础封装。