echarts在点击标签进行切换数据时,读取不到data(这是我移植过来的代码,原代吗中是可以运行的啊)
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<!-- 关闭按钮 -->
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<!-- 图表详细页面 -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>个人各项得分-柱状图
<a class="a-active" href="javascript:;">布莱克尼</a>
<a href="javascript:;">皮特森</a>
<a href="javascript:;">多米尼克-琼斯</a>
<a href="javascript:;">杰曼</a>
<a href="javascript:;">马尚-布鲁克斯</a>
</h2>
<hr class="star-primary">
<!-- img可替换为图表 -->
<!-- 图1 -->
<div id="main" style="width: 700px;height:400px;"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
<script type="text/javascript">
var RewardData = [
{
reward: '布莱克尼',
xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
data: [32.7,1.0,6.4,7.4,4.8,1.1]
},
{
reward: '皮特森',
xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
data: [28.7,1.3,5.8,7.1,5.9,2.0]
},
{
reward: '多米尼克-琼斯',
xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
data: [27.9,1.8,9.4,11.2,10.9,2.6]
},
{
reward: '杰曼',
xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
data: [24.2,0.5,4.8,5.3,3.7,1.1]
},
{
reward: '马尚-布鲁克斯',
xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
data: [23.4,1.2,6.3,7.5,5.9,1.4]
}
];
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: '个人各项得分'
},
tooltip: {},
xAxis: {
type: 'category',
data: ['得分', '前板','后板','篮板','助攻','抢断'],
axisTick: {alignWithLabel: true},
axisLabel: {rotate: 45}
},
yAxis: {},
series: [{
name: '得分',
type: 'bar',
data: RewardData[0].data
}]
};
myChart.setOption(option);
$('.modal-body h2 a').on('click', function () {
RewardData.map((item) => {
if (item.reward == $(this).text()) {
option.series[0].data = item.data;
option.series[0].name = item.reward;
option.xAxis.data=item.xdata;
}
})
// 选中年份高亮
$('.modal-body h2 a').removeClass('a-active');
$(this).addClass('a-active');
// 需要重新渲染
myChart.setOption(option);
});
</script>
<!-- 图1 -->
<!-- 图表详细介绍说明字段 -->
<br>
<p>
柱形图,又称长条图、柱状统计图,是一种以长方形的长度为变量的统计图表,用来比较两个或以上的价值(不同时间或者不同条件),只有一个变量,通常利用于较小的数据集分析。本图横轴为片名,纵轴为评分,清晰反映出了Top20的影片评分对比情况,用户可以根据评分高低来选择自己想看的电影。</p>
<!-- 3个li标签,可删除,可补充信息 -->
<ul class="list-inline item-details">
</ul>
<!-- 底部关闭按钮 -->
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
复制了你的代码,jQuery没导入,导入一切正常
看着没有什么问题,你把item.xdata这行先注释试试,这行代码可以不写 用来换换x轴名称的 我看你x轴的名称都是一样的不用换,你先注释了看看还报错吗,
而且看你好像没引入jq