最近有一个数据可视化的项目要做，在前端的数据需要用图表的形式展示，在网上搜索了一下，发现有几种统计图库，下面是echarts.js的简单例子，这也是一款基于HTML5的图形库。图形的创建也比较简单，直接引用Javascript即可。使用这个库的原因主要有三点，一个是因为这个库是百度的项目，而且一直有更新，目前最新的是EChart 3；第二个是这个库的项目文档比较详细，每个点都说明的比较清楚，而且是中文的，理解比较容易；第三点是这个库支持的图形很丰富，并且可以直接切换图形，使用起来很方便。
在使用echarts.js前要先去官网下载，这个很容易找到。
下面来总结一下echarts.js：
1、首先，引入js文件
<script type="text/javascript" src="js/echarts.js"></script>
2、准备一个放图表的容器
<div id="chartmain" style="width:600px; height: 400px;"></div>
3、设置参数，初始化图表
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'bar', //'line" 表示折线图
data:[500,200,360,100]
//下面是对每个条形图设置不一样的颜色
itemStyle: {normal: {
color: function(params) {
var colorList = ['#C1232B','#B5C334','#FCCE10','#E87C25']
return colorList[params.dataIndex];
}
}
}
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
条形图
折线图很简单，只需要将series中的type:"bar"修改成“line”就可以了。
<html>
<body>
<script type="text/javascript" src="js/echarts.min.js"> //第一步引入js文件
</script>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
tooltip:{},
legend:{
data:['用户来源']
},
xAxis:{
data:["Android","IOS","PC","Ohter"]
},
yAxis:{
},
series:[{
name:'访问量',
type:'line',
data:[500,200,360,100]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
折线图
饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。
<html>
<body>
<script type="text/javascript" src="js/echarts.min.js"> //第一步引入js文件
</script>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">
//指定图标的配置和数据
var option = {
title:{
text:'ECharts 数据统计'
},
tooltip:{},
series:[{
name:'访问量',
type:'pie',
radius:'60%', //半径
data:[
{value:500,name:'Android'},
{value:200,name:'IOS'},
{value:360,name:'PC'},
{value:100,name:'Ohter'}
]
}]
};
//初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain'));
//使用制定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
饼状图
网友评论