1、Cannot read property 'getAtribute' of null报错
错误原因分析:
1)html 元素还没加载或者代码还没有执行完就先执行了 echarts 的渲染,也就是代码执行前后顺序的问题。
2)初始化 echarts 的 DOM 元素不存在。
解决方案:
this.$nextTick(function () {
this.initEcharts();
});
2、搜索保持+浏览器尺寸改变 切换页面echarts的图表偶尔不展示
解决方案: 进入页面时再调用一次echarts
beforeRouteEnter (to, from, next) {
next(vm=> {
vm.initEcharts()
})
},
3、设置echarts横向柱状图每个柱状图的宽度
_this.dataList.length有几个柱状图,80每个柱状图的宽度
myChart.resize({height: _this.dataList.length*80+78});
4、柱状图上显示的自定义的内容
label: {
show: true,
position:'center',
offset: [20, 10],
formatter:function(p){
let dataIndex = p.dataIndex
return '{b|'+_this.allArrData.stockBus[dataIndex]+'},' + '{a|'+_this.allArrData.newBus[dataIndex]+'},'+'{c|'+_this.allArrData.allBus[dataIndex]+'}'
},
rich: {
a: {
color:'#2C6DF2',
},
b: {
color:'#6698FF',
},
c: {
color:'black',
},
}
},
5、设置坐标文字显示不全问题
axisLabel: { //设置x轴的字
show:true,
interval:0,//使x轴横坐标全部显示
// formatter: function (value) {
// var val = "";
// if (value.length > 5) {
// val = value.substr(0, 5) + "...";
// return val;
// } else {
// return value;
// }
// },
// formatter: function (value) {
// return value.split("").join("\n"); // 换行显示
// },
formatter : function(params){
var newName = ""
var NameNumber = params.length
var Number = 4
var rowNumber = Math.ceil(NameNumber / Number)
if (NameNumber > Number) {
for (var p = 0; p < rowNumber; p++) {
var tempStr = ""
var start = p * Number
var end = start + Number
if (p == rowNumber - 1) {
tempStr = params.substring(start, NameNumber);
} else {
tempStr = params.substring(start, end) + "\n"
}
newName += tempStr
}
} else {
newName = params;
}
return newName
},
},