在VUE后台管理项目中使用echarts出现了不报错误也不显示图例(设置的宽和ref),总共三个图,只显示第一个图。 下面是部分代码,求指教。
三个图标的HTML
<el-card style="height: 280px;">
<div style="height: 280px;" ref="echars"></div>
<!-- ref用来后期获取当前的DOM节点 -->
</el-card>
<div class="graph">
<el-card style="height: 265px;">
<div style="height: 245px;" ref="userEcharts"></div>
</el-card>
<el-card style="height: 265px;">
<div style="height: 245px;" ref="videoEcharts"></div>
</el-card>
</div>
以下是JS部分(第二个柱状图不显示)
//用户图
const userOption = {
user: {
legend: {
// 图例文字颜色
textStyle: {
color: "#333",
}
},
grid: {
left: "20%",
},
// 提示框
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category", // 类目轴
data: data.userData.map(item => item.date),
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
axisLabel: {
interval: 0,
color: "#333",
},
},
yAxis: [
{
type: "value",
axisLine: {
lineStyle: {
color: "#17b3a3",
},
},
},
],
color: ["#2ec7c9", "#b6a2de"],
series: [
{
name:'新增用户',
data: data.userData.map(item => item.new),
type:'bar'
},
{
name:'活跃用户',
data: data.userData.map(item => item.active),
type:'bar'
}
],
},
}
const U = echars.init(this.$refs.userEcharts)
U.setOption(userOption)
(饼图不显示)
const videoOption = {
video: {
tooltip: {
trigger: "item",
},
color: [
"#0f78f4",
"#dd536b",
"#9462e5",
"#a6a6a6",
"#e1bb22",
"#39c362",
"#3ed1cf",
],
series: [],
},
series:[
{
data:data.videoData,
type:'pie'
}
],
}
const V = echars.init(this.$refs.videoEcharts)
V.getOption(videoOption)
之前简单写过一遍文章 Vue中使用echarts案例,你看下 https://blog.csdn.net/hl_qianduan/article/details/118656649
已经解决了,非常感谢。
原因是因为 我在定义的userOption、videoOption 中添加了对象 user{} 和video{} 对象 ,没有引用对象,将这两个对象删除后,所有正常引用 。。。 在饼图中将set打成get echarts 拼写错误,这些都是要注意的点。