折线图和柱状图相同。下面以折线图为例

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>