Qt+ECharts 饼状图

阿酷亚莫塔塔(张学鹏)

已于 2022-09-24 21:52:22 修改

阅读量443

点赞数 1

分类专栏： ECharts Qt 文章标签： echarts 前端 javascript

于 2022-09-23 23:09:41 首次发布

本文链接：https://blog.csdn.net/qq_31793023/article/details/127019455

版权

Qt 同时被 2 个专栏收录

26 篇文章 7 订阅

订阅专栏

ECharts

4 篇文章 0 订阅

订阅专栏

1.头文件控件布局与前的博客类似

2.数据交互

connect(mBtn, &QPushButton::clicked, this, [=] {
		
		QJsonArray y1;
		y1 << 6.0 << 5.9 << 4.0 << 10.2 << 20.6 ;

		QString optionStr = QJsonDocument(y1).toJson();
		qDebug() << optionStr;
		QString js = QString("setData(%1)").arg(optionStr);
		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 = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 1048, name: '娇Der' },
        { value: 735, name: '邢色' },
        { value: 580, name: '汉堡' },
        { value: 484, name: '阿哲' },
        { value: 300, name: '媛Der' }
      ]
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }
window.addEventListener('resize', myChart.resize);
function setData(newValue)
{
    var option = {
        series:
        [{
			data: [
        { value: newValue[0], name: '娇Der' },
        { value: newValue[1], name: '邢色' },
        { value: newValue[2], name: '汉堡' },
        { value: newValue[3], name: '阿哲' },
        { value: newValue[4], name: '媛Der' }
      ]
		}]
    };
    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.结果