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',
},
},
}
]
}; //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>结尾
这里我只自定义了自己需要的，有其它需要的，可以看官方API文档定制图表，功能还是相当强大的。
只为记录，只为分享! 愿所写能对你有所帮助。