echa(){
// 在每次echarts挂载前先用dispose()把之前的实例销毁这样每次执行函数时图表就都会从新加载
this.$echarts.init(document.querySelector('.centerTop-body')).dispose()
let charta = this.$echarts.init(document.querySelector('.centerTop-body'))
var colors = ['#00FFFF', '#02FF67', '#675bba'];
let option = {
// backgroundColor: '#081736',
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
top: '15%',
// right: '3%',
left: '4%',
bottom: '15%'
},
dataZoom: [//条形图底部滚动条
// {
// show: true,
// realtime: true,
// start: 0,
// end:50
// },
// {
// type: 'inside',
// realtime: true,
// start: 0,
// end: 50
// }
],
xAxis: [{
type: 'category',
axisLabel: {
color: '#fff',
interval:0
},
axisLine: {
show: true,
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: '#195384',
type: "dotted",
}
},
data: this.dayArry
}],
yAxis: [
{
type: 'value',
name: this.Company,
min: 0,
position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 11,
},
axisLine: {
lineStyle: {
color: '#0a3e98'
}
},
axisTick: {
show: false,
},
splitLine: {
show: true,
lineStyle: {
color: '#0a3e98',
type: "dotted",
}
},
axisLabel: {
formatter: '{value}',
textStyle: {
color: "#fff",
}
},
}
],
// dataZoom: [
// {
// show: true,
// realtime: true,
// start: 0,
// end: 30
// },
// {
// type: 'inside',
// realtime: true,
// start: 0,
// end: 30
// }
// ],
series: [{
name: '吨数',
type: 'bar',
barWidth: 15, //柱子宽度
barGap: 0.3, //柱子之间间距
itemStyle: {
normal: {
color: this.$echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
offset: 0,
color: "#0896FF"
},
{
offset: 1,
color: "rgba(5,40,66,0.00)"
}
]),
}
},
label:{
normal: {
show: true,
position: "top",
formatter: "{c}",
color:'#fff'
}
},
data: this.dataArry,
// animationDuration: function (idx) {
// return idx * 1500 + 1000;
// }
}
]
};
charta.setOption(option)
window.addEventListener('resize', function () {
charta.resize()
});
},
关于数据更新或方法从新调用时echarts图表不更新不从新加载的解决办法
最新推荐文章于 2024-06-05 09:57:16 发布