echarts读取不到数据

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>


img

复制了你的代码,jQuery没导入,导入一切正常

看着没有什么问题,你把item.xdata这行先注释试试,这行代码可以不写 用来换换x轴名称的 我看你x轴的名称都是一样的不用换,你先注释了看看还报错吗,

而且看你好像没引入jq