Echarts实现图表下钻

图片界面

<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"> </head><body style="height: 100%; margin: 0"><div style="margin-left:40%;margin-top:2%"><button id='return-button' value=''>back to things</button>       </div><div id="container" style="height: 50%;width: 50%"></div><!-- 引入echart-all.js 也可以使用项目自己有的。该成对应路径即可--><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script><!-- 下面创建的js文件 --><script type="text/javascript" src="./drillDown.js"></script><script type="text/javascript" >var dom = document.getElementById("container");$('#return-button').on('click',function(){var myChart = echarts.init(dom);var option = drillDown.getOption();$.ajax({type:'get',url:"/category/getAllCategody.do",dataType : 'json',success : function (msg){option.xAxis.data = msg.xAxis;//option.series[0].data = msg.yAxis[0];option.series[0].data = msg.yAxis;myChart.setOption(option, true);}});}</script></body>
</html>

drillDown.js

var drillDown = {getOption : function () {var option = null;option = {title: {text: 'Basic drilldown',left: 'center'},legend: {left: 'left',data: ['category']},xAxis: {type: 'category',data: ['Animals', 'Fruits', 'Cars']},               yAxis: {type: 'value'},series: [{name: 'category',type: 'bar',}]};$.ajax(type : 'get',//url : interfaceUrl + '&category=' + object.name, // 此处替换成写逻辑的地方,下面是我自己的url: "/category/getAllCategory.do",dataType : 'json',success : function (msg){option.xAxis.data = msg.xAxis;//option.series[0].data = msg.yAxis[0];option.series[0].data = msg.yAxis;myChart.setOption(option, true);});return option;},initChart : function (myChart,option) {myChart.setOption(option);myChart.on('click',function(object){// 初始化var myChart = echarts.init(dom);$.ajax(type : 'get',//url : interfaceUrl + '&category=' + object.name, // 此处替换成写逻辑的地方,下面是我自己的url: "/category/getAllCategory.do?product="+object.productdataType : 'json',success : function (msg){option.xAxis.data = msg.xAxis;//option.series[0].data = msg.yAxis[0];option.series[0].data = msg.yAxis;myChart.setOption(option, true);});myChart.setOption(option, true);});},
};

处理逻辑

CategodyController.java

 @Controller@RequestMapping("/category")public class CategoryController{@RequestMapping("getAllCategory.do")public Map<String,Object> getCategory(){Map<String,Object> map = new HashMap<String,Object>();ResultBean result = getAllCategroy();result.put("xAxis",result.getCategory());result.put("yAixs",reulst.getValue());return result;}@RequestMapping("getCategoryByName.do")public Map<String,Object> getCategoryByName(String product){Map<String,Object> map = new HashMap<String,Object>();ResultBean result = getAllCategroyByName(product);result.put("xAxis",result.getCategory());result.put("yAixs",reulst.getValue());return result;}public ResultBean getAllCategory(){ResultBean result = new ResultBean();//查询要显示的数据 格式按 (商品项),这里根据自己的具体需要实现String[] names = getNames();//查询要显示的数据 数量，跟上面是一一对应的，这里根据自己的具体需要实现String[] values = getValues();result.setCategory(names);result.setValue(values);}public class ResultBean{private String[] categories;private String[] values;public String[] getCategory(){return this.cateGories;}public String[] getValue(){return this.values;}public void setCategory(String[] category){this.category = category;}public void setValue(String[] values){this.values= values;}}}

Echarts实现图表下钻相关推荐

echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...
JS实现Echarts的图表保存为图片功能
文章目录需求分析开发准备实现思路效果图参考链接需求分析实际项目开发过程中经常会有图表展示功能,同时为了满足用户需要,会附带着图表导出功能,主要形式就是保存为图片.在Echarts中本身就 ...
knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示三.require的 ...
ECharts 常用图表一看即会「散点图」「饼图」「地图」「雷达图」「仪表盘」
文接上篇 ECharts 入门知识 ECharts 入门真的很简单 ,本文继续介绍 ECharts 常用图表相关内容. 一.散点图散点图多用于推断不同维度数据之间的相关性,如下图判断身高体重相关性散 ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
echarts 实现图表缩放功能 dataZoom自带属性实现
echarts 实现图表缩放功能亲测有效,dataZoom自带属性实现图表数据过多展示起来密密麻麻看不到细节,需要实现缩放这确实是实现了缩放,但是需求是标尺进行缩放,我们可以添加如下属性图表数 ...
ECharts动态图表展示
1.首先简要的介绍一下Echarts: ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯javascript的图标库,兼容当前绝大多数浏览器,提供直观,生动,可交互, ...
Apache Echarts常用图表之柱状图
文章目录 Echarts常用图表柱状图 1. 柱状图的实现步骤 2. 柱状图的常见效果最大值\最小值 `markPoint` 平均值 `markLine` 数值显示 `label` 柱宽度 `ba ...
Chart.js与ECharts.js图表组件对比与使用
Chart.js与ECharts.js图表组件对比与使用常用的图表组件 Chart.js与ECharts.js的简要介绍与使用. Chart.js Chart.js官方网址.里面包括文档.例子和G ...

Echarts实现图表下钻

图片界面

drillDown.js

处理逻辑

Echarts实现图表下钻相关推荐

最新文章

热门文章