关于#echarts#的问题，如何解决？
假设有这样三组数据
最佳教练:
x:['李牧','刘旭东','沈琼']
y:['1','0','2']
MVP:
x:['李牧1','刘旭东1','沈琼1']
y:['11','01','21']
最佳外援:
x:['李牧2','刘旭东2','沈琼2']
y:['12','02','22']
我想要他们在同一张echarts折线表中，通过点击事件在M V P 三个折线图之间切换
类似于这样
最好参考这种类型的代码
// 5.点击切换2020 和 2021 的数据
$('.bar h2 a').on('click', function () {
// console.log($(this).index());
// 点击a 之后 根据当前a的索引号 找到对应的 RewardData 相关对象
// console.log(yearData[$(this).index()]);
var obj = RewardData[$(this).index()];
option.series[0].data = obj.data[0];
option.series[1].data = obj.data[1];
// 选中年份高亮
$('.bar h2 a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.chart {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="main"></div>
<div class="bar">
<h2>
<a href="#">最佳教练</a>
</h2>
<h2>
<a href="#">MVP</a>
</h2>
<h2>
<a href="#">最佳外援</a>
</h2>
<div class="chart"></div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
var RewardData = [
{
reward: '最佳教练',
// xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
data: [1, 2, 3, 4, 5, 6, 7, 8, 9]
},
{
reward: 'MVP',
// xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
data: [1, 9, 3, 4, 5, 6, 7, 8, 9]
},
{
reward: '最佳外援',
// xdata: ['李牧', '刘旭东', '沈琼', '王健', '鞠根寅', '沈富麟', '吴卫', '薛永业', '杨礼康'],
data: [1, 2, 3, 4, 5, 6, 7, 7, 9]
}
];
// -------------------------------------------------------中国男排历年得奖情况开始-----------------------------------------------------------------------------
(function () {
// 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;
}
})
// 选中年份高亮
$('.bar h2 a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
})
})();
</script>
</html>
let x,y,clickValue;
if(clickValue === '最佳教练'){
x=['李牧','刘旭东','沈琼']
y=['1','0','2']
}else if(clickValue === 'MVP'){
x=['李牧1','刘旭东1','沈琼1']
y=['11','01','21']
}else if(clickValue === '最佳外援'){
x=['李牧2','刘旭东2','沈琼2']
y=['12','02','22']
}
let option = {
xAxis:{
data:x
}
series:{
data:y
}
}
myChart.setOption(option);
可以参考这份伪代码