simulation-front/src/components/echarts/lineChartMainPageA.vue

<template>
    <div
        class="linechart"
        :id="id"
        style="width: calc(100vw - 240px); min-width: 1125px; height: calc(48vh - 165px)"
    ></div>
</template>

<script>
import echarts from "echarts";
import { mapState } from "vuex";

export default {
    name: "lineChartMainPageA", // 首页-折线图
    props: {
        id: {
            default: "lineChartMainPageA",
            type: String,
        },
        dataList: {
            default: function () {
                return [];
            },
            type: Array,
        },
    },
    data() {
        return {
            tipData: [], //线数据
            showData: [], //展示数据
            charts: "",
        };
    },

    watch: {
        dataList(val) {
            if (val.length > 0) {
                this.initStateList();
            }
        },
    },

    computed: {
        ...mapState(["themeColor"]),
    },

    methods: {
        initStateList() {
            let xData = [];
            let yData = [];
            for (let index = 0; index < this.dataList.length; index++) {
                const element = this.dataList[index];
                xData.push(element.toDate.slice(5));
                yData.push(element.num);
            }

            let option = {
                title: {
                    text: "暂无数据",
                    show: this.dataList.length === 0,
                    left: "center",
                    top: "center",
                },
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    formatter: "{b}: {c}",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#ffffff",
                    },
                    confine: true,
                },
                xAxis: {
                    type: "category",
                    boundaryGap: false,
                    // data: [
                    //     "星期一",
                    //     "星期二",
                    //     "星期三",
                    //     "星期四",
                    //     "星期五",
                    //     "星期六",
                    //     "星期日",
                    // ],
                    // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
                    data: xData,
                },
                yAxis: {
                    minInterval: 1,
                },
                series: [
                    {
                        // data: [60, 72, 48, 63, 39, 99, 81],
                        data: yData,
                        type: "line",
                        smooth: true,
                        symbol: "circle",
                        symbolSize: 6,
                        lineStyle: {
                            normal: {
                                width: 1.5,
                                color: this.themeColor,
                            },
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: "rgba(51, 151, 255, 0.42)",
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(170, 197, 255, 0.12)",
                                    },
                                ]
                            ),
                            // color: "#aac5ff",
                        },
                        itemStyle: {
                            normal: {
                                // 拐点上显示数值
                                // label: {
                                //     show: true,
                                // },
                                // borderColor: this.themeColor, // 拐点边框颜色
                                color: this.themeColor,
                                lineStyle: {
                                    // width: 3, // 设置线宽
                                    // type: "dotted", //'dotted'虚线 'solid'实线
                                    // normal: {
                                    //     color: "#000",
                                    // },
                                },
                            },
                        },
                    },
                ],
                grid: {
                    top: "10%",
                    left: "20px",
                    right: "20px",
                    bottom: "10%",
                    containLabel: true,
                },
            };
            this.charts.setOption(option);
        },
    },

    mounted() {
        this.charts = this.$echarts.init(document.getElementById(this.id));

        this.initStateList();
        
        this.$nextTick(() => {
            window.addEventListener("resize", () => {
                this.charts.resize();
            });
        });
    },

    destroyed() {
        // console.log("destroyed");
        this.charts.dispose();
    },
};
</script>

<style lang='less' scoped>
.linechart {
    margin: 0 auto;
    overflow: hidden;
}
</style>