hb_sis_zhfx/src/components/chart/line/multiple-y-line-chart.vue

<template>
    <div class="chart" :id="id"></div>
</template>

<script>
    import util from "@/helper/util.js";
    import partten from "@/helper/partten.js";
    import * as echarts from "echarts";

    export default {
        name: "multiple-y-line-chart",
        componentName: "multiple-y-line-chart",
        props: {
            width: {
                type: String,
                default: "100%",
            },
            height: {
                type: String,
                default: "13.889vh",
            },
            // 数据
            list: {
                type: Array,
                default: () => [
                    {
                        title: "机舱震动x方向",
                        yAxisIndex: 0,
                        value: [
                            ["2021/07/01 00:00:00", 68],
                            ["2021/07/01 05:00:00", 74],
                            ["2021/07/01 10:00:00", 69],
                            ["2021/07/01 15:00:00", 134],
                            ["2021/07/01 20:00:00", 262],
                        ],
                    },
                    {
                        title: "机舱震动y方向",
                        yAxisIndex: 1,
                        value: [
                            ["2021/07/01 00:00:00", 110],
                            ["2021/07/01 05:00:00", 175],
                            ["2021/07/01 10:00:00", 290],
                            ["2021/07/01 15:00:00", 140],
                            ["2021/07/01 20:00:00", 203],
                        ],
                    },
                    {
                        title: "机舱震动最大偏移值",
                        yAxisIndex: 2,
                        value: [
                            ["2021/07/01 00:00:00", 312],
                            ["2021/07/01 05:00:00", 203],
                            ["2021/07/01 10:00:00", 231],
                            ["2021/07/01 15:00:00", 305],
                            ["2021/07/01 20:00:00", 230],
                        ],
                    },
                    {
                        title: "风速1",
                        yAxisIndex: 3,
                        value: [
                            ["2021/07/01 00:00:00", 277],
                            ["2021/07/01 05:00:00", 311],
                            ["2021/07/01 10:00:00", 296],
                            ["2021/07/01 15:00:00", 87],
                            ["2021/07/01 20:00:00", 273],
                        ],
                    },
                    {
                        title: "风速2",
                        yAxisIndex: 4,
                        value: [
                            ["2021/07/01 00:00:00", 214],
                            ["2021/07/01 05:00:00", 224],
                            ["2021/07/01 10:00:00", 313],
                            ["2021/07/01 15:00:00", 230],
                            ["2021/07/01 20:00:00", 264],
                        ],
                    }
                ],
            },
            showLegend: {
                type: Boolean,
                default: false,
            },
            // 轴
            yAxises: {
                type: Array,
                default: () => [
                    {
                        name: '机舱震动x方向',
                        min: 50,
                        max: 370,
                        unit: "",
                        position: "left",
                    },
                    {
                        name: '机舱震动y方向',
                        min: 60,
                        max: 320,
                        unit: "",
                        position: "right",
                    },
                    {
                        name: '机舱震动最大偏移值',
                        min: 90,
                        max: 330,
                        unit: "",
                        position: "left",
                    },
                    {
                        name: '风速1',
                        min: 30,
                        max: 350,
                        unit: "",
                        position: "right",
                    },
                    {
                        name: '风速2',
                        min: 100,
                        max: 360,
                        unit: "",
                        position: "left",
                    },
                ],
            },
            // 标线
            markLine: {
                type: Array,
                default: () => [
                    {
                        yAxisIndex: 0,
                        data: ["2021/07/01 10:00:00", "2021/07/01 20:00:00", "2021/07/05 15:00:00", "2021/07/15 15:00:00"]
                    }
                ]
            }
        },
        data() {
            return {
                id: "",
                chart: null,
                color: ["#323E6F", "#1DA0D7", "#05BB4C", "#EDB32F", "#DB5520"],
            };
        },
        computed: {
            legend() {
                return this.list.map((t) => {
                    return t.title;
                });
            },
            xdata() {
                return this.list[0].value.map((t) => {
                    return t.text;
                });
            },
            yAxis() {
				let themeName = this.$store.state.themeName.split(' ')[1];
                let result = [];
                let p = {left: 0, right: 0};
                this.yAxises.forEach((item, index) => {
                    result.push({
                        type: "value",
                        name: `${item.name}${item.unit}`,
                        nameLocation: p[item.position] % 2 == 0 ? "end" : "start",
                        min: item.min,
                        max: item.max,
                        position: item.position,
                        offset: p[item.position] * 60,
                        axisLabel: {
                            formatter: "{value}",
                            fontSize: util.vh(14),
                        },
                        //分格线
                        splitLine: {
                            lineStyle: {
                                color: themeName === "dark"? partten.getColor("gray"): "#000",
                                type: "dashed",
                            },
                        },
                        axisLine: {
                            show: true,
                        },
                        axisTick: {
                            show: true
                        }
                    });
                    p[item.position]++;
                });

                return result;
            },
            series() {
                let result = [];

                this.list.forEach((value, index) => {
                    let ser = {
                        name: value.title,
                        type: "line",
                        smooth: true,
                        zlevel: index,
                        lineStyle: {
                            normal: {
                                color: this.color[index],
                                width: 1,
                            },
                        },
                        yAxisIndex: value.yAxisIndex,
                        // data: value.value.map((t) => {
                        //     return t.value;
                        // }),
                        data: value.value,
                    };
                    let iMarkLine = this.markLine.find(t => t.yAxisIndex == index);
                    if (iMarkLine) {
                        ser.markLine = {
                            silent: true,
                            data: iMarkLine.data.map(t => {
                                return { xAxis: t }
                            }),
                            lineStyle: {
                                color: '#ff0000',
                            },
                            label: {
                                color: 'rgba(204,187,225,0.5)'
                            }
                        }
                    }
                    result.push(ser);
                });

                return result;
            },
        },
        methods: {
            resize() {},
            initChart() {
				let themeName = this.$store.state.themeName.split(' ')[1];
                const chart = echarts.init(this.$el);

                let option = this.option(themeName);
                console.log(option)
                chart.clear();
                chart.setOption(option);

                this.resize = function() {
                    chart.resize();
                };

                window.addEventListener("resize", this.resize);
            },
            option: function (themeName) {
                return {
                    color: this.color,
                    tooltip: {
                        trigger: "axis",
                        backgroundColor: themeName === "dark"? "rgba(0,0,0,0.4)": "rgba(255,255,255,0.5)",
                        borderColor: themeName === "dark"? partten.getColor("gray"): "#000",
                        textStyle: {
                            color: themeName === "dark" ? "#fff" : "#000",
                            fontSize: 14,
                        },
                    },
                    legend: {
                        show: this.showLegend,
                        data: this.legend,
                        right: 56,
                        icon: "circle",
                        itemWidth: 6,
                        inactiveColor: themeName === "dark"? partten.getColor("gray"): "#000",
                        textStyle: {
                            color: themeName === "dark"? partten.getColor("grayl"): "#000",
                            fontSize: 12,
                        },
                    },
                    dataZoom: [{
                        show: true,
                        height: 30,
                        xAxisIndex: [0],
                        bottom: 30,
                        "start": 0,
                        "end": 5,
                        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        handleSize: '110%',
                        handleStyle: {
                            color: themeName === "dark"?"#05bb4c":  partten.getColor("deepblue"),
                        },
                        textStyle:{
                            color: themeName === "dark"? "rgba(204,187,225,0.5)": "#000",
                        },
                        fillerColor:themeName === "dark"?"rgba(5,187,76,0.4)":"rgba(54, 52, 142,0.4)",
                        borderColor:themeName === "dark"?"rgba(5,187,76,0.5)":"rgba(54, 52, 142,0.5)",

                    }, {
                        type: "inside",
                        show: true,
                        height: 15,
                        start: 1,
                        end: 35
                    }],
                    grid: {
                        top: util.vh(80),
                        left: util.vh(80),
                        right: util.vh(80),
                        bottom: util.vh(64),
                        containLabel: true,
                    },
                    xAxis: [
                        {
                            type: "time",
                            boundaryGap: false,
                            axisLabel: {
                                // formatter: "{value}",
                                fontSize: util.vh(14),
                                textStyle: {
                                    color: themeName === "dark"? partten.getColor("gray"): "#000",
                                },
                            },
                            // data: this.xdata,
                        },
                    ],
                    yAxis: this.yAxis,
                    series: this.series,
                };
            },
            datazoom: function (start, end) {
                const chart = echarts.getInstanceByDom(this.$el);
                chart.dispatchAction({
                    type: 'dataZoom',
                    start: start,
                    end: end,
                });
            },
            reload: function () {
                const chart = echarts.getInstanceByDom(this.$el);
                chart.clear();
                let option = this.option();
                chart.setOption(option);
            },
        },
        created() {
            this.id = "pie-chart-" + util.newGUID();
        },
        mounted() {
            this.$nextTick(() => {
                this.$el.style.width = this.width;
                this.$el.style.height = this.height;
                this.initChart();
            });
        },
        updated() {
            this.$nextTick(() => {
                this.initChart();
            });
        },
        unmounted() {
            window.removeEventListener("resize", this.resize);
        },
		watch: {
		    "$store.state.themeName"() {
		      this.initChart();
		    },
		  },
    };
</script>

<style lang="less">
    .chart {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>