饼状图legend属性(菜单标签)文字以中间值换行 legend: { type: 'scroll', // 让其可以滚动 orient: 'vertical', // 标签页 top: '10%', // 位置 left: '70%', // 位置 itemWidth: 22, // 宽 itemHeight: 13, // 高 formatter: (val) => { // 首先查看这里的值(val) 是什么形式 我这里是string // 换行操作 if (val.length > 6) { if (val.length % 2 == 0) { return ( val.slice(0, val.length / 2) + '\n' + val.slice(val.length / 2) ) } else { return ( val.slice(0, (val.length - 1) / 2) + '\n' + val.slice((val.length - 1) / 2) ) } } else { return val } } },
"TypeError: Cannot read property 'getAttribute' of null"的问题 有两种情况
第一种是直接使用echarts在出现这种错误
第二种就是使用echarts并且在容器上使用了v-if出现这种情况
第一种的方法：
1、 使用将获取节点的方法document.getElementById()的方式更换使用vue的ref与$refs来进行获取图表容器节点
mounted() {
this.myEcharts();
},
methods: {
myEcharts() {
//var Echarts = document.getElementById('Echarts');
var Echarts = this.$refs.Echarts;
// 将之前的方法更换为$refs来进行获取
// 在进行判断当前节点存在后进行echarts图表数据的填写
if (Echarts){
console.log('bar_dv不为空');
let myChart = this.$echarts.init(Echarts)
图表代码 ...
}
}
}
2、正常开发难免调用接口返回数据渲染，可能更改为ref与$refs的方法不能完全解决这个问题。这个时候就可以在async await接口之后，这ref与$refs的方法的基础上添加一个定时器来延时执行
mounted() {
// 进入页面请求数据
this.myData();
},
methods: {
async myData(){
let {code, data, msg } = await myData()
if(code == 200){
this.xxx = data
// 数据请求成功 --- 添加定时器setTimeout 将任务更改为异步
setTimeout(() => {
this.myEcharts();
},500)
}else{
return false
}
},
myEcharts() {
//var Echarts = document.getElementById('Echarts');
var Echarts = this.$refs.Echarts;
// 将之前的方法更换为$refs来进行获取
// 在进行判断当前节点存在后进行echarts图表数据的填写
if (Echarts){
console.log('bar_dv不为空');
let myChart = this.$echarts.init(Echarts)
图表代码 ...
}
}
}
3、最后的情况就是添加this.$nextTick方法 我们需要 包裹在渲染图表的方法外层等待dom加载完成后执行的钩子
mounted() {
// 进入页面请求数据
this.myData();
},
methods: {
async myData(){
let {code, data, msg } = await myData()
if(code == 200){
this.xxx = data
// 数据请求成功 --- 添加定时器setTimeout 将任务更改为异步
// 添加$nextTick dom加载完后执行的钩子
this.$nextTick(() => {
setTimeout(() => {
this.myEcharts();
},500)
})
}else{
return false
}
},
myEcharts() {
//var Echarts = document.getElementById('Echarts');
var Echarts = this.$refs.Echarts;
// 将之前的方法更换为$refs来进行获取
// 在进行判断当前节点存在后进行echarts图表数据的填写
if (Echarts){
console.log('bar_dv不为空');
let myChart = this.$echarts.init(Echarts)
图表代码 ...
}
}
}
第二种方法:
其实解决很简单，只需要将v-if更换成v-show即可。对比v-if和v-show的不同和渲染机制就可以简单理解一点。，深层的dom渲染机制不理解。大佬可以补充
//
<div id="Echarts" ref="Echarts" v-show="shipEcharts"></div>
添加图表下载功能 toolbox: { show: true, feature: { restore: { show: true }, saveAsImage: { show: true } // echarts自带下载到本地功能 } },
