ECHARTS基本用法

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);

这样一个柱状图就出来了

如果要换成折线图，将series中的type换成line

这样折线图就出来了。

在如果要换成饼状图的话,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很方便呢？不过它确实很方便，只不过这都是最基本，最简单的。以后慢慢加深吧，期待吧！！