Qt+ECharts 表盘图

最新推荐文章于 2024-06-28 22:01:43 发布

阿酷亚莫塔塔(张学鹏)

最新推荐文章于 2024-06-28 22:01:43 发布

阅读量504

点赞数

分类专栏： Qt ECharts 文章标签： qt 开发语言

本文链接：https://blog.youkuaiyun.com/qq_31793023/article/details/127017234

版权

Qt 同时被 2 个专栏收录

27 篇文章

订阅专栏

ECharts

4 篇文章

订阅专栏

1.头文件，申明三个控件

QPushButton* mBtn = nullptr;
QWebView* view = nullptr;
QSlider* mSlider = nullptr;

2.控件布局

void RowNumber::initWin()
{
	mBtn = new QPushButton("OK", this);
	QHBoxLayout* h1 = new QHBoxLayout;
	h1->addWidget(mBtn);

	mSlider = new QSlider(Qt::Horizontal);
	mSlider->setRange(0, 100);
	QHBoxLayout* h2 = new QHBoxLayout;
	h2->addWidget(mSlider);
	 view = new QWebView(this);
	view->setContextMenuPolicy(Qt::NoContextMenu);
	view->load(QUrl("file:///C:/Users/99658/Desktop/echart/echarts-master/dist/zxp.html"));
	QHBoxLayout* h = new QHBoxLayout;

	h->addWidget(view);
	QVBoxLayout* v = new QVBoxLayout;
	v->addLayout(h2);
	v->addLayout(h1);
	v->addLayout(h);
	this->centralWidget()->setLayout(v);
}

3.数据交互

	connect(mBtn, &QPushButton::clicked, this, [=] {
		
		view->page()->mainFrame()->evaluateJavaScript("setData(60)");
		
		});
	connect(mSlider, &QSlider::valueChanged, this, [=] {
		int value = mSlider->value();
		QString methodJS = QString("setData(%1)").arg(QString::number(value));
		view->page()->mainFrame()->evaluateJavaScript(methodJS);
		
		});

5.echarts表的HTML内容

<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:600px;"></div>
    <script type="text/javascript">
	var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
    series: [{
        type: 'gauge',
        progress: {
            show: true,
            width: 18
        },
        axisLine: {
            lineStyle: {
                width: 18
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            length: 15,
            lineStyle: {
                width: 2,
                color: '#999'
            }
        },
        axisLabel: {
            distance: 25,
            color: '#999',
            fontSize: 20
        },
        anchor: {
            show: true,
            showAbove: true,
            size: 25,
            itemStyle: {
                borderWidth: 10
            }
        },
        title: {
            show: false
        },
        detail: {
            valueAnimation: true,
            fontSize: 80,
            offsetCenter: [0, '50%']
        },
        data: [{
            value: 50
        }]
    }]
});
function setData(newValue)
{
    var option = {
        series:
        [{
        data: [{
            value: newValue
        }]}
        ]
    };
    myChart.setOption(option);
}
function resizeDiv(newWidth,newHeight) {
    var myDiv = document.getElementById('main');
    myDiv.style.width = newWidth + "px";
    myDiv.style.height = newHeight + "px";
	myChart.resize();
}
    </script>
</body>
</html>

4.结果