快速基于echarts的大数据可视化，echarts纯粹的js实现的图表工具，快速开发的步骤如下：

1、引入echarts的依赖js库

<script type="text/javascript" src="js/esl/esl.js"></script>   <script type="text/javascript" src="js/echarts.js"></script>   <script type="text/javascript" src="js/jquery.js"></script>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->   <div id="main" style="height: 300px"></div>

var myChart;  var option;    // 画图  function drawCharts(echartsHomePath) {   // 路径配置   require.config({    paths : {     echarts : echartsHomePath +'js'    }   })      // 使用   require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' ], function(     ec) {    myChart = ec.init(document.getElementById('main'));            //官网复制option 开始            option = {         title : {             text: '某地区蒸发量和降水量',             subtext: '纯属虚构'         },         tooltip : {             trigger: 'axis'         },         legend: {             data:['蒸发量']         },         toolbox: {             show : true,             feature : {                 mark : {show: true},                 dataView : {show: true, readOnly: false},                 magicType : {show: true, type: ['line', 'bar']},                 restore : {show: true},                 saveAsImage : {show: true}             }         },         calculable : true,         xAxis : [             {                 type : 'category',                 data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']             }         ],         yAxis : [             {                 type : 'value'             }         ],         series : [             {                 name:'蒸发量',                 type:'bar',                 data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],                 markPoint : {                     data : [                         {type : 'max', name: '最大值'},                         {type : 'min', name: '最小值'}                     ]                 },                 markLine : {                     data : [                         {type : 'average', name: '平均值'}                     ]                 }             }         ]     };                                 //官网复制option 结束    myInterval(restPath);   });  }      //填充数据  function setResult(result, option, myChart) {   if (result) {    option.title.text = "每日apputrack趋势图";    option.title.subtext = "apputrack";    option.legend.data[0] = "apputrack";    option.xAxis[0].data = result.day;    option.series[0].name = "apputrack";    option.series[0].data = result.cnt;    myChart.setOption(option);   }  }

//ajax获取数据  function myInterval(restPath) {   $.ajax({    type : 'get',// jquey是不支持post方式跨域的    async : false,    url : baseUrl +restPath,  // 跨域请求的URL    dataType : 'jsonp',    jsonp : "callback",// 服务端用于接收callback调用的function名的参数    success : function(result) {     setResult(result, option, myChart);    },    error : function() {     alert('fail');    }   });  }

//ajax获取数据  function myInterval(restPath) {   $.ajax({    type : 'get',// jquey是不支持post方式跨域的    async : false,    url : baseUrl +restPath,  // 跨域请求的URL    dataType : 'jsonp',    jsonp : "callback",// 服务端用于接收callback调用的function名的参数    success : function(result) {     setResult(result, option, myChart);    },    error : function() {     alert('fail');    }   });  }

来自： http://blog.csdn.net/bdchome/article/details/46817647