• 注册
当前位置:1313e > 默认分类 >正文

前端:echarts使用示例

效果:在这里插入图片描述

jsp文件部分:

<div class="row"><div class="col-sm-6"><section class="panel"><header class="panel-heading">图表1-饼图header><div class="panel-body"><div class="dmp-chart" id="charts1">div>div>section>div><div class="col-sm-6"><section class="panel"><header class="panel-heading">图表2-折线图header><div class="legend-btn"><div class="btn-group" data-toggle="buttons"><label class="btn btn-default active"><input type="radio" name="date_flag" value='week' autocomplete="off" checked> 本周label> <label class="btn btn-default"><input type="radio" name="date_flag" value='month' autocomplete="off"> 本月label>div>div><div class="panel-body"><div class="dmp-chart" id="charts2">div>div>section>div>
div>
<website:script src="js/libs/echarts/echarts.js"/>

js文件:

require.config({paths: {'echarts': '../../js/libs/echarts','theme': '../../js/common/echarts-themes'}
});$(function() {//选择每周还是每月$("input[type='radio']").change(function(){//刷新图标2refreshDate();});//动态生成图表2的函数,每次调用图标2会刷新function refreshDate(){$.ajax({url: getRootPath() + '/data/standard/NewFile.do?method=getCharts',type: 'POST',data:  {'param' : $("input[type='radio']:checked").val()},dataType: 'JSON',success: function(data) {console.log(JSON.stringify(data));	//[{"value":2,"key":"周一"},{"value":4,"key":"周二"}]var keys = new Array();var values = new Array();for (var i = 0; i < data.length; i++) {keys[i] = data[i].key;values[i] = data[i].value;}var charts2_option = {tooltip: {trigger: 'axis'},legend: {data: ['图标2']},calculable: true,xAxis: [{type: 'category',boundaryGap: false,data: keys	//["周一","周二","周三","周四"]}],yAxis: [{type: 'value',axisLabel: {formatter: '{value}'}}],series: [{name: '更新量',type: 'line',data: values	//["3","2","0","2"]}]};require(['echarts', 'theme/macarons', 'echarts/chart/pie', 'echarts/chart/line'], function(ec, theme) {var charts2 = ec.init(document.getElementById("charts2"), theme);$(window).resize(function() {charts2.resize();})charts2.setOption(charts2_option);});}});}//进入页面后生成图表2refreshDate();//生成图表1$.ajax({url: getRootPath() + '/data/standard/NewFile.do?method=getCharts',type: 'POST',dataType: 'JSON',success: function(data) {var elements = new Array();var statisticsData = new Array();for (var i = 0; i < data.length; i++) {elements[i] = data[i].key;statisticsData[i] = {value: data[i].value,name: data[i].key};}require(['echarts', 'theme/macarons', 'echarts/chart/pie', 'echarts/chart/line', 'echarts/chart/bar'], function(ec, theme) {var charts1 = ec.init(document.getElementById("charts1"), theme);var charts1_option = {tooltip: {trigger: 'item',formatter: "{a} 
{b} : {c} ({d}%)"
},legend: {orient: 'horizontal',x: 'center',y: 'bottom',data: elements //["图例1","图例2"]},series: [{name: '所属元素统计',type: 'pie',radius: '60%',center: ['50%', '40%'],selectedOffset: 4,startAngle: 80,data: statisticsData, //[{name:"图例1", value:2},{name:"图例2", value:3}],itemStyle: {normal: {label: {show: true,position: 'left',formatter: function(params) {return params.name + ':' + (params.percent - 0).toFixed(2) + '%'},textStyle: {baseline: 'bottom'}},labelLine: {show: true}}}}]};charts1.setOption(charts1_option);$(window).resize(function() {charts1.resize();})});}});});

java类:

import com.inspur.data.common.utils.JsonUtils;public class NewFile implements ViewHandler {@Overridepublic void execute(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {}public void doGetCharts(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {String param = request.getParameter("param");System.out.println(param); // week or month or nullMap<String, Object> map1 = new HashMap<String, Object>();map1.put("key", "周一");map1.put("value", 2);Map<String, Object> map2 = new HashMap<String, Object>();map2.put("key", "周二");map2.put("value", 4);List<Map<String, Object>> res = new LinkedList<Map<String, Object>>();res.add(map1);res.add(map2);System.out.println(JsonUtils.convertToString(res)); // [{"value":2,"key":"周一"},{"value":4,"key":"周二"}]response.getWriter().write(JsonUtils.convertToString(res));}
}

转载于:https://www.cnblogs.com/xuejianbest/p/10284944.html

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 162202241@qq.com 举报,一经查实,本站将立刻删除。

最新评论

欢迎您发表评论:

请登录之后再进行评论

登录