關於圖表展現工具

1、Echarts

一、下載

在官網http://echarts.baidu.com/選擇合適版本進行下載，高級版本可選擇的圖形更豐富一些。這邊我選擇了最新版本百度2.2.7。因爲下載的版本是包含實例和文檔，而實際使用中是不須要的，因此建議項目中保留echarts-2.2.7\build\dist\echarts.js便可知足需求。

二、使用

Echarts上手很簡單，根據文檔裏面的提供的實例，選擇合適的展現圖形，複製左邊提供的代碼段，拷貝到項目頁面加載的js中

$(document).ready(function(){  
    require.config({  
        paths: {  
            echarts: '../../common/echarts-2.2.3/build/dist'  
        }  
    });  
  
    // 使用  
    require(  
        [  
            'echarts',  
            'echarts/chart/line',  
            'echarts/chart/pie',  
            'echarts/chart/gauge',  
            'echarts/chart/bar'  
        ],  
        loadCharts  
    );  
  
})  
  
function loadCharts(ec) {  
    echarts = ec;  
    //服務器時間  
    setTimeout(function(){  
        loadMainCpu(cpu,'load');  
        //1分鐘  
        setInterval(function(){  
            loadMainCpu(cpu,'update');  
        },1000*60)  
  
    },500)  
  
}  
  
  
function loadMainCpu(cpu,type) {  
    _main_cpu = echarts.init(document.getElementById('main_cpu'));  
      
    /*拷貝實例*/  
      
    if(type =='load'){  
        _main_cpu.setOption(option)  
    }else{  
        option.animation = false;  
        _main_cpu.setOption(option,false);  
    }  
  
}

在拷貝實例處拷貝js代碼便可。

三、優缺點

Echarts的優勢比較明顯體積小，免費、上手快，只須要有一些js基礎，剩下的就是複製粘貼的事情，並且是國產的東西，文檔看起來也比較方便，整體來講門檻比較低。

缺點一樣也有很多，好比在文檔實例不能知足的狀況下除了改改顏色線長短粗細以外，其餘的自定義開發比較困難；在IE8環境下很多動畫效果會打折扣或者根本顯示不出來，按照一些網上說法下載支持IE8的Echarts版本也沒有明顯改善；缺少立體效果圖的支持等。

2、Highcharts

Highcharts相比Echarts更智能更全面，有立體效果圖的支持，文檔也全面一些。

官網：https://www.hcharts.cn/demo/highcharts