td_official/src/views/largeScreen/components/optionList.ts

import * as echarts from 'echarts/core';
// import { PictorialBarChart } from 'echarts/charts'
// 客流量图
export const getOption = (xData: any, yData: any) => {
  const data = {
    xData,
    yData
  };
  const maxData = Math.ceil(Math.max(...data.yData));
  const barData = data.yData.map((item) => {
    return maxData;
  });
  const option = {
    grid: {
      top: '10%',
      left: '8%',
      right: '5%',
      bottom: '20%'
      // containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.xData,
      axisLine: {
        show: false
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        textStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      show: true,
      type: 'value',
      max: maxData,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: 'rgba(73, 169, 191, 0.2)'
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: '',
      textStyle: {
        color: '#fff'
      }
    },
    dataZoom: [
      {
        // show: true,
        start: 0,
        end: 30,
        bottom: 2, // 下滑块距离x轴底部的距离
        height: 23
      },
      {
        type: 'inside'
      }
    ],
    series: [
      {
        name: '柱图',
        type: 'bar',
        // barWidth: '10%',
        data: barData,
        tooltip: {
          show: false
        },
        barGap: '-50%',
        itemStyle: {
          normal: {
            color: 'rgba(73, 169, 191, 0.2)'
          }
        }
      },
      {
        name: '客单价',
        type: 'line',
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          normal: {
            color: 'rgba(217, 231, 255, 0.3)',
            shadowColor: 'rgba(0, 0, 0, .3)',
            shadowBlur: 0
            // shadowOffsetY: 5,
            // shadowOffsetX: 5,
          }
        },
        itemStyle: {
          color: 'rgba(224, 194, 22, 1)',
          borderWidth: 0,
          shadowBlur: 0
        },
        label: {
          show: false, // 显示数据标签
          color: 'rgba(255, 208, 59, 1)'
        },
        data: data.yData
      }
    ]
  };
  return option;
};

