关于图表展现工具

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