echarts初体验

最近一段时间来，基本上都是在跟数据可视化打交道，echarts作为百度出品的免费图表工具，图表也比较全面，在工作中也就经常用到了，所以简单的谈一下自己对于echarts的理解。
先来一个echarts的官方特写，这是echarts的官方案例中的一部分图表，非常的帅气

echarts.png

首先一个echarts是BAT之一的百度推出的可视化图形插件，由百度echarts团队进行维护，集合了众多市面上有可能用到的图表类型，基本上经常用到的，它都有包含。所以echarts是有很多优势的：
1、echarts是由百度推出并且维护的，在社区方面比较完善
2、学习曲线算难，只要懂js，基本上稍微研究之后就能使用
3、图表种类很丰富
4、echarts支持单模块引入，想用什么图表就引入什么图表
5、echarts图表是基于canvas来绘制的，对3D绘图有绝对优势
6、echarts有上线国内地图
当然，他也是有一些不足之处的：
1、echarts的文档教程比较模糊，不是那么详细，更多的是需要开发者花费一定的精力去了解
2、echarts的入门是比较简单，但是想要深入的话就需要花费较多精力，后期更多的是涉及到了算法
3、对IE8及IE8（甚至IE9）及以下的兼容性比较差，经常报很多错误
4、图表比较固定，不能够自由配置
5、从2.0版本到3.0版本跨度比较大，很多配置项的使用方式都有所改动
6、在比较复杂的用户交互上略显吃力

下面就来介绍一下echarts的使用。
借助于官方案例，我们先来POS出来一个最简单的图表

var myEchart=echarts.init(document.getElementById('main1'));
option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};
myEchart.setOption(option);

出来的效果就是下面这个样子

echarts.png

非常的简单，我们只要设置xAxis（X轴）和yAxis（Y轴），然后再给上series一些数据和指定图表类型就可以了，看到这里你是不是觉得，嗯，echarts真简单，so too young too simple,我们来看看官方的配置项手册

echarts.png

不要怀疑你的眼睛，这只是其中一部分，是的，还没完呢
不过，一般来说我们也用不到那么多的配置项，我们如果只是一般的常见图表并且复杂度不高的话，只要配置好以下几个项就可以了

1533689773(1).png

当然这只是简单的图表所用到的，其他一些图表如极坐标图还会需要用到 polar、 radiusAxis和 angleAxis，雷达图还会需要用到 radar，地理图还会有 visualMap、 brush、 geo，不过这些我们以后再讲，现在我们来看一下，一个都用到了上诉基本配置项的图表是怎么样的，以条形图为例

var myEchart=echarts.init(document.getElementById('main1'));
var option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一','周二','周三','周四','周五','周六','周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        }
    ]
};
myEchart.setOption(option);

这个例子所表现出来的图表是下面这样的

echarts.png

相对来说也是比较简单的，虽然简单，但是也还是有坑的，首先一个，如果是做坐标轴类的图表，xAxis和yAxis是必须要有的，否则就会报错，其次图表的类型也是要配置好的，否则也会报错，再然后，echarts图表在渲染之前，echarts.init对象是必须要有宽高，否则，还是红彤彤的报错，这就涉及到开发中的一个问题了，对于要渲染echarts图表的模块，这个模块是不可以使用display:none去控制显示隐藏的，否则渲染出来的图表就会变形了。
接下来会讲到一个开发中经常遇到的问题，也就是怎么使得渲染出来的图表是响应式的
关于这个，echarts本身也是提供了一个方法给我们，我们只需要在屏幕变化的时候绑定这个方法就可以了

//每次窗口大小改变的时候都会触发onresize事件
//这个时候我们将echarts对象的尺寸赋值给窗口的大小这个属性，从而实现图表对象与窗口对象的尺寸一致的情况
        window.onresize = myEchart.resize;

以上我们就可以做出来一个常用的坐标轴类图表了，并且还是响应式的。至于其他的，我们再逐步的去了解。