折線圖和柱狀圖相同。下面以折線圖為例

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>