<template>
<div>
<div ref="today" class="echarts"></div>
</div>
</template>
<script>
export default{
data () {
return {};
},
props: ['craneElevatingCapacity_array','dateArray','craneHeight_array'],
watch: {
craneElevatingCapacity_array: {
handler: function(newVal, oldVal) {
this.updateCharts();
},
// immediate: true // 立即执行一次
},
dateArray: {
handler: function(newVal, oldVal) {
this.updateCharts();
},
// immediate: true // 立即执行一次
},
craneHeight_array: {
handler: function(newVal, oldVal) {
this.updateCharts();
},
// immediate: true // 立即执行一次
}
},
methods: {
today(){
let myChart = this.$echarts.init(this.$refs.today);
// 绘制图表
myChart.setOption({
textStyle: {
color: '#fff' // 设置文字颜色为白色
},
title: {
// text: '单位',
textStyle: {
color: '#fff' // 设置标题颜色为红色
}
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['吊重', '高度'],
textStyle: {
color: '#fff' // 设置标题颜色为红色
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLine: {
lineStyle: {
color: '#fff' // 设置 x 轴轴线颜色
}
},
},
yAxis: {
type: 'value',
axisLine: {
lineStyle: {
color: '#fff' // 设置 x 轴轴线颜色
}
},
},
series: [
{
name: '吊重',
type: 'line',
stack: 'Total',
color: '#ff0000', // 设置线段的颜色
data: [],
},
{
name: '高度',
type: 'line',
stack: 'Total',
color:'orange',
data: []
}
]
});
},
updateCharts() {
let myChart = this.$echarts.getInstanceByDom(this.$refs.today);
myChart.setOption({
series: [
{
data: this.craneElevatingCapacity_array
},
{
data: this.craneHeight_array
}
],
xAxis: {
data: this.dateArray
},
});
}
},
mounted () {
this.today();
}
}
</script>
<style scoped>
.echarts{
width: 500px;
height: 260px;
}
</style>
4181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
