??Qt echarts 教程（1）：qt echarts的基本使用方法
??Qt echarts 教程（2）：qt echarts 数据动态绑定
??Qt echarts 教程（3）：qml echarts 的使用方法
??在使用Qt进行项目开发时，有时会遇到数据采集的需求，需要将数据用动态曲线展示，或者饼状图，树状图等，对于这种动态曲线，可以用成熟的组件，例如QCharts, QCustomPlot, QWT等等，也可以自己绘制，这些都是C++的解决方案，在前端领域，则有更优秀的Echarts来实现动态曲线，本篇博客介绍在Qt项目中如何使用ECharts进行数据展示。
ECharts简介
??ECharts是百度的项目，之前的官网是http://echarts.baidu.com
??几个月前还能打开，现在百度把它交给阿帕奇了，新的官网： ??https://echarts.apache.org/zh/index.html
??部分示例：
??除了单一的曲线，还提供组合图表，在一些大屏上显示，是不是感觉逼格上升十条街，你以为这是程序员自己做的，其实都是开源组件，套数据就可以，如下下图:
??这些图表本质是html页面，C++有web交互的方法，如果你的客户端不是用Qt开发的，那么你得用libcef, 如果是用Qt，则可以使用Qt web技术来解决，主要是QWebEngineView，QWebEnginePage，QWebChannel；显示Qt显示html页面很简单，一行代码就可以搞定。
ECharts的下载
??可以去github下载，也可以在官网定制下载：
Qt显示echarts demo
??我们可以从echarts的官网找个例子，例如下面的曲线图:
??html代码如下：
<!--
THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=area-stack-gradient
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
option = {
color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
title: {
text: '渐变堆叠面积图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Line 1',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(128, 255, 165)'
}, {
offset: 1,
color: 'rgba(1, 191, 236)'
}])
},
emphasis: {
focus: 'series'
},
data: [140, 232, 101, 264, 90, 340, 250]
},
{
name: 'Line 2',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(0, 221, 255)'
}, {
offset: 1,
color: 'rgba(77, 119, 255)'
}])
},
emphasis: {
focus: 'series'
},
data: [120, 282, 111, 234, 220, 340, 310]
},
{
name: 'Line 3',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(55, 162, 255)'
}, {
offset: 1,
color: 'rgba(116, 21, 219)'
}])
},
emphasis: {
focus: 'series'
},
data: [320, 132, 201, 334, 190, 130, 220]
},
{
name: 'Line 4',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 0, 135)'
}, {
offset: 1,
color: 'rgba(135, 0, 157)'
}])
},
emphasis: {
focus: 'series'
},
data: [220, 402, 231, 134, 190, 230, 120]
},
{
name: 'Line 5',
type: 'line',
stack: '总量',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
label: {
show: true,
position: 'top'
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 191, 0)'
}, {
offset: 1,
color: 'rgba(224, 62, 76)'
}])
},
emphasis: {
focus: 'series'
},
data: [220, 302, 181, 234, 210, 290, 150]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
??从js脚本来看，需要调用echarts.min.js，数据则是在html中设置，那么在Qt中怎么显示呢，其实很简单，往界面上放一个QWidget, 提升为QWebEngineView, Qt设计器好像有QWebEngineView这个控件，我前几天把电脑系统搞坏了，重装之后又没找到QWebEngineView，用控件提升也是可以的，然后在构造中添加一行代码即可显示了，如下：
ui->widget->load(QUrl("D:/Qt_Project/echarts_demo/echarts/area-stack-gradient.html"));
??调用QWebEngineView的load方法就可以把html网页显示出来了，如下所示：
??如果你的项目不是互联网项目，是单机项目，那么前面的js src路径得改为本地了：
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
??把下载的echarts.min.js和html放一块二就可以了，修改如下：
<script type="text/javascript" src="./echarts.min.js"></script>
??还可以设置图表的颜色，如下所示：
??只需要添加一个属性即可：
backgroundColor:'#100C2A',
??以上就是Qt使用echarts的方法，本篇博客先介绍到这儿，为了在项目中使用，得用实际数据，那么该如何实现呢，我们需要把C++获取的数据，传到html/js中，本篇介绍到这儿，下篇介绍Qt echarts的数据动态绑定，全部代码在第二篇博客提供。