折线图和柱状图相同。下面以折线图为例
tamplate
<ve-line :data="chartData"
v-if="show"
:x-axis="xAxis"
:y-axis="yAxis"
:extend="extend"
></ve-line>
<el-row v-else style="text-align:center;color:#49A09E">
暂无数据
</el-row>
js
<script>
export default {
props:{
height:{
type:String,
default: '18rem'
},
showLegend:{
type: Boolean,
default: true,
}
},
data(){
this.colors =['#16F5E6'];
this.extend={
grid:{
top:'15%',
// 调整图表的位置。设置了字体百分比后,图表会往左移导致一部分y轴数据显示不全,使用left 调整位置
left: '6.5%',
bottom: '15%'
},
legend: {
show:false,
},
series: {
smooth: false,
}
}
this.yAxis = [
{
axisLabel: {
show: true,
textStyle: {
color: "white",//这里是改变字体颜色
fontSize: '75%' // 字体大小设置百分比就可以自动适配了
}
},
splitLine: { //线的颜色
show: true,
lineStyle: {
color: 'rgba(0,250,255,0.04)'
}
},
axisTick: { //是否显示y轴刻度的小横线
show: false,
},
}
]
this.xAxis={
data:[],
axisLabel: {
show: true,
textStyle: {
color: "white",
fontSize: '75%' // 字体大小设置百分比就可以自动适配了
}
}
}
return{
apiTimer:null,
chartData: {
columns: ['日期', '产量', ],
rows: []
},
show:false
}
},
beforeDestroy () {
clearInterval(this.apiTimer)
},
mounted() {
this.getOutput();
this.apiTimer = setInterval(()=>{
this.getOutput()
},30000)
},
methods: {
getOutput () { // 请求接口数据,axios封装后的请求
this.$api.getRequest('/api/selectRecent', this.$route.query).then(res => {
this.chartData.rows = [];
this.xAxis.data=[];
if(res.time != null || res.time.length > 0){
res.time.forEach((element, index)=>{
this.xAxis.data.push(element);
this.chartData.rows.push(
{
'日期': element, '产量': res.yield[index]
}
)
})
this.show = true;
}else{
this.show = false;
}
})
}
}
}
</script>