图片界面
<!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.product
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);
}
);
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实现图表下钻分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/28172.html
