Echarts中数据显示实现formatter

来公司工作了两个月了，大部分时间都是在画图制表，主要使用到Echarts框架来进行数据可视化的展示，在完成需求的过程中碰到最多的问题就是数据展示时的样式需求，如鼠标放到图表上显示的内容、数据展示时的格式问题，目前为止主要是碰到了三种类型的数据显示：

1. 横纵坐标的数据显示格式问题
2. 坐标轴中柱状图或者折线图的数据
3. 鼠标滑到指定区域时的数据展示问题

---

对于第一种横纵坐标数据显示的格式问题，如：对于一个纵坐标用来展示占比率0.5要将这个值展示位50%，对于坐标轴的x，y轴的设置分别对应着xAxis和yAxis这两这个属性，我们要将纵轴的值变换成50%，只需要在原始数值的基础上乘以100然后拼接上%就可以了，具体的实现代码如下：

yAxis : [
    {
        type : 'value',
        name : 'y轴名称',
        axisLabel : {
            formatter : function(val){
                return val*100+"%";
            }
        }
    }
]

对于第二个问题坐标轴中柱状图或者折线图的数据，这个主要是用来满足需求：要在坐标轴的每个点上将各自对应的数据显示下来，这块主要用到的是series中的label属性，主要实现的代码如下：

series ： [
    {
        name : '和legend的某一项对应',
        type : 'bar',
        label : {
            normal : {
                show : true,
                position : 'top'
            }
        }
        data : data
    }
]

series中的name对应的值要是legend中的某一项，type就是你的这个图形是什么类型，可以是bar或者line等，label中的show是用来设置是否显示，position用来设置数据显示在图形的位置，data就是要显示的数据。

---

对于第三种问题，鼠标滑到指定区域时的数据展示问题，这块用来的属性主要是tooltip，具体的代码实现如下：

tooltip : {
    trigger : 'axis',
    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter : '{a0}:{c0}<br />{a1}:{c1}'
}

当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据，重要的就是这个formatter属性，这个属性是具体用来操作显示的数据格式的，对于官方文档给的这个格式我最初是有点懵逼的，后来我再认真的看了一下关于这个属性的说明才发现这种写法是真的好用，模板变量有 {a}, {b}，{c}，{d}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
总的来说这块的abcd分别对应着不同的名称，如果不是很理解在显示的时候可以自己多去尝试几次就发现规律了，当然刚开始不理解的我是用如下方法实现的：

formatter(params){
    console.log(params);
}

通过这个写法来输出它的所有属性，然后可以在里面找到所需要的几个属性，可以说这是一种很笨的方法，不推荐去使用这个方式，最好就是采用上面那种{a0}的那种方法来实现，最后加上官网配置项地址，所有的属性都可以在这里找到说明和使用方法。

http://echarts.baidu.com/option.html#grid.tooltip.formatter