Echarts 柱状图表三级下钻
求个柱状图表 三级下钻的案例：
【点击一级图表柱子名称，进入 二级图表； 二级图表中，再点击本图层的柱子名称，进入三级图表，每层有返回上一级图表的 返回 按钮】重点在咋区分，点击事件 是在 一级图表还是二级图表
实现：BootStrap + Echatrts:
源数据大概如下：
//一级：
//一级caseName01的value值16 是这个caseName01这条case下，每个version的值的总和（10+4+2）
data=[
{Name:caseName01，
value:16},
{Name:caseName02，
value:6},
{Name:caseName03，
value:9}
]
//二级（点击一级的caseName01，进到对应caseName的二级的数据图表集）：
//二级图表Version01的value 10，和三级图表中这个version对应的UE value的总和（7+2+1）对应
data2=[
{Version:verison01，
value:10},
{Version:verison02，
value:4},
{Version:verison03，
value:2}
]
//三级（点击二级的version01,进到三级的数据图表集）：
data3=[
{UE:UE01，
value:7},
{UE:UE01
value:2},
{UE:UE01
value:1}
]
已解决任意时候点击都能保证下钻或者返回正确，试试我的代码案例，有返回按钮，html没有变，修改版在下面js代码里，希望能帮到你，
html代码
<div class="container">
<h1>Echarts 柱状图表三级下钻</h1>
<div id="chartContainer" style="height: 400px;"></div>
<button id="backButton" style="display: none;">返回</button>
</div>
js代码：
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
const chartContainer = document.getElementById('chartContainer');
const backButton = document.getElementById('backButton');
let currentLevel = 1; // 当前层级
let currentCategory = null; // 当前点击的分类
let currentSubcategory = null; // 当前点击的子分类
const level1Data = [
{ name: 'Category 1', value: 100 },
{ name: 'Category 2', value: 200 },
{ name: 'Category 3', value: 300 },
];
const level2Data = {
"Category 1": [
{ name: 'Subcategory 1-1', value: 50 },
{ name: 'Subcategory 1-2', value: 70 },
],
"Category 2": [
{ name: 'Subcategory 2-1', value: 80 },
{ name: 'Subcategory 2-2', value: 120 },
],
"Category 3": [
{ name: 'Subcategory 3-1', value: 150 },
{ name: 'Subcategory 3-2', value: 200 },
]
};
const level3Data = {
"Subcategory 1-1": [
{ name: 'Data 1', value: 10 },
{ name: 'Data 2', value: 20 },
],
"Subcategory 1-2": [
{ name: 'Data 3', value: 30 },
{ name: 'Data 4', value: 40 },
],
"Subcategory 2-1": [
{ name: 'Data 5', value: 50 },
{ name: 'Data 6', value: 60 },
],
"Subcategory 2-2": [
{ name: 'Data 7', value: 70 },
{ name: 'Data 8', value: 80 },
],
"Subcategory 3-1": [
{ name: 'Data 9', value: 90 },
{ name: 'Data 10', value: 100 },
],
"Subcategory 3-2": [
{ name: 'Data 11', value: 110 },
{ name: 'Data 12', value: 120 },
],
};
const chart = echarts.init(chartContainer);
const renderChart = (data, title, color) => {
const option = {
title: {
text: title,
},
tooltip: {},
xAxis: {
type: 'category',
data: data.map(item => item.name),
},
yAxis: {},
series: [{
type: 'bar',
data: data.map(item => item.value),
itemStyle: {
color: color,
}
}],
};
chart.setOption(option);
// 下钻点击事件
};
renderChart(level1Data, '一级图表', '#5470C6');
chart.on('click', function(params) {
if (currentLevel === 1) {
currentLevel = 2;
currentCategory = params.name;
console.log("测试1进"+currentLevel)
renderChart(level2Data[params.name], '二级图表', '#91CC75');
backButton.style.display = 'inline-block'; // 显示返回按钮
}
else if (currentLevel === 2) {
currentLevel = 3;
currentSubcategory = params.name;
console.log("测试2进"+currentLevel)
renderChart(level3Data[currentSubcategory], '三级图表', '#FFB980');
backButton.style.display = 'inline-block'; // 显示返回按钮
}
});
// 返回按钮点击事件
backButton.addEventListener('click', function() {
if (currentLevel === 2) {
currentLevel = 1;
currentCategory = null; // 当前点击的分类
currentSubcategory = null; // 当前点击的子分类
renderChart(level1Data, '一级图表', '#5470C6');
backButton.style.display = 'none'; // 隐藏返回按钮
} else if (currentLevel === 3) {
currentLevel = 2;
renderChart(level2Data[currentCategory], '二级图表', '#91CC75');
backButton.style.display = 'inline-bloc'; // 显示返回按钮
}
});
});
</script>
有帮互助的话 采纳一下呦
,三级下钻柱状图的实现思路如下:
- 一级柱状图,显示caseName和value,绑定点击事件
- 二级柱状图,显示Version和value,绑定点击事件
- 三级柱状图,显示UE和value
关键是使用点击事件中的e.name属性来区分点击的是一级还是二级柱状图。
示例代码:
js
// 一级柱状图
var chart1 = echarts.init(document.getElementById('chart1'));
chart1.setOption({
xAxis: {
data: data.map(d => d.Name)
},
series: [{
name: 'value',
data: data.map(d => d.value)
}],
tooltip: {
trigger: 'axis'
}
});
// 点击事件判定一级名称
chart1.on('click', params => {
if (params.name) {
// 绘制二级图表
drawChart2(params.name);
}
});
// 二级柱状图
function drawChart2(name) {
// 过滤数据
var data2 = getData2ByName(name);
var chart2 = echarts.init(document.getElementById('chart2'));
chart2.setOption({
// 类似一级图表配置
xAxis: {
data: data2.map(d => d.Version)
},
series: [{
data: data2.map(d => d.value)
}],
});
// 点击事件判定二级名称
chart2.on('click', params => {
if (params.name) {
drawChart3(params.name);
}
});
}
// 绘制三级图表
function drawChart3(version) {
// 过滤三级数据
var data3 = getData3ByVersion(version);
var chart3 = echarts.init(document.getElementById('chart3'));
// 配置三级图表
// 添加返回按钮
var btn = document.createElement('button');
btn.innerText = '返回';
btn.onclick = () => {
chart2.show();
chart3.hide();
}
// 切换显示隐藏
chart3.show();
chart2.hide();
}
通过点击事件中的name参数,可以区分点击的是一级还是二级柱状图,并传入不同的参数绘制下一级图表。
完美实现
准备用什么框架啊？就是说准备用什么语言写啊？
兄弟 你的数据结构 是tree吧， 数据结构是有关联id的， 说到这里是不是你就会搞了， 如有帮助给个采纳谢谢
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
下面是一个使用 Bootstrap 和 Echarts 实现柱状图三级下钻的案例。点击一级图表中的柱子名称，会进入对应的二级图表中；在二级图表中点击柱子名称，则进入对应的三级图表中。每个图表中都有一个返回按钮，可以返回上一级图表。
HTML 代码：
<div id="chart-container"></div>
JavaScript 代码：
// 一级图表数据
var data = [
{name: 'caseName01', value: 16},
{name: 'caseName02', value: 6},
{name: 'caseName03', value: 9}
];
// 二级图表数据
var data2 = [
{version: 'version01', value: 10},
{version: 'version02', value: 4},
{version: 'version03', value: 2}
];
// 三级图表数据
var data3 = [
{ue: 'UE01', value: 7},
{ue: 'UE02', value: 2},
{ue: 'UE03', value: 1}
];
// 创建一级图表
var chart = echarts.init(document.getElementById('chart-container'));
chart.setOption({
title: {text: '一级图表'},
xAxis: {type: 'category', data: data.map(item => item.name)},
yAxis: {type: 'value'},
series: [{
type: 'bar',
data: data.map(item => item.value),
itemStyle: {color: '#2f4554'},
emphasis: {itemStyle: {color: '#61a0a8'}},
label: {show: true, position: 'top'}
}]
});
// 点击一级图表中的柱子名称，进入对应的二级图表
chart.on('click', function(params) {
var name = params.name;
var value = params.value;
var data2_filtered = data2.filter(item => item.version.startsWith(name));
var chart2 = echarts.init(document.getElementById('chart-container'));
chart2.setOption({
title: {text: '二级图表'},
xAxis: {type: 'category', data: data2_filtered.map(item => item.version)},
yAxis: {type: 'value'},
series: [{
type: 'bar',
data: data2_filtered.map(item => item.value),
itemStyle: {color: '#2f4554'},
emphasis: {itemStyle: {color: '#61a0a8'}},
label: {show: true, position: 'top'}
}]
});
// 返回按钮
chart2.on('click', function(params) {
chart2.dispose(); // 销毁当前图表
chart.setOption({}); // 清空当前图表数据
chart.setOption({title: {text: '一级图表'}});
chart.setOption({
xAxis: {type: 'category', data: data.map(item => item.name)},
yAxis: {type: 'value'},
series: [{
type: 'bar',
data: data.map(item => item.value),
itemStyle: {color: '#2f4554'},
emphasis: {itemStyle: {color: '#61a0a8'}},
label: {show: true, position: 'top'}
}]
});
});
});
// 点击二级图表中的柱子名称，进入对应的三级图表
chart2.on('click', function(params) {
var version = params.name;
var value = params.value;
var data3_filtered = data3.filter(item => item.ue.startsWith(version));
var chart3 = echarts.init(document.getElementById('chart-container'));
chart3.setOption({
title: {text: '三级图表'},
xAxis: {type: 'category', data: data3_filtered.map(item => item.ue)},
yAxis: {type: 'value'},
series: [{
type: 'bar',
data: data3_filtered.map(item => item.value),
itemStyle: {color: '#2f4554'},
emphasis: {itemStyle: {color: '#61a0a8'}},
label: {show: true, position: 'top'}
}]
});
// 返回按钮
chart3.on('click', function(params) {
chart3.dispose(); // 销毁当前图表
chart2.setOption({}); // 清空当前图表数据
chart2.setOption({
title: {text: '二级图表'},
xAxis: {type: 'category', data: data2_filtered.map(item => item.version)},
yAxis: {type: 'value'},
series: [{
type: 'bar',
data: data2_filtered.map(item => item.value),
itemStyle: {color: '#2f4554'},
emphasis: {itemStyle: {color: '#61a0a8'}},
label: {show: true, position: 'top'}
}]
});
// 返回按钮
chart2.on('click', function(params) {
chart2.dispose(); // 销毁当前图表
chart.setOption({}); // 清空当前图表数据
chart.setOption({title: {text: '一级图表'}});
chart.setOption({
xAxis: {type: 'category', data: data.map(item => item.name)},
yAxis: {type: 'value'},
series: [{
type: 'bar',
data: data.map(item => item.value),
itemStyle: {color: '#2f4554'},
emphasis: {itemStyle: {color: '#61a0a8'}},
label: {show: true, position: 'top'}
}]
});
});
});
});
在上述代码中，首先创建了一级图表，当用户点击一级图表中的柱子名称时，会进入对应的二级图表。在二级图表中，当用户点击柱子名称时，会进入对应的三级图表。每个图表中都有一个返回按钮，可以返回上一级图表。该代码使用 Echarts 的事件监听机制实现了图表的交互，同时使用 Bootstrap 实现了页面的布局。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
TechWhizKid参考GPT回答：
在HTML中设置一个容器来容纳图表：
<!DOCTYPE html>
<html>
<head>
<title>ECharts</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.chart{
width: 70%;
height: 70%;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="chart" id="main"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0/echarts-en.min.js"></script>
<script src="yourJSfile.js"></script> <!-- replace 'yourJSfile' with your actual JS file name -->
</body>
</html>
然后创建一个JavaScript文件，实现图表的下钻功能：
var myChart = echarts.init(document.getElementById('main'));
// 第一级数据
var data1 = [
{name: 'caseName01', value: 16},
{name: 'caseName02', value: 6},
{name: 'caseName03', value: 9}
];
// 第二级数据
var data2 = {
'caseName01': [
{name: 'version01', value: 10},
{name: 'version02', value: 4},
{name: 'version03', value: 2}
],
// ...其他case的数据
};
// 第三级数据
var data3 = {
'caseName01': {
'version01': [
{name: 'UE01', value: 7},
{name: 'UE02', value: 2},
{name: 'UE03', value: 1}
],
// ...其他version的数据
},
// ...其他case的数据
};
var currentData = data1;
var currentLevel = 1;
var currentCase, currentVersion;
function createGraph() {
var option = {
xAxis: {
type: 'category',
data: currentData.map(function (item) {
return item.name;
})
},
yAxis: {
type: 'value'
},
series: [{
data: currentData.map(function (item) {
return item.value;
}),
type: 'bar'
}]
};
myChart.setOption(option);
}
myChart.on('click', function (params) {
if (currentLevel === 1) {
currentCase = params.name;
currentData = data2[currentCase];
currentLevel = 2;
} else if (currentLevel === 2) {
currentVersion = params.name;
currentData = data3[currentCase][currentVersion];
currentLevel = 3;
}
createGraph();
});
// 初始加载图表
createGraph();
注意，这只是一个基础示例，只实现了下钻功能，但并未实现返回功能。
可以通过使用JavaScript库如Echarts和Bootsrap来实现。以下是一个基本的实现思路：
1、数据准备: 首先，你需要准备你的源数据。根据你的描述，你可能需要将你的数据结构化为如下形式：
let data = [
{name: 'caseName01', value: 16},
{name: 'caseName02', value: 6},
{name: 'caseName03', value: 9},
];
let data2 = [
{version: 'verison01', value: 10},
{version: 'verison02', value: 4},
{version: 'verison03', value: 2},
];
let data3 = [
{ue: 'UE01', value: 7},
{ue: 'UE02', value: 2},
{ue: 'UE03', value: 1},
];
2、页面设计: 使用Bootstrap设计你的页面。首先，你可能需要一个顶级的菜单，显示一级图表的数据。当用户点击一级图表的柱子时，页面可以跳转到二级图表。在二级图表中，你可以显示二级图表的数据。同样，当用户点击二级图表的柱子时，页面可以跳转到三级图表。在每个图表下面，你可以添加一个“返回”按钮，允许用户返回到前一个级别的图表。
3、使用Echarts创建图表: 使用Echarts创建你的柱状图。你可以在每个图表中使用Echarts的tooltip和dataZoom功能，以便用户可以获取每个柱子的详细信息。
4、事件处理: 最后，你需要添加事件处理程序，以便在用户点击柱子或“返回”按钮时，可以更新你的图表和页面。你可以使用Echarts的on方法来添加事件处理程序。例如：
myChart.on('click', function (params) {
// 处理点击事件，更新图表和页面
});
5、实现三级下钻: 要实现三级下钻，你需要根据用户在每个图表中的点击来更新数据和图表。例如，当用户在顶层图表中点击一个柱子时，你可以显示对应的二级图表。当用户在二级图表中点击一个柱子时，你可以显示对应的三级图表。你需要根据用户的点击来选择要显示的数据，并更新图表。
6、添加返回按钮: 在每个图表下面，你可以添加一个“返回”按钮，允许用户返回到前一个级别的图表。你可以在每个按钮上添加一个事件处理程序，当用户点击按钮时，你可以更新页面和图表，返回到前一个级别。
点击setOption对应的数据即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#chart {
width: 800px;
height: 600px;
margin: 20px auto;
}
</style>
</head>
<body>
<button id="back_btn">返回</button>
<div id="chart"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
<script>
var data = [
{ name: 'caseName01', value: 16 },
{ name: 'caseName02', value: 6 },
{ name: 'caseName03', value: 9 }
]
var data1 = [
{ version: 'verison01', value: 10 },
{ version: 'verison02', value: 4 },
{ version: 'verison03', value: 2 }
]
var data2 = [
{ ue: 'UE01', value: 7 },
{ ue: 'UE02', value: 2 },
{ ue: 'UE03', value: 1 }
]
var curLevel = 1 // 当前层级
// 初始渲染
var chart = echarts.init(document.getElementById('chart'))
renderChart(data, 'name')
// 图表点击
chart.on('click', function(e) {
if (e.name === 'caseName01') {
curLevel = 2
renderChart(data1, 'version')
}
if (e.name === 'verison01') {
curLevel = 3
renderChart(data2, 'ue')
}
})
var backBtn = document.getElementById('back_btn')
backBtn.onclick = function() {
if (curLevel === 3) {
curLevel = 2
renderChart(data1, 'version')
} else if (curLevel === 2) {
curLevel = 1
renderChart(data, 'name')
}
}
/**
* @description: 渲染图表函数
* @param {Array} data 渲染数据
* @param {String} nameKey xAxis.data的key
* @return {void}
*/
function renderChart(data, nameKey) {
chart.setOption({
xAxis: {
type: 'category',
data: data.map(item => item[nameKey])
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: data.map(item => item.value)
}
]
})
}
</script>
</body>
</html>