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
时间： 2024-11-05 17:41:43