auto-solution/modeler/src/views/ai/applications/charts/line-options.ts

/*
 * This file is part of the kernelstudio package.
 *
 * (c) 2014-2026 zlin <admin@kernelstudio.com>
 *
 * For the full copyright and license information, please view the LICENSE file
 * that was distributed with this source code.
 */

import { xAxisConfig } from './config';
import type { ChartOption } from './types';

export interface LineChartOption extends ChartOption{
}

export const createLineChartOption = (options: LineChartOption = {}) => {
  let blueName =  options.blueName ?? '蓝方';
  let redName = options.redName ?? '红方';
  return {
    title: {
      text: options.title,
      textStyle: {
        color: '#EEE', // 标题字体颜色
        fontSize: 16,
      },
    },
    tooltip: {
      trigger: 'axis',
      textStyle: {
        color: '#999', // 提示框字体颜色
      },
    },
    grid: {
      left: '1%',
      right: '5%',
      bottom: options.xAxisDataVisible ? '15%' : '10%',
      containLabel: true,
    },
    legend: {
      data: [blueName, redName],
      textStyle: {
        color: '#ddd',
        fontSize: 14,
      },
    },
    xAxis: {
      show: options.xAxisDataVisible,
      type: 'category',
      data: options.xAxisData,
      boundaryGap: [0.1, 0.1],
      ...xAxisConfig,
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0.1, 0.1],
      ...xAxisConfig,
    },
    series: [
      {
        name: blueName,
        type: 'line',
        // stack: 'Total',
        data: options.blueData,
        lineStyle: {
          color: '#409EFF',
          width: 2,
        },
        itemStyle: {
          color: '#409EFF',
        },
        emphasis: {
          itemStyle: {
            color: 'blue', // 高亮时填充色（白色）
            borderColor: '#409EFF', // 高亮时边框色
            borderWidth: 4,
          },
          symbolSize: 12, // 高亮时圆点放大
        },
        label: {
          show: options.labelVisible, // 开启数值显示
          position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
          textStyle: {
            color: '#eee', // 数值文字颜色
            fontSize: 12, // 数值文字大小
          },
        },
      },
      {
        name: redName,
        type: 'line',
        // stack: 'Total',
        data: options.redData,
        lineStyle: {
          color: '#bc1f1f',
          width: 2,
        },
        itemStyle: {
          color: '#bc1f1f',
        },
        emphasis: {
          itemStyle: {
            color: 'blue', // 高亮时填充色（白色）
            borderColor: 'red', // 高亮时边框色
            borderWidth: 4,
          },
          symbolSize: 12, // 高亮时圆点放大
        },
        label: {
          show: options.labelVisible, // 开启数值显示
          position: 'top', // 数值显示在柱子顶部（可选：top/inside/outside/bottom等）
          textStyle: {
            color: '#eee', // 数值文字颜色
            fontSize: 12, // 数值文字大小
          },
        },
      },
    ],
  };
};


// line-options.ts
export interface ChartOptimizationOptions {
  showAllSymbol?: boolean;
  animation?: boolean;
  large?: boolean;
  progressive?: number;
  progressiveThreshold?: number;
}

export const createOptimizedLineChartOption = (
  title: string,
  xAxisData: string[],
  blueData: number[],
  redData: number[],
  optimization: ChartOptimizationOptions = {}
): echarts.EChartsOption => {
  const {
    showAllSymbol = false,
    animation = false,
    large = true,
    progressive = 500,
    progressiveThreshold = 1000,
  } = optimization;

  return {
    title: {
      text: title,
      left: 'center',
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      // 大数据时优化tooltip性能
      confine: true,
      appendToBody: true,
    },
    legend: {
      data: ['蓝方轨迹', '红方轨迹'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLabel: {
        rotate: 45,
        // 减少标签显示密度
        interval: (index: number) => index % 50 === 0,
      },
      // 大数据优化
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      name: '归一化值',
      // 大数据优化
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100,
        minValueSpan: 10
      },
      {
        show: true,
        type: 'slider',
        top: '90%',
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: '蓝方轨迹',
        type: 'line',
        data: blueData,
        smooth: false, // 大数据时关闭平滑，提高性能
        lineStyle: {
          width: 1 // 减小线宽
        },
        itemStyle: {
          color: '#1890ff'
        },
        // 性能优化配置
        showSymbol: showAllSymbol,
        symbol: 'circle',
        symbolSize: 2, // 减小符号大小
        animation: animation,
        animationThreshold: 2000,
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        // 大数据模式优化
        progressive: progressive,
        progressiveThreshold: progressiveThreshold,
        progressiveChunkMode: 'mod',
        // 采样策略
        sampling: 'lttb', // 使用LTTB采样算法，保留趋势特征
      },
      {
        name: '红方轨迹',
        type: 'line',
        data: redData,
        smooth: false,
        lineStyle: {
          width: 1
        },
        itemStyle: {
          color: '#ff4d4f'
        },
        showSymbol: showAllSymbol,
        symbol: 'circle',
        symbolSize: 2,
        animation: animation,
        animationThreshold: 2000,
        animationDuration: 1000,
        animationEasing: 'cubicOut',
        progressive: progressive,
        progressiveThreshold: progressiveThreshold,
        progressiveChunkMode: 'mod',
        sampling: 'lttb',
      }
    ]
  };
};