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

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

<script>
import tool from "./common/tool.js";

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

    data() {
        return {
            charts: "",
        };
    },

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

    methods: {
        initStateList() {
            let array = this.dataList;
            // console.log(array);

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

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

                if (flag) {
                    this.charts.clear();
                    this.charts.setOption(this.option1);
                    return;
                }
            }

            // if (!this.isSorted(array.map((i) => i.x))) {
            //     this.$message.error("X轴的坐标应逐渐增大");
            //     this.charts.clear();
            //     this.charts.setOption(this.option1);
            //     return;
            // }

            let props = [];

            this.columns.forEach((i) => {
                props.push(i.prop); // ['x', '1.0', '2.0', '3.0', '4.0']
            });

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

            let series = [];

            props.forEach((j, index) => {
                let a = [];
                if (j === "x") return;

                array.forEach((i) => {
                    a.push([i.x, i[j]]);
                });

                series.push({
                    data: a,
                    type: "line",
                    name: j,
                    smooth: false,
                });
            });

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

            let option = {
                title: {
                    text: "暂无数据",
                    show: series.length === 0,
                    left: "center",
                    top: "center",
                },
                tooltip: {
                    //提示框，可以在全局也可以在
                    trigger: "item", //提示框的样式
                    formatter: "{b}: {c}",
                    color: "#000", //提示框的背景色
                    textStyle: {
                        //提示的字体样式
                        color: "#ffffff",
                    },
                    confine: true,
                },
                xAxis: {
                    name: this.xName,
                    nameLocation: "center",
                    nameGap: 30,
                    type: "value",
                    axisTick: { inside: true },
                    // boundaryGap: false,
                },
                yAxis: {
                    name: this.yName,
                    type: "value",
                    axisTick: { inside: true },
                    scale: true,
                },
                legend: {},
                series,
                grid: {
                    top: "75px",
                    left: "30px",
                    right: "30px",
                    bottom: "10%",
                    containLabel: true,
                },
            };
            this.charts.setOption(option);
        },
    },
};
</script>

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