echarts简单使用案例

先上效果图:

1.引入js　　

　　<script src="<%=request.getContextPath() %>/js/echarts/build/dist/echarts.js"></script>

　　网盘下载:　　https://yunpan.cn/cMCdXqfIJWRLq  访问密码 4880

2.echarts 前台显示需要一个div容器,并设置高度.

3.配置echarts的路径,和所需模块(可以只加载你需要的)

4.根据数据,显示成不同的图形:柱状图,饼状图,折线图,地图...

 

echarts的文件结构:

 

Ajax获取后台数据

 1 //根据产业名称获取图表数据
 2     function getData(idx,cymcName,names){
 3         if(cymcName==null||cymcName=="") return;
 4         //var jsonObj = {};//注意是{}
 5         $.ajax({
 6             type : "POST", // 提交的方式
 7             url : "/fysy/fysy/fysqyjyfxtwo/FysQyjyfxTwo.do?method=queryDataByCymc&cymcName=" + cymcName+"&rand="+Math.random(), // 提交的action地址
 8             success : function(msg) {
 9                 var jsonObj = eval("(" + msg + ")");
10                     var fxdxList = jsonObj["fxdxList"];        //分析对象列表
11                     var srList = jsonObj["srList"];            //收入列表
12                     var lrList = jsonObj["lrList"];            //毛利列表
13                     var sdate = jsonObj["sdate"];            //日期
14                     
15                     var srCurrYearList = jsonObj["srCurrYearList"];            //收入列表
16                     var lrCurrYearList = jsonObj["lrCurrYearList"];            //毛利列表
17                     
18                     
19                 var    sdateLastYear = (sdate.substring(0,4)-1)+"年"+sdate.substring(4)+"月";
20                     sdate = sdate.substring(0,4)+"年"+sdate.substring(4)+"月";
21                     showEcharts(idx,fxdxList,srList,lrList,sdateLastYear,srCurrYearList,lrCurrYearList,sdate,names);
22             },
23             error : function() {
24             }
25         });
26         
27     }
28     
29     //通過獲取的數據，顯示echarts圖
30     function showEcharts(tabDivIndex,fxdxList,srList,lrList,sdateLastYear,srCurrYearList,lrCurrYearList,sdate,names){

 

配置echarts,根据数据显示成不同的图

  1 　　　　 var myChart1 = null;
  2         var myChart2 = null;
  3         require.config({
  4             paths: {
  5                 'echarts': '/fysy/js/echarts/build/dist'
  6             }
  7         });
  8         require([
  9             'echarts',
 10             'echarts/chart/bar',
 11             'echarts/chart/line',
 12             'echarts/chart/gauge'
 13         ], function (ec) {
 14             //1.--- 柱状图,各个产业收入分析 ---
 15             var oDiv1 = "cyfxechart"+tabDivIndex+"1";
 16             myChart1 = ec.init(document.getElementById(oDiv1));
 17             var legendArr1 = new Array();
 18             legendArr1.push(sdateLastYear);
 19             legendArr1.push(sdate);
 20             
 21             option1 = {
 22                 title : {
 23                     text: names[tabDivIndex]+"收入分析",
 24                     x:"center",
 25                     y:"top",
 26                     textStyle:{
 27                         fontWeight:'bolder'
 28                     }
 29                 },
 30                 tooltip : {
 31                     trigger: 'axis',
 32                     formatter:function(params){
 33                         return customFormatter(params);
 34                     },
 35                     position:function(p){
 36                         return [p[0]-100,p[1]-400];//向左100,向上400
 37                     }
 38                 },
 39                 legend: {
 40                     data: legendArr1,
 41                     x:"left",
 42                     orient:'vertical' //纵向布局
 43                 }, 
 44                 toolbox: {
 45                     show : true,
 46                     feature : {
 47                         mark : {show: true},
 48                         dataView : {
 49                             show : true,
 50                             title : '数据视图',
 51                             readOnly: true,
 52                             lang: ['数据视图', '关闭', '刷新']
 53                         },
 54                         magicType : {show: true, type: ['line','bar']},
 55                         restore : {show: true},
 56                         saveAsImage : {
 57                             show: true,
 58                             title : '保存为图片',
 59                             type : 'png',
 60                             lang : ['点击保存']
 61                         }
 62                     }
 63                 },
 64                 calculable : true,
 65                 xAxis : [{
 66                     type : 'category',
 67                     data : fxdxList        //["a","b","c","d"]
 68                 }],
 69                 yAxis : [{
 70                     type : 'value',
 71                     axisLabel : {
 72                         formatter: '{value}'
 73                     }
 74                 }],
 75                 series : [{
 76                            'name':sdateLastYear,
 77                         'type':'bar',
 78                         'barWidth': 60,
 79                         "data":srList,            
 80                            'itemStyle': {        // 系列级个性化样式
 81                             normal: {
 82                                 color:colorList[0], 
 83                                 label : {
 84                                     show : true,
 85                                     position : 'top',
 86                                     formatter : "{c}",
 87                                     textStyle : {
 88                                         color: 'blue'
 89                                     }
 90                                 }
 91                             }
 92                            }
 93                     },
 94                     {
 95                            'name':sdate,
 96                         'type':'bar',
 97                         'barWidth': 60,
 98                         "data":srCurrYearList,            
 99                            'itemStyle': {        // 系列级个性化样式
100                             normal: {
101                                     color:colorList[1], 
102                                 label : {
103                                     show : true,
104                                     position : 'top',
105                                     formatter : "{c}",
106                                     textStyle : {
107                                         color: 'blue'
108                                     }
109                                 }
110                             }
111                            }
112                     }
113                 ]
114             };
115             myChart1.setOption(option1,true);
116             
117             //2.--- 柱状图,各个产业毛利分析 ---
118             var oDiv2 = "cyfxechart"+tabDivIndex+"2";
119             myChart2 = ec.init(document.getElementById(oDiv2));
120             var legendArr2 = new Array();
121             legendArr2.push(sdateLastYear);
122             legendArr2.push(sdate);
123             option2 = {
124                 title : {
125                     text: names[tabDivIndex]+"毛利分析",
126                     x:"center",
127                     y:"top",
128                     textStyle:{
129                         fontWeight:'bolder'
130                     }
131                 }, 
132                 tooltip : {
133                     trigger: 'axis',
134                     formatter:function(params){
135                         return customFormatter(params);
136                     },
137                     position:function(p){
138                         return [p[0]-100,p[1]-400];//向左100,向上400
139                     }
140                 },
141                 legend: {
142                     data: legendArr2,
143                     x:"left",
144                     orient:'vertical' //纵向布局
145                 }, 
146                 toolbox: {
147                     show : true,
148                     feature : {
149                         mark : {show: true},
150                         dataView : {
151                             show : true,
152                             title : '数据视图',
153                             readOnly: true,
154                             lang: ['数据视图', '关闭', '刷新']
155                         },
156                         magicType : {show: true, type: ['line','bar']},
157                         restore : {show: true},
158                         saveAsImage : {
159                             show: true,
160                             title : '保存为图片',
161                             type : 'png',
162                             lang : ['点击保存']
163                         }
164                     }
165                 },
166                 calculable : true,
167                 xAxis : [{
168                     type : 'category',
169                     data : fxdxList        //["a","b","c","d"]
170                 }],
171                 yAxis : [{
172                     type : 'value',
173                     axisLabel : {
174                         formatter: '{value}'
175                     }
176                 }],
177                 series : [{
178                            'name':sdateLastYear,    
179                         'type':'bar',
180                         'barWidth': 60,
181                         "data":lrList,                
182                            'itemStyle': {                // 系列级个性化样式
183                             normal: {
184                                 color: colorList[0], 
185                                 label : {
186                                     show : true,
187                                     position : 'top',
188                                     formatter : "{c}",
189                                     textStyle : {
190                                         color: 'blue'
191                                     }
192                                 }
193                             }
194                            }
195                     },
196                     {
197                            'name':sdate,    
198                         'type':'bar',
199                         'barWidth': 60,
200                         "data":lrCurrYearList,                
201                            'itemStyle': {                // 系列级个性化样式
202                             normal: {
203                                 color: colorList[1], 
204                                 label : {
205                                     show : true,
206                                     position : 'top',
207                                     formatter : "{c}",
208                                     textStyle : {
209                                         color: 'blue'
210                                     }
211                                 }
212                             }
213                            }
214                     }
215                 ]
216             };
217             myChart2.setOption(option2,true);
218             
219             //点击事件
220             var ecConfig = require('echarts/config');
221             function eConsole(param) {
222                 openReport(names[tabDivIndex],param.name,param.seriesName,option1.title.text);
223             }
224             
225             myChart1.on(ecConfig.EVENT.CLICK, eConsole);
226             myChart2.on(ecConfig.EVENT.CLICK, function(param){
227                 openReport(names[tabDivIndex],param.name,param.seriesName,"ml");//调用自定义函数,显示报表
228             });
229         
230             
231         });
232         

 

 

其他:

一些颜色,无关紧要

1 var colorList=['#4488BB','#228B22','#FF4500','#F827F8','#1040CA',
2                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
3                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
4                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'];

 

             //方法一：正则转换为千位符格式 (ysjdjds || 0).toString().replace(/(d)(?=(?:d{3})+$)/g, '$1,');
             //方法二：千位符转换方法
             function toThousands(num) {
                 var num = (num || 0).toString(), result = '';
                 while (num.length > 3) {
                 result = ',' + num.slice(-3) + result;
                 num= num.slice(0,num.length - 3);
                 }
                 if (num) { result = num + result; }
                 return result;
                 }

 

转载于:https://www.cnblogs.com/PheonixHkbxoic/p/5852236.html