Echarts 具体操作

tooltip 中数据格式化

---

echarts中为了实现tooltip 定制化，我们需要自定义tooltip的一些属性，其中为了显示我们关心的数据，需要重写其中的formatter属性

formatter: function(param){
// console.log(param); 输出传入的参数的数据结构
return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                    + param[0].name+' 月份</div>'
                    + param[0].seriesName+" : "+param[0].data+'</div>'+'<br>'
                    + param[1].seriesName+" : "+param[1].data/20+'</div>'+'<br>'
               ;
            },

坐标轴的隐藏

---

只要把yAxis或者xAxis中的属性show设置为false即可。

yAxis:[
        {
            show:false,
            type : 'value'
        }],

修改坐标轴的数据格式

---

以y轴为例，设置

yAxis : [
           {
               // show:false,  整个y轴不会显示
               type : 'value',
               axisLabel:{
                formatter:function(value){
                    // console.log(value);  y轴显示，不显示数据
                }
               }
           }
       ],

隐藏背景网格

---

方法是对xAxis 和yAxis 设置splitLine属性

xAxis : [
            {
                splitLine:{show: false},
                type : 'category',
                data : xdata
            }
        ],

隐藏坐标轴的刻度

---

axisTick: {
show: false
},

添加工具箱的支持

---

toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },