ECharts是由百度打造的一个纯javascript的图标库,很好用。
下载地址:http://echarts.baidu.com/download.html
ECharts的特性如下:
-
丰富的图表类型:
常用的有折线图,柱状图,散点图,饼图,盒形图,用于地理数据可视化的地图,热力图,线图等
-
多个坐标系的支持
直角坐标系(catesian,同 grid)、极坐标系(polar)、地理坐标系(geo)
-
移动端的优化
按需打包,体积缩小为 ECharts 2 的 40%
-
深度的交互式数据探索
支持在数据的各种坐标轴、维度进行数据过滤、缩放,以及在更多的图中采用这些组件
好了,下面直接上使用代码
1.先引入echarts.min.js文件。
<script src="echarts.min.js"></script>
2.定义一个容器div,存放图表
<div id="main" style="width: 600px;height: 500px"></div>
注意:要设置ID、容器的宽、高
3.初始化echarts实例对象
var myChart = echarts.init(document.getElementById('main'));
4.指定图表的配置项和数据,即设置option
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
5.使用刚指定的配置项和数据显示图表
myChart.setOption(option);
这样一个柱状图就出来了
这样折线图就出来了。
在如果要换成饼状图的话,X和Y轴就不需要了,不过依旧要换series中的type:pie;
当然,到这还没有完,还要变data的数据
data:[{value:5,name:"衬衫"},{value:20,name:"羊毛衫"},{value:36,name:"雪纺衫"},{value:10,name:"裤子"},{value:10,name:"高跟鞋"},{value:20,name:"袜子"}]
OK,饼状图出来喽。
是不是感觉ECharts很方便呢?不过它确实很方便,只不过这都是最基本,最简单的。以后慢慢加深吧,期待吧!!