前幾天，有那麼一個專案，要用Echarts這款外掛，實現一個柱狀圖的展示一組資料，其他的資料當滑鼠以上去影象上的時候，相應的影象顯示相應資料組，如下圖

這是最終的效果圖

這是傳過來的json檔案

{
"data": [
		 {
		"free_space": 2.94,
		"sum_blocks": 3080,
		"sum_space": 313.13,
		"tablespace_name": "EXAMPLE",
		"used_rate": 99.06,
		"used_space": 310.19
		},
		{
		"free_space": 9501,
		"sum_blocks": 2621440,
		"sum_space": 20480,
		"tablespace_name": "SLOB",
		"used_rate": 53.61,
		"used_space": 10979
		},
		{
		"free_space": 7582,
		"sum_blocks": 94720,
		"sum_space": 740,
		"tablespace_name": "SYSAUX",
		"used_rate": 94.68,
		"used_space": 700.62
		},
		{
		"free_space": 6684,
		"sum_blocks": 85647,
		"sum_space": 510,
		"tablespace_name": "DFHTGJ",
		"used_rate": 85.28,
		"used_space": 582.14
		},
		{
		"free_space": 2855,
		"sum_blocks": 62487,
		"sum_space": 380,
		"tablespace_name": "HIASD",
		"used_rate": 68.24,
		"used_space": 358.56
		}
],
"status": "ok"
}
 

function analysis (data){    
    var end_obj = []; 
   for(i in data){
     var obj = {name:'', datas:[]};
        obj.name = data[i].tablespace_name;
        obj.value = data[i]['used_rate(%)'];
        obj.datas[0] = data[i]['free_space(m)'];
        obj.datas[1] = data[i]['sum_blocks'];
        obj.datas[2] = data[i]['sum_space(m)'];
        obj.datas[3] = data[i]['used_space(m)'];
        end_obj.push(obj);
        }
    return end_obj;  

};
 

tooltip : {
                    trigger: 'item',//是否節點觸發
                    padding: 5,
                    formatter: function(a){
                        return ('資料名稱:'+a['name']
                               +'</br>當前值:'+a['value']
                               +'<br>free_space:'+a['data'].datas[0]
                               +'<br>sum_blocks:'+a['data'].datas[1]
                               +'<br>sum_space:'+a['data'].datas[2]
                               +'<br>used_space:'+a['data'].datas[3]
                               );
                    },
                }
 

itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                   var colorList = ['#B5C334','#C1232B'];
                                 
                                    if(params.value <= 50){
                                       return colorList[0];

                                    }else{
                                        return colorList[1];
                                    }
                                   
                                }
                            }
                        }

 $.getJSON("./aa.json").done(function(res){
          var data = res.data;
              var name = [];
              for(i in data){
                name.push(data[i].tablespace_name);
              }
          option.series[0].data = analysis(res.data);
          option.xAxis[0].data = name;
          db_chart.setOption(option);
        })

這些是實現功能的主要程式碼，之前只知道傳遞到tooltip裡面formatter函式引數params是從series裡面的data傳遞進去的，所以之前一直都在後面ajax的option.seris[0].data裡面，這裡面做文章，想要把我想展示的資料的影象直接設定在這裡的data,然後其他資料就不寫到這裡的data裡面，但是後面發現，所有的資料都是來源於這裡的data，所以傳遞進去的資料還是會出現五組影象，後面才發現，真正實現影象的是data裡面的一個叫做 value的物件，這個value只要有值，影象就會顯示出來，知道這個問題後，就請教了相關的人士，他給我寫了個函式，告訴我把想要傳遞進去變成影象的那組資料賦值給value，其他的資料存在一個數組裡面，這個陣列你可以隨意命名，這裡是datas，在這個datas是一個物件性陣列，每一個值都是一個物件，這些就是我想要在tooltip的提示框裡面顯示的資料。

analysis函式就是這麼一個處理series的data裡面的資料的函式，將ajax獲取到的資料傳入這個函式，res.data就是上面那個json檔案，所以，當這個函式傳遞到analysis這個函式裡面時，函式裡面的data引數就是這個json格式的資料，接下來，你就可以為所欲為了，想要將什麼樣的格式的資料作為你的value,想要返回給series.data什麼樣的資料，，你都可以自己定義，最後，在tooltip這裡面的formatter函式裡面的引數  a  ，也是series.data的值，所以，你想要在提示框裡面顯示什麼，你也可以為所欲為，在這裡，我也遇到過一兩個小問題，為什麼option裡面的資料都有，但是就是不顯示影象，原因是你有可能沒有setOption(option);；第二，data是一個數組，在給data賦值的時候，一定要小心。

影象上有兩個顏色，這個顏色是根據value的大小來設定的，在itemstyle裡面，color可以自定義函式實現你想要實現的顏色標註，當然，還有markline，這裡我只做了color，這裡面傳遞進去的引數也是series.data，還是那句話，有了這些，你就可以為所欲為了。

最後，如果對於這種效果的實現有什麼更好的建議，真心希望能夠提出來討論下。我也是剛剛接觸Echarts，說的不對的地方，希望海涵。