Echarts

1 引入 echarts.min.js.

<scripttype="text/javascript" th:src="@{/static/pedp/js/weboffice/echarts.min.js}"></script>

2.在html中设置一个DOM

<div id="myEchart" style="height:500px;"></div>

3.通过echarts.Init 初始化一个echarts实例并利用setOption生成柱状图，利用setOption设置属性的值，实现数据异步刷新。

var myChart,option;
var Echarts = {
	queryDataTest : function() {
	   myChart=echarts.init(document.getElementById("myEchart"));
	   option = {   //可替换      
//https://www.echartsjs.com/gallery/editor.htmlc=doc-example/tutorial-async(例子)
			    legend: {},
			    tooltip: {},
			    dataset: {
			        source: [
			           
			        ]
			    },
			    xAxis: {type: 'category'},
			    yAxis: {},
			    // Declare several bar series, each will be mapped
			    // to a column of dataset.source by default.
			    series: [
			        {type: 'bar'},
			        {type: 'bar'},
			        {type: 'bar'}
			    ]
			};
	   myChart.setOption(option);//将图表内容格式内容放入到myChart位置
	   myChart.hideLoading();  
	   Echarts.getChartData();//aja后台交互
   },
   getChartData : function(){
	   //获得图表的options对象
	   var options = myChart.getOption();
       var param1 = $("#param1 ").val();
       var param2= $("#param2").val();
       //var _data = {"param1":param1,.....};这里可以加请求的参数
       //通过ajax获取数据
       $.ajax({
           type:"post",
           async:false,
           url : '/xxx/xxx',
           dataType:"json",//返回数据形式为json
       //    data:_data,
           success:function(result){
              myChart.setOption({  //后台返回数据
            	  dataset: {
  			        source: [
  			            ['product', '2015', '2016', '2017'],
  			            ['Matcha Latte', 43.3, 85.8, 93.7],
  			            ['Milk Tea', 83.1, 73.4, 55.1],
  			            ['Cheese Cocoa', 86.4, 65.2, 82.5],
  			            ['Walnut Brownie', 72.4, 53.9, 39.1]
  			        ]
  			    }
              })
           },
         error:function(errorMsg){
               alert("图表请求数据失败啦!");
               myChart.hideLoading(); 
        }

      })
   }
		
}
$(function(){
	Echarts.queryDataTest();

});