vue中使用echarts-写一个echarts组件

项目中有多个地方需要使用同一个图表模块，需要显示一段数据趋势，点击右上角两个按钮，切换数据。效果如图：

在考虑后，决定单独拎出来写一个组件，传值改变数据。代码如下：

组件代码：
在这里后台传过来的值的格式是将x、y轴数值放进一个数组中传给我，因此我这里对数据做了处理。
可以根据数据格式进行修改。

<template>
    <div class="echarts_outer">
        <div class="echarts_div">
            <div class="echarts_titles">
                <span class="title_left">数据趋势</span>
                <div class="echarts_btns fr">
                    <button
                        class="echarts_btn"
                        :class="{'active_btn': current_month===6}"
                        @click="changeMonth(6)"
                    >近6个月</button>
                    <button
                        class="echarts_btn"
                        :class="{'active_btn': current_month===12}"
                        @click="changeMonth(12)"
                    >近12个月</button>
                </div>
            </div>

            <div id="myChart" :style="{height: '195px'}"></div>
        </div>
    </div>
</template>
<script>
export default {
    name: "Echarts",
    data() {
        return {
            data: [],
            current_month: 6,
            month: [],
            count: []
        };
    },
    props: ["all"],
    mounted() {
        this.init();
    },
    watch: {
        all(oldVal, newVal) {
            this.drawLine();
        }
    },
    methods: {
        init() {
            this.drawLine();
        },
        drawLine() {
            this.toArray(this.all);
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(
                document.getElementById("myChart")
            );
            // 绘制图表
            myChart.setOption(
                {
                    grid: {
                        x: 65,
                        y: 27,
                        x2: 30,
                        y2: 40
                    },
                    xAxis: {
                        type: "category",
                        data: this.month,
                        axisLine: {
                            lineStyle: {
                                type: "solid",
                                color: "rgba(37, 37, 46, 0.2)",
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#25252E"
                            }
                        }
                    },
                    yAxis: {
                        type: "value",
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "rgba(37, 37, 46, 0.2)"
                            }
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                type: "solid",
                                color: "rgba(37, 37, 46, 0.2)",
                                width: 2
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#25252E"
                            }
                        }
                    },
                    series: [
                        {
                            data: this.count,
                            type: "line",
                            smooth: true,
                            color: ["#58afed"],
                            emphasis: {},
                            areaStyle: {
                                normal: {
                                    color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1,
                                        [
                                            { offset: 0, color: "#0070FF" },
                                            { offset: 0.5, color: "#AACFFF" },
                                            { offset: 1, color: "#fff" }
                                        ]
                                    )
                                }
                            }
                        }
                    ],
                    tooltip: {
                        show: true,
                        trigger: "axis"
                    }
                },
                true
            );
        },
        changeMonth(month) {
            this.current_month = month;
            this.$emit("change-month", month);
            // console.log("emit", this.all)
            this.drawLine();
        },
        toArray(arr) { // 对数据进行格式处理
            this.month = [];
            this.count = [];
            if (arr != null) {
                arr.forEach((value, index) => {
                    this.month.push(value.month);
                    this.count.push(value.count);
                });
            }
        }
    }
};
</script>

<style scoped>
.fr{
    float: right;

}
.echarts_outer {
    display: inline-block;
    width: 480px;
    height: 256px;
    border: 1px solid #d3d3d5;
    border-radius: 6px;
}
.echarts_div {
    background-color: #fff;
    border-radius: 6px;
}
.echarts_titles {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #d3d3d5;
    padding: 0 20px;
}
.title_left {
    font-size: 18px;
    color: #25252e;
    font-weight: 700;
}
.echarts_btns {
    z-index: 100;
}
.echarts_btn {
    width: 65px;
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    background: rgba(0, 110, 251, 0.1);
    color: #25252e;
    border-radius: 2px;
    cursor: pointer;
}
.echarts_btn:first-child {
    margin-right: 12px;
}
.echarts_btn.active_btn {
    background-color: #006efb;
    color: #fff;
}
</style>

父组件调用：
其中调取接口获取数据部分在这里修改为直接赋值。

<template>
    <div>
        <echarts v-if="flag" :all="all_month_count" @change-month="changeMonth"></echarts>
    </div>
</template>
<script>
import Echarts from "@/components/echarts/index"
export default {
    data() {
        return {
            flag: false,
            needmonth: 6,
            all_month_count: [
                { month: "2019-04", count: 13540 },
                { month: "2019-05", count: 35737 },
                { month: "2019-06", count: 25114 },
                { month: "2019-07", count: 136242 },
                { month: "2019-08", count: 1796 },
                { month: "2019-09", count: 1 }
            ]
        };
    },
    components: {
        Echarts
    },
    mounted() {
        this.getCount();
    },
    methods: {
        getCount() {
            this.flag = true
            if (this.needmonth == 6) {
                this.all_month_count = [
                    { month: "2019-04", count: 100 },
                    { month: "2019-05", count: 120 },
                    { month: "2019-06", count: 110 },
                    { month: "2019-07", count: 220 },
                    { month: "2019-08", count: 80 },
                    { month: "2019-09", count: 100 }
                ];
            }else{
                this.all_month_count = [
                    { month: "2018-10", count: 100 },
                    { month: "2018-11", count: 120 },
                    { month: "2018-12", count: 110 },
                    { month: "2019-01", count: 220 },
                    { month: "2019-02", count: 80 },
                    { month: "2019-03", count: 100 },
                    { month: "2019-04", count: 100 },
                    { month: "2019-05", count: 120 },
                    { month: "2019-06", count: 110 },
                    { month: "2019-07", count: 220 },
                    { month: "2019-08", count: 80 },
                    { month: "2019-09", count: 100 }
                ];
            }
        },
        changeMonth(month) {
            this.needmonth = month;
            this.getCount();
        }
    }
};
</script>
<style scoped>
</style>

这样，一个简单的echarts组件就完成了~