echarts图表，前端显示不出来
就是我在缝合两个项目的过程中，新项目前端展示不了图表了
```javascript
<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>
<hr class="star-primary">
<!-- img可替换为图表 -->
<!-- 图1 -->
<div id="main" style="width: 700px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
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: {
axisTick: {alignWithLabel: true},
axisLabel: {rotate: 45}
},
yAxis: {},
series: [{
name: '得分',
type: 'bar',
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
$('.main 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;
}
})
// 选中年份高亮
$('.main 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">
<!-- <li>Type:-->
<!-- <strong><a href="#">Bar Chart</a>-->
<!-- </strong>-->
<!-- </li>-->
<!-- <li>Date:-->
<!-- <strong><a href="#">April 2022</a>-->
<!-- </strong>-->
<!-- </li>-->
<!-- <li>Author:-->
<!-- <strong><a href="#">HHLH</a>-->
<!-- </strong>-->
<!-- </li>-->
</ul>
<!-- 底部关闭按钮 -->
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>
Close
</button>
</div>
</div>
</div>
</div>
该回答通过自己思路及引用到GPTᴼᴾᴱᴺᴬᴵ搜索,得到内容具体如下：
根据您提供的代码和截图，可能是由于您在HTML代码中没有正确引入ECharts库导致图表无法正常显示。
您需要在HTML代码中引入ECharts库，例如：
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
将上述代码添加到HTML文件中，确保ECharts库被正确加载。另外，您的JS代码中也需要正确绑定数据和配置项，使得图表能够正确显示。
以下是修改后的代码示例，您可以根据需要进行修改：
<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">
<!-- <li>Type:-->
<!-- <strong><a href="#">Bar Chart</a>-->
<!-- </strong>-->
<!-- </li>-->
<!-- <li>Date:-->
<!-- <strong><a href="#">April 2022</a>-->
<!-- </strong>-->
<!-- </li>-->
<!-- <li>Author:-->
<!-- <strong><a href="#">HHLH</a>-->
<!-- </strong>-->
<!-- </li>-->
</ul>
<!-- 底部关闭按钮 -->
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>
Close
</button>
</div>
</div>
</div>
</div>
希望这些修改能够帮助您解决问题。
如果以上回答对您有所帮助，点击一下采纳该答案～谢谢
正确引入echarts没有，控制台报错没有，dom有生成canvas元素没有
- 你可以看下这个问题的回答https://ask.csdn.net/questions/7458190
- 你也可以参考下这篇文章：echarts柱状图在顶端显示数值，并且数值为0时不展示。
- 除此之外, 这篇博客: Echarts重新加载数据但不重新渲染的原因和解决方法中的 ⼆、因此，重新加载数据但不重新渲染的原因 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
第⼀次渲染图表后，便有了ID，但是我们⾮第⼀次加载数据时，图表的_echarts_instance_属性值我们没有显式引⽤，所以此时，待渲染的图表
在原有的div容器中，匹配不到想要渲染的图表，则出现数据加载成功，但是不渲染的情况。- 您还可以看一下 童金浩老师的跟风舞烟学大数据可视化－Echarts从入门到上手实战课程中的 【大数据可视化技术：Echarts】课程目标小节, 巩固相关知识点