foster-pc-vue/src/views/warningHome/components/chartSeting.js

import * as echarts from "echarts";

export const galleryLine = {
    tooltip: {
        trigger: "axis",
    },
    grid: {
        top: 28,
        left: 10,
        right: 26,
        bottom: 0,
        containLabel: true,
    },
    xAxis: {
        name: "时间",
        nameLocation: "end",
        nameGap: 4,
        nameTextStyle: {
            fontSize: 10,
            color: "#9F9F9F"
        },
        type: 'category',
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            // interval: 0,
            rotate: 15,
            margin: 14,
            textStyle: {
                color: "rgba(187, 187, 187, 0.36)",
                fontSize: 10
            },
        },
        data: ['9/1', '9/7', '9/13', '9/19', '9/25', '10/1', '10/7']
    },
    yAxis: {
        name: "xx指标",
        nameLocation: "end",
        type: 'value',
        nameTextStyle: {
            fontSize: 10,
            color: "#9F9F9F"
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "rgba(187, 187, 187, 0.36)",
            },
        },
        axisLabel: {
            textStyle: {
                color: "#666666",
                fontSize: 10
            },
        },
        // 分割线
        splitLine: {
            show: false,
            lineStyle: {
                color: "rgba(255, 255, 255, 0.1)",
            },
        },
    },
    series: [
        {
            data: [40, 58, 62, 64, 68, 74, 80],
            type: 'line',
            symbolSize: 6,
            itemStyle: {
                color: '#FFD489' // 设置数据点颜色为红色
            },

            // itemStyle: {
            //     color: '#CECECE' // 设置数据点颜色
            // },
            // lineStyle: {
            //     type: 'dashed', // 设置线条为虚线
            //     width: 2,       // 设置线条宽度
            //     color: '#CECECE' // 设置线条颜色
            // }
        }
    ],
}

export const galleryIndicatorLine = {
    tooltip: {
        trigger: "axis",
    },
    legend: {
        icon: 'roundRect',
        top: 0,
        left: 0,
        orient: 'horizontal',
        itemWidth: 6,
        itemHeight: 2,
        itemGap: 4,
        textStyle: {
          align: 'left',
          fontSize: 10,
        },
        data: [
          { name: '褪绿率', textStyle: { color: '#66B9FB' }, itemStyle: {color: "#66B9FB"} },
          { name: '花芽率', textStyle: { color: '#1B98FC' }, itemStyle: {color: "#1B98FC"} },
          { name: '花蕾率', textStyle: { color: '#036CC0' }, itemStyle: {color: "#036CC0"} },
          { name: '生长异常', textStyle: { color: '#F7BE5A' }, itemStyle: {color: "#F7BE5A"} },
          { name: '病虫异常', textStyle: { color: '#F99851' }, itemStyle: {color: "#F99851"} }
        ]
      },
    grid: {
        top: 30,
        left: 8,
        right: 18,
        bottom: 4,
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            // interval: 0,
            rotate: 15,
            margin: 14,
            textStyle: {
                color: "#999999",
                fontSize: 12
            },
            formatter: function (value) {
                // 获取后 5 位字符（假设日期格式始终为 'YYYY-MM-DD'）
                let shortenedValue = value.slice(-5);
                
                // 自定义处理省略号（由于 ECharts 不直接支持，需手动处理）
                // 此处简单判断，若原长度超过 10（即 'YYYY-MM-DD' 格式），则添加省略号
                if (value.length > 10) {
                    shortenedValue = '...' + shortenedValue;
                }
                
                return shortenedValue;
            }
        },
        axisLine: {
            lineStyle: {
                color: "#333333",
            }
        },
        data: ['9/1', '9/7', '9/13', '9/19', '9/25', '10/1', '10/7']
    },
    yAxis: [{
        type: 'value',
        offset: 6,
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            align: "center",
            textStyle: {
                color: "#999999",
                fontSize: 12
            },
        },
        // 分割线
        splitLine: {
            lineStyle: {
                type: [4, 3],
                dashOffset: 5,
                color: "#333333",
            },
        },
        // min: 0, // 最小值固定为0
        // max: 100, // 最大值固定为100
        // splitNumber: 5, // 设置5个分割段
    }],
    series: [
        {
            name: "病虫异常",
            data: [40, 28, 22, 64, 28, 24, 40],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#FF7219" },
            lineStyle: {
                color: "#FF7219", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
        {
            name: "生长异常",
            data: [80, 88, 92, 84, 88, 74, 80],
            type: 'line',
            symbol: "none",
            smooth: true,
            itemStyle: { color: "#FFB82E" },
            lineStyle: {
                color: "#FFB82E", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
        {
            name: "褪绿率",
            data: [
                ["9/1", 10],
                ["9/7", 30],
                ["9/13", 80],
            ],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#66B9FB" },
            lineStyle: {
                color: "#66B9FB", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
        {
            name: "花芽率",
            data: [
                ["9/7", 8],
                ["9/19", 50],
                ["9/25", 80],
            ],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#1B98FC" },
            lineStyle: {
                color: "#1B98FC", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
        {
            name: "花蕾率",
            data: [
                ["9/19", 12],
                ["9/25", 30],
                ["10/1", 60],
                ["10/7", 70],
            ],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#036CC0" },
            lineStyle: {
                color: "#036CC0", // 折线颜色为红色
                width: 2, // 线条宽度
            },
        },
    ],
}