echarts点击事件跳去其他页面
echarts点击事件跳去其他页面，或者是在该区域内展示新内容
总而言之，就是横坐标不是一个个人名吗，我想实现点击不同人名跳转至他们个人对应的其他内容（个人生平之类的）。可以是在当前那块区域更新，亦或是开新网页展示
(
function ()
{
var RewardData = [
{
reward: '最佳教练',
xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
data: [3, 1, 5, 2, 4, 4, 1, 2, 2]
},
{
reward: 'MVP',
xdata: ['刘泽', '江川', '张哲嘉', 'Edgar', '郑亮', '张利明'],
data: [1, 3, 1, 1, 1, 14]
},
{
reward: '最佳外援',
xdata: ['Yosvany', 'Marouflakrani', 'Leonardo'],
data: [1, 1, 2]
}
];
// 1.实例化对象
var myChart = echarts.init(document.querySelector(".bar .chart"));
// 2.指定配置项和数据
var option = {
color: ['#2f89cf'],
// 提示框组件
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
// 修改图表位置大小
grid: {
left: '0%',
top: '10px',
right: '0%',
bottom: '4%',
containLabel: true
},
// x轴相关配置
xAxis: [{
type: 'category',
data: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
axisTick: {
alignWithLabel: true
},
// 修改刻度标签，相关样式
axisLabel: {
color: "rgba(255,255,255,0.8)",
fontSize: 10
},
// x轴样式不显示
axisLine: {
show: false
}
}],
// y轴相关配置
yAxis: [{
type: 'value',
// 修改刻度标签，相关样式
axisLabel: {
color: "rgba(255,255,255,0.6)",
interval: 0,
fontSize: 12
},
// y轴样式修改
axisLine: {
lineStyle: {
color: "rgba(255,255,255,0.6)",
width: 2
}
},
// y轴分割线的颜色
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)"
}
}
}],
// 系列列表配置
series: [{
name: '直接访问',
type: 'bar',
barWidth: '35%',
// ajax传动态数据
data: [3, 1, 5, 2, 4, 4, 1, 2, 2],
itemStyle: {
// 修改柱子圆角
barBorderRadius: 5
}
}]
};
// 3.把配置项给实例对象
myChart.setOption(option);
// 4.让图表随屏幕自适应
window.addEventListener('resize', function () {
myChart.resize();
})
// 5.点击切换2020 和 2021 的数据
$('.bar h2 a').on('click', function () {
console.log($(this).text())
RewardData.map((item) => {
if (item.reward == $(this).text()) {
option.series[0].data = item.data;
option.series[0].name = item.reward;
option.xAxis[0].data=item.xdata;
}
})
// 选中年份高亮
$('.bar h2 a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
$('.typeList a').on('click',function(){
if($(this).text()=="折线"){
option.series[0].type="line";
}else{
option.series[0].type="bar";
}
// 选中年份高亮
$('.typeList a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
})();
这是对应代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>数据可视化</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<!-- 头部 -->
<header>
<h1>排球数据可视化</h1>
<div class="show-time"></div>
<script>
var t = null;
t = setTimeout(time, 1000); //开始运行
function time() {
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
document.querySelector(".show-time").innerHTML =
"当前时间：" +
y +
"年" +
mt +
"月" +
day +
"日-" +
h +
"时" +
m +
"分" +
s +
"秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
</header>
<!-- 页面主体 -->
<section class="mainbox">
<!-- 左侧盒子 -->
<div class="column">
<div class="panel line">
<h2>男排世界排名</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel bar">
<h2>男排历年得奖情况:
<a class="a-active" href="javascript:;">最佳教练</a>
<a href="javascript:;">MVP</a>
<a href="javascript:;">最佳外援</a>
<div id="main"></div>
<div class="typeList">
<a href="#">折线</a>
<a href="#">柱形</a>
</h2>
<!-- 图表放置盒子 -->
<div class="chart"></div>
<!-- 伪元素绘制盒子下边角 -->
<div class="panel-footer"></div>
</div>
<div class="panel bar3">
<h2>2019女排世界杯得分数据</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
<!-- 中间盒子 -->
<div class="column">
<!-- 头部 no模块 -->
<div class="no">
<div class="no-hd">
<ul>
<li> 1 </li>
<li>00320</li>
</ul>
</div>
<div class="no-bd">
<ul>
<li>中国排球排名</li>
<li>中国排球总分</li>
</ul>
</div>
</div>
<!-- map模块 -->
<div class="map">
<div class="map1"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="chart"></div>
</div>
</div>
<!-- 右侧盒子 -->
<div class="column">
<div class="panel line2">
<h2>女排世界排名</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
<div class="panel newbar">
<h2>女排历年得奖情况:
<a class="a-active" href="javascript:;">最佳教练</a>
<a href="javascript:;">MVP</a>
<a href="javascript:;">最佳二传</a>
</h2>
<!-- 图表放置盒子 -->
<div class="chart"></div>
<!-- 伪元素绘制盒子下边角 -->
<div class="panel-footer"></div>
</div>
<div class="panel pie2">
<h2>历年女排家乡统计</h2>
<div class="chart"></div>
<div class="panel-footer"></div>
</div>
</div>
</section>
<script src="js/flexible.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/jquery.js"></script>
<!-- 引入china.js 完成地图模块 -->
<script src="js/china.js"></script>
<script src="js/index.js"></script>
</body>
</html>
要实现echarts点击横坐标跳转页面，可以使用echarts的事件处理函数和JavaScript的window.location.href属性。
第一，在echarts的option中设置x轴的axisLabel的click事件，例如：
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
axisLabel: {
interval: 0,
rotate: 45,
clickable: true, // 设置可点击
formatter: function (value) {
return value;
}
}
}
然后，在echarts的事件处理函数中获取点击的横坐标值，并使用window.location.href属性跳转到相应的页面，例如：
myChart.on('click', function (params) {
if (params.componentType === 'xAxis') { // 判断点击的是否为x轴
var xAxisValue = params.value; // 获取点击的横坐标值
window.location.href = 'http://example.com/' + xAxisValue; // 跳转到相应的页面
}
});
注意，上述代码中的'http://example.com/'应该替换为实际的页面地址。
- 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7767784
- 这篇博客你也可以参考下：echarts如何画一个空心的饼图
- 除此之外, 这篇博客: 数据可视化中的 为 ECharts 准备一个定义了宽高的 DOM 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
- 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点
首先获取到你的echarts dom，给他添加点击事件，当中的params就是你点击的当前的值，params里面有个name，就是你的横坐标，然后根据不同的值，展示不同的数据
