版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36251118/article/details/87924230
//功能：下钻及返回
//下钻结构为：公司 -> 部门 -> 小组 -> 负责人
//点击柱子穿透时，记录当前查询条件，以及下一个接口url,及查询条件
//实现思路：
// 1、当前视图发生改变（即查询后），将当前查询参数保存在每一根柱子上
// 2、点击其中一根柱子，访问下一个接口，摧毁重构视图，将上一级视图的name显示在页面上作为访问记录，并将查询参数放入一个数组中，
// 也就是说，在二级视图中，当前数据结构为:[{name:公司，url:'',params:{}}]
// 3、当点击搜索过滤条件时，逻辑同第一步
// 当点击柱子时，逻辑同第二步，进入第三级视图 ,当前数据结构为:[{name:公司，url:'',params:{}}，{name:部门，url:'',params:{}}]
// 当点击上一步时，匹配数组中保存的查询参数，访问上一级接口，逻辑同第一步，并将一步对应的名称从页面上移除 ，当前数据结构为:[{name:公司，url:'',params:{}}]
// 当点击前两部时，匹配数组中保存的查询参数，访问上两级接口，逻辑同第一步，并将两步对应名称从页面上移除 ，当前数据结构为:[]
以下为模拟数据
<!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=''>返回</button>
</div>
<div id="container" style="height: 50%;width: 50%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
<script type="text/javascript" src="./jquery.min.js"></script>
<!-- <script type="text/javascript" src="./drillDown.js"></script> -->
<script type="text/javascript">
var chart = echarts.init(document.getElementById('container'));
//初始化绘制全国地图配置
option = {
title: {
text: '柱状图下钻',
left: 'center'
},
tooltip: {
trigger: 'axis', //坐标轴触发
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
// formatter: '{a} <br/>{b} : {c}'
},
toolbox: { //工具栏
feature: { //各工具配置项
dataView: {
show: true,
readOnly: false
}, //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
magicType: {
show: true,
type: ['bar', 'line']
}, //动态类型切换
saveAsImage: {
show: true
} //保存为图片
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
legend: {
left: 'left',
data: ['数量']
},
xAxis: {
type: 'category',
name: 'x',
splitLine: {
show: false
},
data: ['2015', '2016', '2017', '2018', '2019']
},
yAxis: {
type: 'value',
name: '数量'
},
breadcrumb: {
show: true,
}
};
function renderData(data) {
option.series = [{
name: '公司一',
type: 'bar',
label: { //图形上的文本标签
normal: {
show: true,
position: 'top'
},
},
itemStyle: {
normal: {
color: '#2ec7c9'
}
},
data: data.one
},
{
name: '公司二',
type: 'bar',
label: { //图形上的文本标签
normal: {
show: true,
position: 'top'
},
},
itemStyle: {
normal: {
color: '#2ec7c9'
}
},
data: data.two
},
{
name: '公司三',
type: 'bar',
label: { //图形上的文本标签
normal: {
show: true,
position: 'top'
},
},
itemStyle: {
normal: {
color: '#2ec7c9'
}
},
data: data.three
}
];
//渲染地图
chart.setOption(option);
}
//dataA 公司 dataB 部门 dataC 小组 dataD 负责人
var data = {
one: [{
value: 100,
url: "A.do"
}, //2015
{
value: 200,
url: "A.do"
}, //2016
{
value: 300,
url: "A.do"
}, //2017
{
value: 400,
url: "A.do"
}, //2018
{
value: 500,
url: "A.do"
} //2019
],
two: [{
value: 200,
url: "A.do"
}, //2015
{
value: 300,
url: "A.do"
}, //2016
{
value: 400,
url: "A.do"
}, //2017
{
value: 500,
url: "A.do"
}, //2018
{
value: 600,
url: "A.do"
} //2019
],
three: [{
value: 300,
url: "A.do"
}, //2015
{
value: 400,
url: "A.do"
}, //2016
{
value: 500,
url: "A.do"
}, //2017
{
value: 600,
url: "A.do"
}, //2018
{
value: 700,
url: "A.do"
} //2019
]
}
var dataB = {
one: [{
value: 10,
url: "B.do"
},
{
value: 20,
url: "B.do"
},
{
value: 30,
url: "B.do"
},
{
value: 40,
url: "B.do"
},
{
value: 50,
url: "B.do"
}
],
two: [{
value: 20,
url: "B.do"
},
{
value: 30,
url: "B.do"
},
{
value: 40,
url: "B.do"
},
{
value: 50,
url: "B.do"
},
{
value: 60,
url: "B.do"
}
],
three: [{
value: 30,
url: "B.do"
},
{
value: 40,
url: "B.do"
},
{
value: 50,
url: "B.do"
},
{
value: 60,
url: "B.do"
},
{
value: 70,
url: "B.do"
}
]
}
var dataC = {
one: [{
value: 10,
url: "C.do"
},
{
value: 20,
url: "C.do"
},
{
value: 30,
url: "C.do"
},
{
value: 40,
url: "C.do"
},
{
value: 50,
url: "C.do"
}
],
two: [{
value: 20,
url: "C.do"
},
{
value: 30,
url: "C.do"
},
{
value: 40,
url: "C.do"
},
{
value: 50,
url: "C.do"
},
{
value: 60,
url: "C.do"
}
],
three: [{
value: 15,
url: "C.do"
},
{
value: 30,
url: "C.do"
},
{
value: 45,
url: "C.do"
},
{
value: 60,
url: "C.do"
},
{
value: 75,
url: "C.do"
}
]
}
renderData(data);
chart.setOption(option);
var recordList = [];
//柱子点击事件
chart.on('click', function(params) {
if (params.data.url == "A.do") { //小组
if (recordList.indexOf("A.do") == -1) {
recordList.push("A.do");
}
renderData(dataB);
} else if (params.data.url == "B.do") { //负责人
if (recordList.indexOf("B.do") == -1) {
recordList.push("B.do");
}
renderData(dataC);
}
});
$('#return-button').on('click', function() {
var backUrl = $(this).data("url");
var currLevel = recordList[recordList.length - 1];
if (currLevel == "B.do") {
renderData(dataB);
recordList.pop();
} else if (currLevel == "A.do") {
renderData(data);
recordList.pop();
}
});
</script>
</body>
</html>