基于java的ECharts插件使用

基于java的ECharts插件使用

该文章主要适合ECharts入门级别,主要介绍的是圆饼图,柱形图,树形关系图,更多图形可以到官方网站进行查看学习链接: ECharts.

效果图展示

  1. 圆饼图

基于java的ECharts插件使用_第1张图片

  1. 柱形图
    基于java的ECharts插件使用_第2张图片
  2. 树形关系图
    基于java的ECharts插件使用_第3张图片

具体代码

后台是java,数据通过json进行前后交互,js官网下载:

     <script src="js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
     <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>	
  1. 柱形图 代码片.
//获取id 只能通过dom获取
var custChart = echarts.init(document.getElementById('customer_ec'));
getHomePageCust(custChart);
function getHomePageCust(custChart){
   FlexCloud.GET('/tb/crmActivity/getHomePageCust', null,function(data) {
   	custChart.setOption({
   		/* color: ['#3398DB'], */
           title: {
           	text: '客户阶段',
               x:'center'
           },
           tooltip: {},
           /* legend: {
           	x: 'right', 
           	y: 'top', 
               data:['客户阶段']
           }, */
           xAxis: {
               data: ["接触","意向","项目合作","订单合作"]//柱形图y轴
           },
           yAxis: {},
           series: [{
               name: '客户阶段',
               type: 'bar',
               data: [data.cust_contact_num, data.cust_intention_num, data.cust_project_num, data.cust_order_num],//后台查询的数据
               itemStyle: {
                   normal: {
                       color: function(params) {  
                           var colorList = [
                             '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B'
                           ];
                           return colorList[params.dataIndex]
                       },
                       label: {
                           show: true,
                           position: 'top',
                       }
                   }
               }
           }]
   	});
   });
   //echarts图表点击跳转
   custChart.on('click', function (param){
      	var name=param.name;
      	if(name=="接触"){
   	   	//todo
      	}else if(name=="意向"){
      	//todo
      	}
   });
   }
  1. 圆饼图 代码片.
//获取id 只能通过dom获取
var quesChart = echarts.init(document.getElementById('question_ec'));
//获取问题圆饼图
getHomePageQust(quesChart);
function getHomePageQust(quesChart){
   FlexCloud.GET('/tb/crmActivity/getHomePageQust', null,function(data) {
   	quesChart.setOption({
   		tooltip : {
      	        trigger: 'item',
      	        formatter: "{b} : {c} ({d}%)"
      	    },
      	    legend: {
      	     	orient : 'vertical',
   	        x : 'left',
   	        data: ['新建', '处理中','关闭']
      	    },
      	    series : [
      	        {
      	            type: 'pie',
      	            radius : '75%',
      	            center: ['50%', '50%'],
      	        	itemStyle: {
       	            normal: {
       	                label: {
       	                    show: true,
       	                    position: 'inside',
       	                    formatter:"{c}"
       	                },
       	                labelLine: {
       	                    show: false,
       	                }
       	            }
       	        },
      	            data:data//后台数据
      	        }
      	    ]
   	});
   });
   //echarts图表点击跳转
   quesChart.on('click', function (param){
      	var name=param.name;
      	if(name=="新建"){
      		//todo
      	}else if(name=="处理中"){
            //todo
      	}else if(name=="关闭"){
   //todo
   	}
    });
}
//后台代码
    List<Map<String, Object>> list = new ArrayList<>();
   	Map<String, Object> map_new = new HashMap<>();
   	Map<String, Object> map_handle = new HashMap<>();
   	Map<String, Object> map_close = new HashMap<>();
   	map_new.put("name", "新建");
   	map_new.put("value", result.get("ques_new_num"));
   	map_handle.put("name", "处理中");
   	map_handle.put("value", result.get("ques_handle_num"));
   	map_close.put("name", "关闭");
   	map_close.put("value", result.get("ques_close_num"));
   	list.add(map_new);
   	list.add(map_handle);
   	list.add(map_close);
  1. 树形关系图 代码片.
