文章介绍了如何在QML项目中实现数据可视化，左侧部分的三个图分别用QChart和ECharts实现。QChart适用于快速渲染但功能相对有限，而ECharts功能丰富但需借助HTML和JavaScript。文章提供了详细步骤，包括导入模块、编写QML代码以及在WebEngineView中展示ECharts图表。
目录
所有部分的均已经撰写完成。
分为四个部分：
衔接：
第一部分：
(20条消息) qml项目（一）--------数据可视化面板（qml+echarts）_锦亦之2233的博客-优快云博客
第二部分：
(20条消息) qml项目----------数据可视化面板（第二部分）_面板数据可视化_锦亦之2233的博客-优快云博客
第三部分：(20条消息) qml项目---可视化面板（第三部分）--使用echarts以及qchart_echarts qml_锦亦之2233的博客-优快云博客
第四部分：(20条消息) qml项目四----可视化面板----地图部分_锦亦之2233的博客-优快云博客
1、左边部分---三个图怎么实现
这个是左边部分的三个图，最上面的那个柱状图是使用qchart，qt自带的图表类来实现的，下面两个都是通过echart来实现。
目录
由于当时想试一下qchart的，所以就画了一个qchart的图，总体而言，查看帮助文档，qchart的柱状图所能提供的属性以及函数较少，无法做到echart的那么多动作效果，但是qchart渲染极快，不存在需要很长时间才能显示图表。
qt自带的qchart的库，可实现图表的显示，需要以下几个步骤：
1、需要导入对应的chart模块，前提是你要下载好对应模块的chart.dll
QT += charts2、在对应的qml中导入对应的头文件
import QtCharts 2.33、书写对应的代码
ChartView {
id: chartView
title: "年度报表"
titleColor : "white"
anchors.fill: parent
antialiasing: true
legend.alignment: Qt.AlignBottom
backgroundColor :Qt.rgba(0, 0, 255, 0)
BarSeries {
visible : true
axisX: BarCategoryAxis {
categories: ["2007", "2008", "2009", "2010", "2011", "2012"]
}
BarSet {
id:barSet
label: "年份"
color :"yellow"
values: [2, 2, 3, 4, 5, 6]
onClicked:{
barSet.color="blue"
}
}
}
}
最终实现qchart的效果图
1.2 使用echart实现柱状图
1、如何使用echart实现柱状图，echarts是支持javascript的，同时使用html渲染成图，想要实现在qml中显示echarts,就是在qml显示网页html，你首先需要做到的就是在html中正常的显示图表。
如何使用echart可以查看官方图例。
快速上手 - Handbook - Apache ECharts这是echart的官网，可以先根据例子来实现。
这个例子是官网的例子，保证echarts.js与text.html在同一目录下，html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
<!-- 引入刚刚下载的 ECharts 文件 -->
<script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 460px;height:300px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例',
textStyle: {
color: 'blue' // 将标题文字颜色设置为白色
}
},
tooltip: {},
legend: {
data: ['销量'],
textStyle: {
color: 'blue' // 将图例文字颜色设置为白色
}
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
axisLabel: {
color: 'blue' // 将x轴刻度标签文字颜色设置为白色
}
},
yAxis: {
axisLabel: {
color: 'blue' // 将y轴刻度标签文字颜色设置为白色
}
},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20],
label: {
color: 'blue' // 将柱状图标签文字颜色设置为白色
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>大致的意思，html出一个盒子装js的图表，最终html的在浏览器显示效果如下：
note:这是在浏览器中显示的哟，请确保在浏览器中成功显示，最终才能在qml中显示。
2、如何在qml显示网页html
qt提供webengine这个类方便qml中显示网页
QT += webenginepro头文件中，添加webngine模块
main.cpp中添加
在qml对应的文件中添加：
import QtWebEngine 1.5以下是左边三个图的全部代码：
import QtQuick 2.15
import QtCharts 2.3
import QtQuick.Controls 2.15
import QtWebEngine 1.5
Item {
id:d
width:a.width*0.25
height:c.height
Rectangle {
//整体框
width:a.width*0.25
height:c.height
color: Qt.rgba(0, 0, 255, 0)
Column{
//[1]
Image {
id: chart01
width:a.width*0.25
height:c.height/3
source: "qrc:/images/line(1).png"
ChartView {
id: chartView
title: "年度报表"
titleColor : "white"
anchors.fill: parent
antialiasing: true
legend.alignment: Qt.AlignBottom
backgroundColor :Qt.rgba(0, 0, 255, 0)
BarSeries {
visible : true
axisX: BarCategoryAxis {
categories: ["2007", "2008", "2009", "2010", "2011", "2012"]
}
BarSet {
id:barSet
label: "年份"
color :"yellow"
values: [2, 2, 3, 4, 5, 6]
onClicked:{
barSet.color="blue"
}
}
}
}
}
//[2]
Rectangle {
id: chart02
width:a.width*0.25
height:c.height/3
color: Qt.rgba(0, 0, 255, 0)
WebEngineView {
id: sitemonitoryView
width:parent.width
height:parent.height
backgroundColor: "transparent"
anchors.centerIn: parent
settings.javascriptEnabled : true
settings.pluginsEnabled:true
url:"qrc:/html/text.html"
}
}
//[3]
Rectangle {
id: chart03
width:a.width*0.25
height:c.height/3
color: Qt.rgba(0, 0, 255, 0)
WebEngineView {
id: chartview02
width:parent.width
height:parent.height
backgroundColor: "transparent"
anchors.centerIn: parent
settings.javascriptEnabled : true
settings.pluginsEnabled:true
url:"qrc:/html/piechart.html"
}
}
}
}
}此代码为Left001.qml的代码
扫一扫
624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
