图标类看前面4期代码的控制台,各种黄色警告,也是不允许的。
今天来补坑喽。
框架基于:vue2,echart5.0.0
问题1:
原文:
log.js?3de6:61 [ECharts] DEPRECATED: textStyle hierarchy in axisLabel has been
removed since 4.0. All textStyle properties are configured in axisLabel directly now.
定位到代码:(错误展现在前4篇,有兴趣的朋友可以往回翻找找茬)
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.3)' // y轴字体颜色
}
},
修改为:
axisLabel: {
color: 'rgba(255,255,255,0.3)' // y轴字体颜色
},
问题2:
原文:
log.js?3de6:61 [ECharts] There is a chart instance already initialized on the dom.
定位到代码:(错误展现在前4篇,有兴趣的朋友可以往回翻找找茬)
initEchartsTwo () {
let StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
this.options && StickerPower.setOption(this.options)
},
修改为:
initEchartsTwo () {
let StickerPower = this.$echarts.getInstanceByDom(document.getElementById('StickerPower'))
if (StickerPower == null) {
StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
}
this.options && StickerPower.setOption(this.options)
},
还有一种来源于网络上的解法,暂时记录一下:
initEchartsTwo () {
let StickerPower = this.$echarts.getInstanceByDom(document.getElementById('StickerPower'))
// if (StickerPower == null) {
// StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
// }
if (StickerPower !== null && StickerPower !== '' && StickerPower !== undefined) {
StickerPower.dispose() // 解决echarts dom已经加载的报错
}
StickerPower = this.$echarts.init(document.getElementById('StickerPower'))
this.options && StickerPower.setOption(this.options)
},
问题3:
原文:
[ECharts] DEPRECATED: 'normal' hierarchy in label has been removed since 4.0. All style properties are configured in label directly now.
定位到代码:(错误展现在前面扇形图,有兴趣的朋友可以往回翻找找茬)
label: {
position: 'center',
normal: {
show: true,
fontSize: 12,
color: 'rgba(255,255,255,0.82)', // 设置文字颜色
lineHeight: 18,
extraCssText: 'width:60px; white-space:pre-wrap',
// 扇形图需求文字截断对齐
formatter: (e) => {
let newStr = ''
let start = 0// 开始截取位置
let end = 0// 截取结束位置
const namelen = e.name.length // 每个内容名称的长度
const maxname = 5// 每行显示的最大长度
const newrow = Math.ceil(namelen / maxname)// 显示行数
if (namelen > maxname) { // 如果名称长度大于每行最大显示长度,则
for (let i = 0; i < newrow; i++) { // 循环行数
let old = ''// 每次截取的字符
start = i * maxname// 截取的起点
end = start + maxname// 截取的终点
if (i === newrow - 1) { // 如果是最后一行
old = e.name.substring(start)
} else {
old = e.name.substring(start, end) + '\n'// 截取内容加换行
}
newStr += old// 拼接字符串
}
} else { // 否则不变显示
newStr = e.name
}
return newStr + '\n' + e.value
}
}
}
修改为:
label: {
position: 'center',
show: true,
fontSize: 12,
color: 'rgba(255,255,255,0.82)', // 设置文字颜色
lineHeight: 18,
extraCssText: 'width:60px; white-space:pre-wrap',
// 扇形图需求文字截断对齐
formatter: (e) => {
let newStr = ''
let start = 0// 开始截取位置
let end = 0// 截取结束位置
const namelen = e.name.length // 每个内容名称的长度
const maxname = 5// 每行显示的最大长度
const newrow = Math.ceil(namelen / maxname)// 显示行数
if (namelen > maxname) { // 如果名称长度大于每行最大显示长度,则
for (let i = 0; i < newrow; i++) { // 循环行数
let old = ''// 每次截取的字符
start = i * maxname// 截取的起点
end = start + maxname// 截取的终点
if (i === newrow - 1) { // 如果是最后一行
old = e.name.substring(start)
} else {
old = e.name.substring(start, end) + '\n'// 截取内容加换行
}
newStr += old// 拼接字符串
}
} else { // 否则不变显示
newStr = e.name
}
return newStr + '\n' + e.value
}
}
问题4:
还有个题外问题:
原文:
Error handling response: TypeError: self.processResponse is not a function
报错原因是因为开启了扩展程序 WhatRuns,关闭就不报错了。我这边关了还是存在,我就删除这个浏览器插件了:
终于没有黄色和红色的报错了,舒服了舒芙蕾~~~