基于java的ECharts插件使用

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

效果图展示

圆饼图

柱形图
树形关系图

具体代码

后台是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>

柱形图 代码片.

//获取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}});}

圆饼图 代码片.

//获取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);

树形关系图 代码片.

$(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) {debuggervar 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))+ '<br/>';}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))+ '<br/>';}}}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>

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

基于java的ECharts插件使用相关推荐

基于java web和echarts的数据可视化项目
EchartDemo 项目介绍基于java web和echarts的数据可视化项目主要分析浙江省各市区的gdp和固定资产投资.以及房产数据,数据源浙江省经济社会发展统计,数据经过整理后插入数据库中 ...
基于Java的Minecraft游戏后端自定义插件的Java实践项目整理
Minecraft_Plugin 1.项目概述 2.系统设计 3.功能模块成果展示 4.个人总结 1.项目概述 1.1 项目简介小组准备编写一个具有武器战斗,道具收集.互动社交和任务悬赏四大系统的聚 ...
基于javaweb的crm客户关系管理系统(java+springboot+echarts+freemarker+layui+mysql)
基于javaweb的crm客户关系管理系统(java+springboot+echarts+freemarker+layui+mysql) 运行环境 Java≥8.MySQL≥5.7 开发工具 ecl ...
基于Echarts插件的省市区多级地图下钻和返回功能实现
Echarts3的离线地图组件,比echart2更容易实现省市区多级离线地图的展示. 当然echart2也是可以实现,由于echarts是基于canvas,加载一个地图无非就是加载一张图.而这张图,则 ...
java毕业设计——基于java+Jsoup+HttpClient的网络爬虫技术的网络新闻分析系统设计与实现（毕业论文+程序源码）——网络新闻分析系统
基于java+Jsoup+HttpClient的网络爬虫技术的网络新闻分析系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于java+Jsoup+HttpClient的网络爬虫技术的网络 ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
基于Java（SpringBoot）+Vue+MySQL 实现（Web）的网络课程平台【100010329】
基于 SpringBoot 的网络课程平台 1 绪论 1.1 引言本科题研究并实现了一个面向网络学习的平台,为需要学习的人提供了一个学习的平台.任何人都课在本平台进行注册登录,学习观看视频. 本平台 ...
java旅游网站毕业论文,基于JAVA技术的旅游网站的开发.doc
摘要: 这次毕设主要是为了实现基于JAVA技术的旅游网站的开发,方便人们近距离的出行游玩.网站的开发过程中用到了很多方法技术,最主要的是JAVA技术,用于编写后台的功能实现代码:框架采用的是Sprin ...
java动漫网站开题报告_基于java的校园论坛网站的开发与设计开题报告.doc
基于java的校园论坛网站的开发与设计开题报告太原科技大学华科学院毕业设计开题报告学生姓名:学号:学院.系:专业:论文题目:指导教师: 2015 年 3 月1 ...

基于java的ECharts插件使用

基于java的ECharts插件使用

效果图展示

具体代码

基于java的ECharts插件使用相关推荐

最新文章

热门文章