baise-pc-vue/src/views/home/components/chartSeting.js

import * as echarts from "echarts";
import { color } from "highcharts";

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: "#666666"
        },
        type: 'category',
        // 分割线
        axisTick: {
            show: false,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            // interval: 0,
            rotate: 15,
            margin: 14,
            textStyle: {
                color: "#666666",
                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: "#666666"
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: "#BBBBBB",
            },
        },
        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: '#2199F8' // 设置数据点颜色为红色
            },

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

export const galleryIndicatorLine = {
    tooltip: {
        trigger: "axis",
    },
    legend: {
        icon: 'roundRect',
        bottom: 0,
        right: 10,
        orient: 'horizontal',
        itemWidth: 15,
        itemHeight: 5,
        itemGap: 20,
        textStyle: {
          align: 'left'
        },
        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: 20,
        left: 8,
        right: 18,
        bottom: 20,
        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
            },
        },
        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: [
                ["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, // 线条宽度
            },
        },
        // {
        //     name: "物候监测",
        //     data: [10, 25, 32, 34, 38, 44, 20],
        //     type: 'line',
        //     symbol: "none",
        //     smooth: true,
        //     itemStyle: { color: "#2199F8" },
        //     lineStyle: {
        //         color: "#2199F8", // 折线颜色为红色
        //         width: 2, // 线条宽度
        //     },
        //     areaStyle: {
        //         color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        //             { offset: 0, color: "rgba(33, 153, 248, 0.2)" }, // 渐变起始颜色
        //             { offset: 1, color: "rgba(138, 203, 255, 0.02)" }, // 渐变结束颜色
        //         ]),
        //     },
        //     markPoint : {
        //         symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
        //         symbolSize: [0, 0],
        //         data: [
        //             {
        //                 name: "text",
        //                 value: "催醒追肥",
        //                 xAxis: '9/13',
        //                 yAxis: 32,
        //                 symbolOffset: [0, "-50%"],
        //                 label: {
        //                     offset: [0, -22],
        //                     color: "#fff",
        //                     // backgroundColor: {
        //                     //     image: "data:image/png;base64,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",
        //                     // },
        //                     backgroundColor: "#2199F8",
        //                     padding: [2, 10, 0, 10],
        //                     height: 20,
        //                     borderRadius: 10,
        //                     // borderRadius: 10,
        //                 },
        //             },
        //             {
        //                 name: "mark",
        //                 xAxis: '9/13',
        //                 yAxis: 32,
        //                 value: "",
        //                 label: {
        //                     backgroundColor: "#fff",
        //                     borderWidth: 2,
        //                     borderColor: "rgba(255, 255, 255, 0.5)",
        //                     borderRadius: 8,
        //                     width: 6,
        //                     height: 6,
        //                 },
        //             },
        //         ]
        //     },
        // },
        {
            name: "生长异常",
            data: [80, 88, 92, 84, 88, 74, 80],
            type: 'line',
            symbol: "none",
            smooth: true,
            itemStyle: { color: "#FFB82E" },
            lineStyle: {
                color: "#FFB82E", // 折线颜色为红色
                width: 2, // 线条宽度
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(255, 183, 0, 0.2)" }, // 渐变起始颜色
                    { offset: 1, color: "rgba(254, 233, 96, 0.02)" }, // 渐变结束颜色
                ]),
            },
            // markPoint : {
            //     symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
            //     symbolSize: [0, 0],
            //     data: [
            //         {
            //             name: "text",
            //             value: "冬季基肥",
            //             xAxis: '9/19',
            //             yAxis: 84,
            //             symbolOffset: [0, "-50%"],
            //             label: {
            //                 offset: [0, -22],
            //                 color: "#fff",
            //                 backgroundColor: "#FFB82E",
            //                 padding: [2, 10, 0, 10],
            //                 height: 20,
            //                 borderRadius: 10,
            //                 // borderRadius: 10,
            //             },
            //         },
            //         {
            //             name: "mark",
            //             xAxis: '9/19',
            //             yAxis: 84,
            //             value: "",
            //             label: {
            //                 backgroundColor: "#fff",
            //                 borderWidth: 2,
            //                 borderColor: "rgba(255, 255, 255, 0.5)",
            //                 borderRadius: 8,
            //                 width: 6,
            //                 height: 6,
            //             },
            //         },
            //     ]
            // },
        },
        {
            name: "病虫异常",
            data: [40, 28, 22, 64, 28, 24, 40],
            type: 'line',
            smooth: true,
            symbol: "none",
            itemStyle: { color: "#FF7219" },
            lineStyle: {
                color: "#FF7219", // 折线颜色为红色
                width: 2, // 线条宽度
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: "rgba(255, 114, 25, 0.2)" }, // 渐变起始颜色
                    { offset: 1, color: "rgba(255, 114, 25, 0.02)" }, // 渐变结束颜色
                ]),
            },
            // markPoint : {
            //     symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
            //     symbolSize: [0, 0],
            //     data: [
            //         {
            //             name: "text",
            //             value: "冬季清园",
            //             xAxis: '10/1',
            //             yAxis: 24,
            //             symbolOffset: [0, "-50%"],
            //             label: {
            //                 offset: [0, -22],
            //                 color: "#fff",
            //                 backgroundColor: "#FF7219",
            //                 padding: [2, 10, 0, 10],
            //                 height: 20,
            //                 borderRadius: 10,
            //                 // borderRadius: 10,
            //             },
            //         },
            //         {
            //             name: "mark",
            //             xAxis: '10/1',
            //             yAxis: 24,
            //             value: "",
            //             label: {
            //                 backgroundColor: "#fff",
            //                 borderWidth: 2,
            //                 borderColor: "rgba(255, 255, 255, 0.5)",
            //                 borderRadius: 8,
            //                 width: 6,
            //                 height: 6,
            //             },
            //         },
            //     ]
            // },
        },
    ],
}