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

<template>
    <div class="linechart" :id="id" style="width: 100%; height: 100%"></div>
</template>

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

export default {
    name: "lineChartCarsimA", // carsim-折线图
    props: {
        id: {
            default: "lineChartCarsimA",
            type: String,
        },
        dataList: {
            default: function () {
                return [];
            },
            type: Array,
        },
        dataListA: {
            default: function () {
                return [];
            },
            type: Array,
        },
        columns: {
            default: function () {
                return [];
            },
            type: Array,
        },
    },

    data() {
        return {
            tipData: [], //线数据
            showData: [], //展示数据
            charts: "",
            xName: "油门位置",
            yName: "低档输出转速(rpm)",
        };
    },

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

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

    methods: {
        initStateList() {
            let array = this.dataList;
            let array1 = this.dataListA;

            for (let index = 0; index < array.length; index++) {
                const element = array[index];

                let flag = Object.values(element).some((i) => i === "");

                if (flag) {
                    let option1 = {
                        title: {
                            text: "暂无数据",
                            show: flag,
                            left: "center",
                            top: "center",
                        },
                        tooltip: {
                            //提示框，可以在全局也可以在
                            trigger: "item", //提示框的样式
                            formatter: "{b}: {c}",
                            color: "#000", //提示框的背景色
                            textStyle: {
                                //提示的字体样式
                                color: "#ffffff",
                            },
                            confine: true,
                        },
                        xAxis: {
                            name: this.xName,
                            type: "category",
                            boundaryGap: false,
                            data: [],
                        },
                        yAxis: {
                            name: this.yName,
                        },
                        series: [
                            {
                                data: [],
                                type: "line",
                                smooth: true,
                                symbol: "circle",
                                symbolSize: 6,
                                lineStyle: {
                                    normal: {
                                        width: 1.5,
                                        // color: this.themeColor,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        // color: this.themeColor,
                                    },
                                },
                            },
                        ],
                        grid: {
                            top: "30px",
                            left: "60px",
                            right: "108px",
                            bottom: "10%",
                            containLabel: true,
                        },
                    };
                    this.charts.clear();
                    this.charts.setOption(option1);
                    return;
                }
            }

            for (let index = 0; index < array1.length; index++) {
                const element = array1[index];

                let flag = Object.values(element).some((i) => i === "");

                if (flag) {
                    let option1 = {
                        title: {
                            text: "暂无数据",
                            show: flag,
                            left: "center",
                            top: "center",
                        },
                        tooltip: {
                            //提示框，可以在全局也可以在
                            trigger: "item", //提示框的样式
                            formatter: "{b}: {c}",
                            color: "#000", //提示框的背景色
                            textStyle: {
                                //提示的字体样式
                                color: "#ffffff",
                            },
                            confine: true,
                        },
                        xAxis: {
                            name: this.xName,
                            type: "category",
                            boundaryGap: false,
                            data: [],
                        },
                        yAxis: {
                            name: this.yName,
                        },
                        series: [
                            {
                                data: [],
                                type: "line",
                                smooth: true,
                                symbol: "circle",
                                symbolSize: 6,
                                lineStyle: {
                                    normal: {
                                        width: 1.5,
                                        // color: this.themeColor,
                                    },
                                },
                                itemStyle: {
                                    normal: {
                                        // color: this.themeColor,
                                    },
                                },
                            },
                        ],
                        grid: {
                            top: "30px",
                            left: "60px",
                            right: "108px",
                            bottom: "10%",
                            containLabel: true,
                        },
                    };
                    this.charts.clear();
                    this.charts.setOption(option1);
                    return;
                }
            }

            let props = ["x", "y"];

            let xData = [];
            let yData = [];

            props.forEach((j) => {
                let arr = [];
                array.forEach((i) => {
                    let a = i[j] || 0;
                    if (j === "x") {
                        xData.push(a);
                    } else {
                        arr.push(a);
                    }
                });

                if (j != "x") yData.push(arr);
            });

            props.forEach((j) => {
                let arr = [];
                array1.forEach((i) => {
                    let a = i[j] || 0;
                    if (j != "x") {
                        arr.push(a);
                    }
                });

                if (j != "x") yData.push(arr);
            });

            let series = [];

            let names = ["up-shifting", "down-shifting"];

            yData.forEach((i, index) => {
                series.push({
                    name: names[index],
                    data: i,
                    type: "line",
                    smooth: true,
                    symbol: "circle",
                    symbolSize: 6,
                    lineStyle: {
                        normal: {
                            width: 1.5,
                            // color: this.themeColor,
                        },
                    },
                    itemStyle: {
                        normal: {
                            // color: this.themeColor,
                        },
                    },
                });
            });

            let option = {
                title: {
                    text: "暂无数据",
                    show: yData.length === 0,
                    left: "center",
                    top: "center",
                },
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    formatter: "{b}: {c}",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#ffffff",
                    },
                    confine: true,
                },
                xAxis: {
                    name: this.xName,
                    type: "category",
                    boundaryGap: false,
                    data: xData,
                    // min: 0,
                    // max: 1,
                },
                yAxis: {
                    name: this.yName,
                },
                legend: {},
                series,
                grid: {
                    top: "30px",
                    left: "60px",
                    right: "108px",
                    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() {
        this.charts.dispose();
    },
};
</script>

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