使用Vue实现数据可视化大屏功能(三)-使用Echarts构建折线图功能

  在之前的文章中我们介绍了Vue中引入Echarts图表的组件，下面我们就来介绍一下如何使用这些组件构建一些基础的组件方便后续使用中的直接引用。

基础折线图的实现

第一步、创建组件文件

  在components的文件夹中创建一个BaseLine的文件夹，并且创建一个index.vue的文件。

<template>
    <div>
        <Echart :options="options" id="id" height="300px" width="500px"/>
    </div>
</template>

<script>
    import Echart from '@/common/echart'
    export default {
        data() {
            return {
                options: {}
            }
        },
        components: {
            Echart
        },
        props: {
            id: {
                type: String,
                required: true,
                default: "baseLine"
            },
            tips: {
                type: Array,
                required: true
            },
        },
        watch: {
            tips: {
                handler(newData) {
                    this.options = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: newData,
                                type: 'line',
                                smooth: true
                            }

                        ]
                    }
                },
                immediate: true,
                deep: true
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

第二步、在主功能文件中引入相关组件

<template>
    <div id="index" style="width: 500px;height: 300px">
        <BaseLine :id="baseLineId" :tips="this.yData"/>
    </div>
</template>

<script>
    import BaseLine from "@/components/BaseLine"
    export default {
        data() {
            return {
                loading: true,
                baseLineId:"baseLine",
                yData:[150, 230, 224, 218, 135, 147, 260],
            }
        },
        components:{
            BaseLine
        },
        mounted(){
          this.cancelLoading();
        },
        methods:{
            cancelLoading(){
                setTimeout(() => {
                    this.loading = false;
                }, 1000);
            }
        }
    }
</script>

<style lang="scss">
</style>

第三步、启动项目查看效果