<!---->
<template>
<div style="width: 95%;height: 82%;position: absolute">
<div id="checkOnWork" ref="checkOnWork" style="width: 100%;height: 100%;background: white"></div>
</div>
</template>
<script>
import { getDataLevelUserLoginNew, getDataLevelUserLogin } from '@/axios/axios'
import { isSuccess } from '@/lib/util'
export default {
name: 'demo',
data() {
return {}
},
mounted() {
this.getData()
},
methods: {
getData() {
const t = this
const data = {}
data._mt = 'aShiftRecordAnsrpt.getShiftMonthAnsrpt'
data.funId = '1'
data.logType = '考勤 - 公司'
getDataLevelUserLogin(data).then((res) => {
if (isSuccess(res, t)) {
if (res.data.content[0].hasOwnProperty('value')) {
let data1 = JSON.parse(res.data.content[0].value)
let dataX = []
let dataY = []
data1.forEach((item, index) => {
dataX.push(item.shiftType)
dataY.push(item.shiftCount)
})
this.getEchatsPies(dataX, dataY)
}
}
}).catch((err) => {
console.log(err)
})
},
getEchatsPies(dataX, dataY) {
let checkOnWork = this.$echarts.init(document.getElementById('checkOnWork'))
checkOnWork.setOption({
legend: {
orient: 'horizontal',
type: 'plain',
right: 30,
top: 0,
data: ['绩效分析'],
},
grid: {
top: '20%',
left: '3%',
right: '10%',
bottom: '3%',
containLabel: true,
},
// 提示框
tooltip: {
trigger: 'axis',
},
color: ['#f5d55d'],
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#dea7f9',
},
},
// 设置X轴数据旋转倾斜
axisLabel: {
rotate: 30,
interval: 0,
},
boundaryGap: false,
data: dataX,
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#90e0cf',
},
},
},
series: [
{
name: '员工考勤',
data: dataY,
type: 'line',
// 设置小圆点消失
// 注意:设置symbol: 'none'以后,拐点不存在了,设置拐点上显示数值无效
symbol: 'none',
// 设置折线弧度,取值:0-1之间
smooth: 0.5,
areaStyle: {},
},
],
})
},
},
}
</script>
错误提示:
在运行Vue项目时出现了上述错误,出现该错误的原因是Echarts的图形容器还未生成就对其进行了初始化所造成的,代码如上:
本身echats可以正常显示 但是由于axios得catch抛出了上图得异常
为了解决这个问题我就在调取 this.getEchatsPies(dataX, dataY)
加了 this.$nextTick(() => {});
t.$nextTick(() => {
this.getEchatsPies(dataX, dataY)
});
加完之后发现catch不在抛出异常 但是控制台还是会报错
为了解决这个 我把 用js获取元素得
document.getElementById('checkOnWork')
改为用Vue中自带得ref属性进行获取
this.$refs.checkOnWork
最终
let checkOnWork = this.$echarts.init(document.getElementById('checkOnWork'))
这样就完美的解决了报错得问题