// 上菜分析图
export const getOption2 = (data: any) => {
  const maxData = Math.max(...data.yData);
  const option = {
    // backgroundColor: "#38445E",
    grid: {
      left: '10%',
      top: '13%',
      bottom: '16%',
      right: '10%'
    },
    xAxis: {
      data: data.xData,
      axisTick: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 129, 109, 0.1)',
          width: 1 //这里是为了突出显示加上的
        }
      },
      axisLabel: {
        textStyle: {
          color: '#999',
          fontSize: 12
        }
      }
    },
    yAxis: [
      {
        splitNumber: 2,
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255, 129, 109, 0.1)',
            width: 1 //这里是为了突出显示加上的
          }
        },
        axisLabel: {
          textStyle: {
            color: '#999'
          }
        },
        splitArea: {
          areaStyle: {
            color: 'rgba(255,255,255,.5)'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.5)',
            width: 0.5,
            type: 'dashed'
          }
        }
      }
    ],
    dataZoom: [
      {
        // show: true,

        start: 0,
        end: 30,
        bottom: 2, // 下滑块距离x轴底部的距离
        height: 23
      },
      {
        type: 'inside'
      }
    ],
    tooltip: {
      trigger: 'axis', // 设置为 'item'，表示鼠标悬浮在图形上时显示 tooltip
      // formatter: function (params) {
      //   return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
      // },
      backgroundColor: '', // 设置提示框的背景颜色
      textStyle: {
        color: '#fff' // 设置文字颜色
        // fontSize: 14 // 设置文字大小
      }
    },
    series: [
      {
        name: '订单数',
        type: 'pictorialBar',
        barCategoryGap: '0%',
        symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
        label: {
          show: false,
          position: 'top',
          distance: 15,
          color: 'rgba(255, 235, 59, 1)',
          // fontWeight: "bolder",
          fontSize: 16
        },
        itemStyle: {
          normal: {
            // color: {
            //   type: "linear",
            //   x: 0,
            //   y: 0,
            //   x2: 0,
            //   y2: 1,
            //   colorStops: [
            //     {
            //       offset: 0,
            //       color: "rgba(232, 94, 106, .8)", //  0%  处的颜色
            //     },
            //     {
            //       offset: 1,
            //       color: "rgba(232, 94, 106, .1)", //  100%  处的颜色
            //     },
            //   ],
            //   global: false, //  缺省为  false
            // },
            color: function (params: any) {
              if (params.data === maxData) {
                return 'rgba(255, 219, 103, 0.6)';
              } else {
                return 'rgba(239, 244, 255, 0.45)';
              }
            }
          },
          emphasis: {
            opacity: 1
          }
        },
        data: data.yData,
        z: 10
      }
    ]
  };
  return option;
};
//z折线
export const getLineOption = (lineData: any) => {
  const maxData = Math.max(...lineData.line1.flat());

  const option = {
    backgroundColor: '',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'transparent',
      color: '#7ec7ff',
      textStyle: {
        color: '#fff'
      },
      borderColor: '#7ec7ff'
    },
    legend: {
      align: 'left',
      right: '5%',
      top: '1%',
      type: 'plain',
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      // icon:'rect',
      itemGap: 15,
      itemWidth: 18,
      data: [
        {
          name: '收款金额'
        },
        {
          name: '付款金额'
        },
        {
          name: '净现金流'
        }
      ]
    },
    grid: {
      top: '12%',
      left: '1%',
      right: '3%',
      bottom: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: lineData.xLabel,
      boundaryGap: false,
      axisLine: {
        show: false
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        textStyle: {
          color: '#fff'
        }
      }
    },
    yAxis: {
      show: true,
      type: 'value',
      max: maxData,
      splitLine: {
        show: true,
        lineStyle: {
          type: 'solid',
          color: 'rgba(73, 169, 191, 0.2)'
        }
      }
    },
    // dataZoom: [
    //   {
    //     // show: true,
    //     start: 0,
    //     end: 30,
    //     bottom: 2, // 下滑块距离x轴底部的距离
    //     height: 23
    //   },
    //   {
    //     type: 'inside'
    //   }
    // ],
    series: [
      {
        name: '收款金额',
        type: 'line',
        symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: false,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          width: 1,
          color: 'rgba(80, 164, 225, 1)', // 线条颜色
          borderColor: 'rgba(0,0,0,.4)'
        },
        itemStyle: {
          color: 'rgba(80, 164, 225, 1)',
          borderWidth: 2,
          show: false
        },
        tooltip: {
          show: true
        },
        areaStyle: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(80, 164, 225, 0.4)'
              },
              {
                offset: 1,
                color: 'rgba(80, 164, 225, 0)'
              }
            ],
            false
          ),
          shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: lineData.line1[0]
      },
      {
        name: '付款金额',
        type: 'line',
        symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: false,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          width: 1,
          color: 'rgba(255, 224, 179, 1)', // 线条颜色
          borderColor: 'rgba(0,0,0,.4)'
        },
        itemStyle: {
          color: 'rgba(255, 224, 179, 1)',
          borderWidth: 2,
          show: true
        },
        tooltip: {
          show: true
        },
        areaStyle: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(255, 224, 179, 0.4)'
              },
              {
                offset: 1,
                color: 'rgba(255, 224, 179, 0)'
              }
            ],
            false
          ),
          shadowColor: 'rgba(255, 224, 179, 0.6)', //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: lineData.line1[1]
      },
      {
        name: '净现金流',
        type: 'line',
        symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: false,
        symbolSize: 0,
        smooth: true,
        lineStyle: {
          width: 1,
          color: 'rgba(39, 255, 252, 1)', // 线条颜色
          borderColor: 'rgba(0,0,0,.4)'
        },
        itemStyle: {
          color: 'rgba(39, 255, 252, 1)',
          borderWidth: 2,
          show: false
        },
        tooltip: {
          show: true
        },
        areaStyle: {
          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(39, 255, 252, 0.4)'
              },
              {
                offset: 1,
                color: 'rgba(39, 255, 252, 0)'
              }
            ],
            false
          ),
          shadowColor: 'rgba(39, 255, 252, 0.5)', //阴影颜色
          shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
        },
        data: lineData.line1[2]
      }
    ]
  };
  return option;
};
//#endregion