$(function(){
   	var data=[
                           {
                               name: '项目经理|梁峰',
                               symbolSize: [140, 50],
                               symbol: 'rect',
   			    value: '按要求完成项目的方案设计',                  
                               itemStyle: {
                                   normal: {
                                       label: {
                                           show: false
                                       }
                                   }
                               },
                               children: [
                                   {
                                       name: '项目经理|梁峰',
                                       value: '按要求完成项目的方案设计',
                                       symbol: 'rect',
                                       color:'#fff',
                                       itemStyle: {
                                            normal: {
                                                label: {
                                                    show: true,
                                                    textStyle:{
                                                         align:'center',
                                                  verticalAlign:'middle'
                                                           }
                                                       },
                                                       color:'#fff',
                                                       borderWidth:1,
                                                       borderColor: '#00A0E9'
                                                   }
                                               },
                                               symbolSize: [140, 50],
                                               children: [
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                       value:value: '按要求完成项目的方案设计',
   							temStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   },
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                      value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   }
                                               ]
                                           },
                                           {
                                               name: '项目经理|梁峰',
                                               symbol: 'rect',
                                               symbolSize: [140, 50],
   						value: '按要求完成项目的方案设计',
                                               itemStyle: {
                                                   normal: {
                                                       label: {
                                                           show: true,
                                                           textStyle:{
                                                               align:'center',
                                                               verticalAlign:'middle'
                                                           }
                                                       },
                                                       color:'#fff',
                                                       borderWidth: 1,
                                                       borderColor: '#007130'
                                                   }
                                               },
                                               children: [
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                      value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   },
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                      value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   }
                                               ]
                                           },
                                           {
                                               name: '项目经理|梁峰',
                                               symbol: 'rect',
                                               symbolSize: [140, 50],
                                             value: '按要求完成项目的方案设计',
                                               itemStyle: {
                                                   normal: {
                                                       label: {
                                                           show: true,
                                                           textStyle:{
                                                               align:'center',
                                                               verticalAlign:'middle'
                                                           }
                                                       },
                                                       color:'#fff',
                                                       borderWidth: 1,
                                                       borderColor: '#AC6A00'
                                                   }
                                               },
                                               children: [
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                   value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   },
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                     value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   }
                                               ]
                                           },
                                           {
                                               name: '项目经理|梁峰',
                                               symbol: 'rect',
                                               symbolSize: [140, 50],
   					value: '按要求完成项目的方案设计',
                                               itemStyle: {
                                                   normal: {
                                                       label: {
                                                           show: true,
                                                           textStyle:{
                                                               align:'center',
                                                               verticalAlign:'middle'
                                                           }
                                                       },
                                                       color:'#fff',
                                                       borderWidth: 1,
                                                       borderColor: '#FF0000'
                                                   }
                                               },
                                               children: [
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                   value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   },
                                                   {
                                                       name: '项目经理|梁峰',
                                                       symbol: 'rect',
                                                       symbolSize: [140, 50],
                                                     value: '按要求完成项目的方案设计',
                                                       itemStyle: {
                                                           normal: {
                                                               label: {
                                                                   show: true,
                                                                   position: 'bottom'
                                                               }
                                                           }
                                                       }
                                                   }
                                               ]
                                           }
                                       ]
                                   }
                               ];
   							todo(echarts,data);
   })
   function  todo(ec,data){
       var myChart=ec.init(document.getElementById('a')); 
       var option={
           title : {
               show:false
           },
           tooltip : {
               trigger: 'item',
               formatter: function (params) {
   			debugger
   			var num=params.value.length/25;
   			var htmlStr='';
   			if(num==0){
   				htmlStr=params.value
   			}else{
   				for(var i=0;i<num;i++){
   					if(i==0){
   						htmlStr=htmlStr+params.value.substring(0,25*(i+1))+ '
'
; }else if(i==num-1){ htmlStr=htmlStr+params.value.substring(25*(i),params.value.length); }else{ htmlStr=htmlStr+params.value.substring(25*(i),25*(i+1))+ '
'
; } } } return htmlStr; } }, toolbox: { show : false, }, calculable : false, series : [ { name:'人员关系', type:'tree', orient: 'horizontal', //横向还是纵线树 rootLocation: {x: 100, y: '50%'}, //设置顶点位置 layerPadding: 30, nodePadding: 20, symbol: 'circle', symbolSize: 40, itemStyle: { normal: { label: { show: true, position: 'inside', textStyle: { color: '#000', fontSize: 15, fontWeight: 'bolder' } }, color:'#fff', lineStyle: { color: '#000', width: 1, type: 'solid' 'curve'|'broken'|'solid'|'dotted'|'dashed } }, emphasis: { label: { show: false, textStyle:{ align:'center', verticalAlign:'middle' } }, color:'#fff', borderWidth: 1 } }, data: data//后台数据户 } ] }; myChart.setOption(option); } </script>

以上就是这三种图的一个简单的列子,他还有许多改进的地方,希望给入门的朋友有些灵感。

你可能感兴趣的:(js组件)