echarts柱状图渲染时报错了
index.vue:40 Error: yAxis "0" not found
at cartesian2d (chunk-2FCUO4Z4.js?v=83b4ca6a:25842:15)
at getCoordSysInfoBySeries (chunk-2FCUO4Z4.js?v=83b4ca6a:25829:5)
at createSeriesData (chunk-2FCUO4Z4.js?v=83b4ca6a:26080:22)
at BarSeriesModel2.getInitialData (echarts.js?v=83b4ca6a:4268:14)
at SeriesModel2.init (chunk-2FCUO4Z4.js?v=83b4ca6a:18336:23)
at GlobalModel2.<anonymous> (chunk-2FCUO4Z4.js?v=83b4ca6a:19886:30)
at Array.forEach (<anonymous>)
at each (chunk-2FCUO4Z4.js?v=83b4ca6a:391:9)
at GlobalModel2.visitComponent (chunk-2FCUO4Z4.js?v=83b4ca6a:19830:9)
at entity.topologicalTravel (chunk-2FCUO4Z4.js?v=83b4ca6a:14711:18)
报错代码
<template>
<div class="echarts1" ref="echarts">
</div>
</template>
<script>
import {FontChart} from '@/utils/utils'
import * as echarts from "echarts"
import {inspectionMaintenanceStatus} from "@/api/api/pipelineOverview.js";
export default {
name: 'echarts1',
components: {},
props: {
id: {
type: String,
default() {
return ''
}
}
},
data() {
return {
list: [],
}
},
mounted() {
var that = this;
this.getData();
},
methods: {
async getData() {
try {
const res = await inspectionMaintenanceStatus();
this.list = res.data;
console.log(res.data)
this.drawEcharts();
} catch (err) {
console.error(err);
}
},
drawEcharts() {
var that = this
var data = this.list
console.log(data)
let myChart = echarts.init(this.$refs.echarts)
window.addEventListener('resize', this.drawEcharts)
var option = {
legend: {
top: 5,
left: 'center',
itemWidth: 14,
itemHeight: 6,
textStyle: {
color: 'rgba(255, 255, 255, 1)',
fontSize: '12'
},
},
grid: {
top: '50px',
bottom: '10px',
left: '20px',
right: '10px',
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
shadowStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(220, 239, 238, 0.1)'
}, {
offset: 1,
color: 'rgba(220, 239, 238, 0.5)'
}], false),
}
}
},
xAxis: [
{
data: data.map(obj => obj.name),
axisLabel: {
margin: 10,
color: 'rgba(143, 173, 204, 1)',
textStyle: {
fontSize: 13,
},
},
axisLine: {
lineStyle: {
color: '#0a2544',
width: 1
}
},
splitLine: {
show: false,
lineStyle: {
color: 'rgba(30, 62, 104, 0.66)',
width: 1,
}
},
axisTick: {
show: false
},
}],
yAxis: [
{
axisLabel: {
color: 'rgba(143, 173, 204, 1)',
textStyle: {
fontSize: FontChart(14),
},
},
axisLine: {
show: false,
lineStyle: {
color: '#0a2544',
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#072a7b',
width: 1,
type: 'dashed'
}
}
}],
series: [
{
name: '巡检完成率',
type: 'bar',
data: this.list.map(obj => obj.value),
barWidth: '10',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(11, 224, 166, 0.52)'
}, {
offset: 1,
color: 'rgba(11, 224, 166, 0.2)'
}], false),
}
},
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [10, 3], // 设置扁圆的宽和高
itemStyle: {
color: 'rgba(11, 224, 166, 1)' // 圆盘颜色
},
data: this.list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value + 1 // 柱子的值加上一些偏移量
}))
}
},
{
name: '维保完成率',
type: 'bar',
yAxisIndex: 1,
data: this.list.map(obj => obj.value2),
barWidth: '10',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(8, 142, 227, 0.52)'
}, {
offset: 1,
color: 'rgba(8, 142, 227, 0.2)'
}], false),
}
},
markPoint: {
symbol: 'path://M62 62h900v900h-900v-900z', // 使用 SVG path 绘制扁圆形状
symbolSize: [10, 3], // 设置扁圆的宽和高
itemStyle: {
color: 'rgba(8, 142, 227, 1)' // 圆盘颜色
},
data: this.list.map((obj, index) => ({
xAxis: index, // 对应柱子的横坐标
yAxis: obj.value2 + 1 // 柱子的值加上一些偏移量
}))
}
},
]
}
myChart.clear();
myChart.resize();
myChart.setOption(option);
},
}
}
</script>
<style lang="scss" scoped>
.echarts1 {
position: relative;
width: 100%;
height: 100%;
}
</style>
错误信息 Error: yAxis "0" not found 指出了问题所在：在配置ECharts图表时，某个系列（series）指定了一个不存在的Y轴（yAxis）索引。在你的代码中，有两个系列（series），但只配置了一个Y轴（yAxis）。如果你想要每个系列使用不同的Y轴，你需要配置两个Y轴对象。如果所有系列都使用同一个Y轴，那么你不需要指定yAxisIndex。
解决方案
如果你打算让两个系列共用一个Y轴：
- 移除或注释掉第二个系列（
维保完成率）中的yAxisIndex: 1,行。 - 确保
yAxis配置只有一个对象，适用于所有系列。
如果你打算为每个系列使用不同的Y轴：
- 保留
yAxisIndex配置，确保第一个系列使用yAxisIndex: 0（这是默认值，可以省略），第二个系列使用yAxisIndex: 1。 - 在
yAxis配置中添加第二个Y轴对象。这意味着yAxis应该是一个包含两个对象的数组，每个对象配置一个Y轴。
示例代码
共用一个Y轴：
yAxis: {
axisLabel: {
color: 'rgba(143, 173, 204, 1)',
textStyle: {
fontSize: FontChart(14),
},
},
axisLine: {
show: false,
lineStyle: {
color: '#0a2544',
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#072a7b',
width: 1,
type: 'dashed'
}
}
},
使用不同的Y轴：
yAxis: [
{
// 第一个Y轴的配置
axisLabel: {
color: 'rgba(143, 173, 204, 1)',
textStyle: {
fontSize: FontChart(14),
},
},
axisLine: {
show: false,
lineStyle: {
color: '#0a2544',
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#072a7b',
width: 1,
type: 'dashed'
}
}
},
{
// 第二个Y轴的配置（可以与第一个Y轴有不同的配置）
axisLabel: {
color: 'rgba(143, 173, 204, 1)',
textStyle: {
fontSize: FontChart(14),
},
},
axisLine: {
show: false,
lineStyle: {
color: '#0a2544',
}
},
axisTick: {
show: false
},
splitLine: {
show: true,
lineStyle: {
color: '#072a7b',
width: 1,
type: 'dashed'
}
}
}
],
确保根据你的实际需求选择合适的解决方案，并相应地调整series和yAxis的配置。