// 菜品销售图
export const getDishesOption = (data?: any) => {
  const res = data;
  const dataIndex = 1;
  const option = {
    xAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10 // 增大标签与轴线间距
      },
      width: 60, // 增大Y轴宽度
      data: res.name,
      axisLine: {
        lineStyle: {
          color: '#93C9C3'
        }
      }
    },
    grid: {
      top: '5%', // 设置网格区域与容器之间的边距
      bottom: '5%', // 同理
      left: '5%',
      containLabel: true
    },
    series: [
      {
        type: 'bar',
        data: res.ratio,
        barMaxWidth: 25,
        itemStyle: {
          barBorderRadius: 3,
          color: 'rgba(12, 242, 216, 0.2)'
        },
        label: {
          show: false
        }
      },
      {
        type: 'bar',
        data: res.data,
        barGap: '-100%',
        barMaxWidth: 25,
        itemStyle: {
          barBorderRadius: 3,
          color: function (params: any) {
            if (params.data <= 300) {
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { color: 'rgba(252, 105, 0, 1)', offset: 0 },
                { color: 'rgba(250, 42, 42, 1)', offset: 1 }
              ]);
            } else {
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { color: 'rgba(73, 169, 191, 1)', offset: 0 },
                { color: 'rgba(108, 248, 236, 1)', offset: 1 }
              ]);
            }
          }
        },
        label: {
          show: true,
          position: [200, -15],
          formatter: function (params: any) {
            if (params.data <= 300) {
              return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
            } else {
              return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
            }
          },
          rich: {
            a: {
              color: 'rgba(255, 78, 51, 1)'
            },
            b: {
              color: 'rgba(255, 235, 59, 1)'
            }
          }
        }
      }
    ]
  };
  return option;
};
// 菜品库存图
export const getInventoryOption = () => {
  const res = {
      data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
      name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
      ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
    },
    dataIndex = 1;
  const option = {
    xAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLabel: {
        show: false
      }
    },
    yAxis: {
      type: 'category',
      show: false,
      axisTick: {
        show: false
      },
      axisLabel: {
        margin: 10 // 增大标签与轴线间距
      },
      width: 20, // 增大Y轴宽度
      data: res.name,
      axisLine: {
        show: false,
        lineStyle: {
          color: '#93C9C3'
        }
      }
    },
    grid: {
      top: '5%', // 设置网格区域与容器之间的边距
      bottom: '5%', // 同理
      left: '5%',
      containLabel: true
    },
    series: [
      {
        type: 'bar',
        data: res.ratio,
        barMaxWidth: 6,
        itemStyle: {
          barBorderRadius: 3,
          color: 'rgba(12, 242, 216, 0.2)'
        },
        label: {
          show: true,
          position: [0, -15],
          fontSize: 14,
          color: '#fff',
          formatter: function (params: any) {
            return params.name;
          }
          // rich: {
          //   a: {
          //     color: "rgba(255, 78, 51, 1)",
          //   },
          //   b: {
          //     color: "rgba(255, 235, 59, 1)",
          //   },
          // },
        }
      },
      {
        type: 'bar',
        data: res.data,
        barGap: '-100%',
        barMaxWidth: 6,
        itemStyle: {
          barBorderRadius: 0,
          color: function (params: any) {
            if (params.dataIndex === dataIndex) {
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { color: 'rgba(255, 78, 51, 1)', offset: 0 },
                { color: 'rgba(252, 105, 0, 0)', offset: 1 }
              ]);
            } else {
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { color: 'rgba(242, 224, 27, 1)', offset: 0 },
                { color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
                { color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
              ]);
            }
          }
        },
        label: {
          show: true,
          position: [200, -15],
          formatter: function (params: any) {
            if (params.dataIndex === dataIndex) {
              return `{a| ${params.value}g}`;
            } else {
              return `{b| ${params.value}g}`;
            }
          },
          rich: {
            a: {
              color: 'rgba(255, 78, 51, 1)'
            },
            b: {
              color: 'rgba(255, 235, 59, 1)'
            }
          }
        }
      }
    ]
  };
  return option;
};
export const getBarOptions = (data: any) => {
  const option = {
    backgroundColor: '',
    grid: {
      left: '7%',
      top: '4%',
      bottom: '25%',
      right: '2%'
    },
    tooltip: {
      show: true,
      backgroundColor: '',
      trigger: 'axis',
      formatter: '{b0}：{c0}元',
      textStyle: {
        color: '#fff'
      }
      // borderColor: 'rgba(252, 217, 18, 1)'
    },
    xAxis: [
      {
        type: 'category',
        data: data.name,
        axisLine: {
          lineStyle: {
            color: 'rgba(108, 128, 151, 0.3)'
          }
        },
        axisLabel: {
          textStyle: {
            color: '#999',
            fontSize: 12
          }
        },
        axisTick: {
          // show: true,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(108, 128, 151, 0.3)',
            type: 'dashed'
          }
        }
      }
    ],
    yAxis: [
      {
        axisLabel: {
          formatter: function (value) {
            if (value >= 1000) {
              value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
            }
            return value;
          },
          color: 'rgba(255, 255, 255, 0.8)'
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(108, 128, 151, 0.3)'
          }
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(108, 128, 151, 0.3)',
            type: 'dashed'
          }
        }
      }
    ],
    dataZoom: [
      {
        // show: true,
        start: 0,
        end: 30,
        bottom: 2, // 下滑块距离x轴底部的距离
        height: 23
      },
      {
        type: 'inside'
      }
    ],
    series: [
      {
        type: 'bar',
        data: data.value,
        stack: '合并',
        barWidth: '15',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
              },
              {
                offset: 0.7,
                color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
              }
            ],
            false
          )
        },
        label: {
          show: true,
          formatter: '{c}',
          position: 'top',
          color: '#fff',
          fontSize: 10
          // padding: 5
        }
      }
      // {
      //   type: 'bar',
      //   stack: '合并',
      //   data: topData,
      //   barWidth: '15',
      //   itemStyle: {
      //     color: 'rgba(252, 217, 18, 1)'
      //   }
      // }
    ]
  };
  return option;
};