Qt+ECharts 双轴柱状图

最新推荐文章于 2024-03-06 17:30:08 发布

原创最新推荐文章于 2024-03-06 17:30:08 发布 · 547 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#qt #开发语言

Qt 同时被 2 个专栏收录

27 篇文章

订阅专栏

ECharts

4 篇文章

订阅专栏

本文展示了如何在Qt应用中集成ECharts，通过QPushButton触发数据更新，使用QSlider控制数据范围，并实时调整ECharts图表。同时，利用resizeEvent实现窗口大小变化时ECharts图表的自适应。

1.头文件

private:
    void resizeEvent(QResizeEvent* event);
private:
    Ui::RowNumberClass ui;
    QPushButton* mBtn = nullptr;
    QWebView* view = nullptr;
    QSlider* mSlider = nullptr;

2.控件布局

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/zxp2.html"));
	//view->load(QUrl("file:///C:/Users/99658/Desktop/echart/bar1.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, [=] {
		
		QJsonObject seriesData;
		QJsonArray y1, y2;
		y1 << 6.0 << 5.9 << 4.0 << 10.2 << 20.6 << 40.7 << 150.6 << 150.2 << 70.6 << 30.0 << 7.4 << 8.3;
		y2 << 9.0 << 15.9 << 8.0 << 13.2 << 25.6 << 50.7 << 100.6 << 120.2 << 40.6 << 20.0 << 2.4 << 1.3;
		int value = mSlider->value();
		qDebug() << y1.size() << "  " << y2.size();
		QString methodJS = QString("setData(%1)").arg(QString::number(value));
		view->page()->mainFrame()->evaluateJavaScript(methodJS);
		seriesData.insert("y1", y1);
		seriesData.insert("y2", y2);
		QString optionStr = QJsonDocument(seriesData).toJson();
		qDebug() << optionStr;
		QString js = QString("setData(%1)").arg(optionStr);
		view->page()->mainFrame()->evaluateJavaScript(js);
		
		});

void RowNumber::resizeEvent(QResizeEvent* event)
{
	int w = view->size().width();
	int h = view->size().height();
	QString js = QString("resizeDiv(%1,%2)").arg(QString::number(w), QString::number(h));
	view->page()->mainFrame()->evaluateJavaScript(js);
}

4.echarts表的HTML内容

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

       var option;

    option = {
  title: {
    text: 'Rainfall vs Evaporation',
    subtext: 'Fake Data'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Rainfall', 'Evaporation']
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  calculable: true,
  xAxis: [
    {
      type: 'category',
      // prettier-ignore
      data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Evaporation',
      type: 'bar',
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ],
      markPoint: {
        data: [
          { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
          { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
window.addEventListener('resize', myChart.resize);
function setData(newValue)
{
    var option = {
        series:
        [{
      name: 'Rainfall',
      type: 'bar',
      data: newValue["y1"],
      
      
    },
    {
      name: 'Evaporation',
      type: 'bar',
      data: newValue["y2"],
      

    }]
    };
    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>

5.结果