Echarts是百度的一款可视化界面开发的平台，里面的地图以及数据可视化内容十分丰富，适合用于一些大屏数据显示项目或者一些ui界面开发。每一个ECharts图表使用一个无边框的QWebView来展示，这样多个不同类型的ECharts图表就是多个封装不同类型ECharts图表的QWebView（html加载入QWebView窗口来实现），每一个模块封装的数据用qt预留接口调用js代码实现修改html的功能，最终达到代码操作qt即可操作图表的功能。

ECharts 官网下载： Apache ECharts

本文作者原创，未经允许禁止转载。

QT Echarts 使用详解（一）ECharts下载\示例\动态缩放目录

1 下载

2 环境

3 调用

3.1 Pro文件

3.2 h源文件

3.3 ui界面

3.4 cpp源文件

4 效果

5 自适应

6 效果图

1 下载

打开官网，点击下载选择全部图标也可以按需下载。选择全部选项然后等待编译完成自动下载。

echarts.min.js.txt

2 环境

将下载好的 echarts.js 存放一个固定目录

新建echarts.html


<!DOCTYPE html>
<html><head><meta charset="gbk" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var 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]}]};xAxis: {type: 'category',data: ['A', 'B', 'C']},yAxis: {type: 'value'},series: [{data: [120, 200, 150],type: 'line'}]// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

3 调用

ECharts 在线文档： Handbook - Apache ECharts

3.1 Pro文件

pro文件中加入引用声明：在文件头部加入

QT += webenginewidgets

3.2 h源文件

#include <QtWebEngineWidgets/QWebEngineView>

3.3 ui界面

加入 GridLayout

3.4 cpp源文件

    QWebEngineView *pEngView = new QWebEngineView(this);ui->gridLayout->addWidget(pEngView);pEngView->setContextMenuPolicy(Qt::NoContextMenu);pEngView->load(QUrl("D:/QEChar/echarts.html"));//这句是调用本地html文件的地址，前面讲过要将testEcharts.html文件和main.echarts.js文件放在同一个文件夹htmlEcharts中。pEngView->show();

4 效果

5 自适应

//HTML代码
<!DOCTYPE html>
<html><head><meta charset="gbk" /><title>ECharts</title><!-- 引入刚刚下载的 ECharts 文件 --><script src="echarts.js"></script></head><body>
<style>#main,html,body{width: 100%;height: 100%;overflow: hidden;}#main {width: 100%;height: 100%;}
</style><!-- 为 ECharts 准备一个定义了宽高的 DOM --><div id="main" "></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 窗口高度变化设置window.onresize = function() {myChart.resize();}// 指定图表的配置项和数据var option = {title: {text: '曲线图示例'},tooltip: {},/*legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]*//*xAxis: {type: 'category',data: ['2020/10/24', '2020/10/25', '2020/10/26', '2020/10/27', '2020/10/28']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 300, 199],type: 'line'}]*/xAxis: {data: ['2020/10/24', '2020/10/25', '2020/10/26', '2020/10/27', '2020/10/28']},yAxis: {},series: [{data: [10, 22, 28, 23, 19],type: 'line',smooth: true}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body>
</html>

6 效果图

QT Echarts 使用详解（一）ECharts下载\示例\动态缩放相关推荐

【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
《TCP/IP详解》中文版下载地址
<TCP/IP详解>中文版下载地址 TCP/IP详解卷1协议http://www.chinaccna.com/Soft/ShowSoft.asp?SoftID=822 TCP/IP详解 ...
QT QtableView操作详解
本文实现了使用QtableView控件来显示数据,数据源使用txt文本作为数据源,使用了QStandardItemModel作为数据模型来实现了对TableView空间的初始化,和对txt数据源的增删 ...
Qt pro 文件详解
Qt pro 文件详解 1. TEMPLATE 变量TEMPLATE描述了为建立目标文件而采用何种模板,即生成何种形式的Makefile文件.Qmake 工具定义了5种模板: a. 应用 ...
Qt 5.12--Item详解
Qt 5.12--Item详解 1 作为容器 2 默认属性 3 透明度 4 堆叠顺序 5 定位子项目和坐标映射参考 QML中的所有可视项目都继承自Item.虽然Item本身没有可视化的外观,但是它定 ...
[QT] QMap使用详解
[QT] QMap使用详解引言 QMap/QMultiMap属于关联式容器,其底层结构是通过二叉树实现,故其查找value的效率很快.QMap中的数据都是成对出现的,第一个称为key(键),第二 ...
qstring如何初始化_学习QT之QString详解
学习QT之QString详解 QString类保存16位Unicode值,提供了丰富的操作.查询和转换函数.该类还进行了使用隐式共享.高效的内存分配策略等多方面的优化. 一.字符串常用操作字符串的操 ...
php中的装饰,详解PHP装饰模式的示例代码
详解PHP装饰模式的示例代码<?php // 装饰模式 function echoLine($msg) { echo $msg, ' '; } class RequestHelper { /** ...
python动态显示进度条_实例详解python如何轻松实现动态进度条
本次的这篇文章主要是和大家分享了关于实例详解python如何轻松实现动态进度条,有需要的小伙伴可以看一下思路及讲解假设有一个1000000数据的列表(为了让进度条可以显示出来,很大的数据),我们每 ...

QT Echarts 使用详解（一）ECharts下载\示例\动态缩放

1 下载

2 环境

3 调用

3.1 Pro文件

3.2 h源文件

3.3 ui界面

3.4 cpp源文件

4 效果

5 自适应

6 效果图

QT Echarts 使用详解（一）ECharts下载\示例\动态缩放相关推荐

最新文章

热门文章