此文主要用来记录自己对于Echarts的使用吧，毕竟Echarts的属性那么多，好记性不如烂笔头。以下所有案例使用的是Echarts3。

案例1--多变的坐标轴

案例1是在移动端页面中实践，需求简单，要求效果如下：

案例1截图

1.1 X轴刻度标签间断显示(axisTick&axisLabel)

如案例一所示，x轴的间隔变大，这个通过axisTick(坐标轴刻度)和axisLabel(坐标轴刻度标签)来实现

xAxis: {
        axisLine:{
            show:false, //不显示轴线
        },
        axisTick:{
            show:false, //不显示坐标轴刻度
        },
        axisLabel:{
            interval: 4, //坐标轴刻度标签间隔为4
        },
        type: 'category',
        boundaryGap: false,
        data: ['07-08','','','','','07-22','','','','','08-12','']
    }

1.2 图例组件位置(legend)

Echarts中图例默认是在图标上方，所以需要设置legend中位置属性（top,left,right,bottom）来控制其摆放

legend: {
        bottom: '3%',
        itemWidth:10,
        itemHeight:5,
        data:[
            {
                name:'招聘一部',
                icon:'roundRect',
                textStyle:{
                    color:'#999',
                },
                itemHeight:1,
            },
            {
                name:'招聘二部',
                icon:'roundRect',
                textStyle:{
                    color:'#999',
                },
                itemHeight:1,
            },
            {
                name:'招聘三部',
                icon:'roundRect',
                textStyle:{
                    color:'#999',
                },
                itemHeight:1,
            },]
    }

案例2--两组非负数据的对称显示

案例2是给测试小姐姐写的一个网站访问域名统计数据的展示页面，没有设计，所以界面比较素了。如下图所示，统计数据总体由月度、季度以及年度划分；每个时间粒度下的数据又分为线上和线下数据，线上和线下数据需要对比显示。

案例2截图

2.1 一张图对称显示两块数据

想要两块数据左右对称显示，（1）首先需要两个数据对象,所以series中需要两个数据对象

series中设置两个数据对象

2.2 自定义tooltip

自定义的tooltip需要通过tooltop. formatter属性来设置。提示框浮层内容格式器，支持字符串模板和回调函数两种。
（1）字符串模板
字符串模板通过已经定义好的模板变量自由组合而成。模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样，更详细内容，可以查看官方文档。
（2）回调函数
回调函数的实现格式如下：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一个参数params是各个系列的数据集，当只有一个系列时，是一个object；当图中有多个系列时，则是一个包含多个对象的array。params中包含的对象如下：

{
    componentType: 'series',
    // 系列类型
    seriesType: string,
    // 系列在传入的 option.series 中的 index
    seriesIndex: number,
    // 系列名称
    seriesName: string,
    // 数据名，类目名
    name: string,
    // 数据在传入的 data 数组中的 index
    dataIndex: number,
    // 传入的原始数据项
    data: Object,
    // 传入的数据值
    value: number|Array,
    // 数据图形的颜色
    color: string,

    // 饼图的百分比
    percent: number,

这是Echarts官网给出的params对象的各个属性。

params.marker

params对象

案例3--多数据情况下的滚动/缩放显示

案例3是实现一个城市活跃度的柱状图，由于城市众多，一屏页面很难较为细致地展示，所以需要在保留每个城市数据细节的同时展示全部城市数据。这个自然而然便想到滚动显示多屏，Echarts当然是有这项功能的。
dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。dataZoom组件有三类，内置型数据区域缩放组件（dataZoomInside）、滑动条型数据区域缩放组件（dataZoomSlider）以及
框选型数据区域缩放组件（dataZoomSelect）。
内置型数据区域缩放组件，在图标区域左右滚动，改变X轴的显示区域，其展示效果如下官方Demo地址：

dataZoom:[
    {
        type: 'slider',  // 类型
        show: true,  // 是否展示滑动
        // xAxisIndex: [0],
        start: 1,  // 展示范围开始
        end: 50,   // 展示范围开始 
        height: 20,
        bottom: 0
    },
  ],

dataZoom配置项是一个数组，因为在其中可以对多个坐标轴同时进行控制，而且同一个坐标轴也可以加入不同类型的dataZoom组件，比如X轴中同时加入缩放以及滑动组件：

    dataZoom: [
        // x轴滑动组件
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        // x轴区域缩放组件
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
    ],

本案例中只是对dataZoom基础功能的使用，其实它可以满足更为复杂的需求，想要深入了解，可以查看Echarts的官方文档。