Qt图表eCharts
- Qt图表eCharts
- 简述
- 效果图
- 代码
- 结尾
- Qt图表eCharts
简述
最近，因某些需要，做了一个图表，这里用的是第三方的JS库，很强大，ECHARTS，应用起来很方便，功能很多，这里我贴出了，API文档。
效果图
代码
option = {//颜色组 ???color:[‘#00A1FF‘,‘#FF7700‘], ???//提示框 ???tooltip: { ???????trigger: ‘axis‘, ???????//提示内容，这里不懂{bo},{b1}的，可以看API文档，介绍得很详细 ???????formatter: ‘{b0}‘ + ‘:00-‘ + 1 + ‘:59<br/>{a0}: {c0}<br/>{a1}: {c1}‘, ???????//边距 ???????padding: [10, 10], ???}, ???//说明， -昨日 -今日 ???legend:{ ?????data:[ ???????{name: ‘昨日‘,icon: ‘line‘,textStyle: {color: ‘#666666‘}}, ???????{name: ‘今日‘,icon: ‘line‘,textStyle: {color: ‘#666666‘}}], ???}, ???//X轴 ???xAxis: ?{ ???????type: ‘category‘, ???????boundaryGap: false, ???????data: [‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘], ???????axisLine: { ???????????lineStyle:{ ???????????????color:‘#cccccc‘, ???????????} ???????}, ???????axisLabel:{ ???????????color:‘#666666‘, ???????}, ???????axisTick:{ ???????????show:false ???????} ???}, ???//Y轴隐藏 ???yAxis: { ???????min: 0, ???????max: 10, ???????show:false, ???}, ???series: [ ???????{ ???????????name:‘昨日‘, ???????????type:‘line‘, ???????????smooth: true, ???????????data:[5, 2, 1, 6, 4, 3, 2], ???????????symbol:‘circle‘, ???????????showSymbol:false, ???????????lineStyle:{ ???????????????normal:{ ?????????????????color:‘#00A1FF‘, ?????????????????}, ???????????}, ???????????itemStyle:{ ???????????????emphasis:{ ??????????????????color:‘#00A1FF‘, ????????????????}, ???????????}, ???????}, ???????{ ???????????name:‘今日‘, ???????????type:‘line‘, ???????????smooth: true, ???????????data:[2, 5, 6, 5, 3, 2, 0], ???????????symbol:‘circle‘, ???????????showSymbol:false, ???????????lineStyle:{ ???????????????normal:{ ?????????????????color:‘#FF7700‘, ?????????????????}, ???????????}, ???????????itemStyle:{ ???????????????emphasis:{ ??????????????????color:‘#FF7700‘, ????????????????}, ???????????}, ???????} ???]}; ???????????- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
//html代码<!DOCTYPE html><head> ???<meta charset="utf-8"> ???<title>ECharts</title></head><body> ???<div id="body" style="height:400px"></div> ???<script src="echarts.common.min.js"></script> ???<script type="text/javascript"> ???//初始化echarts图表 ???var eChart = echarts.init(document.getElementById(‘body‘)); ????var option; ?????????????//窗体自适应 ???????window.onresize = eChart .resize ; ???????????// 为echarts对象加载数据 ?????eChart.setOption(option); ????</script></body>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
结尾
这里我只自定义了自己需要的，有其它需要的，可以看官方API文档定制图表，功能还是相当强大的。
只为记录，只为分享! 愿所写能对你有所帮助。
http://blog.csdn.net/ly305750665/article/details/78775942
Qt图表eCharts（想一想，我的程序需要使用JS来实现功能呢？）
原文地址：http://www.cnblogs.com/findumars/p/8035517.html