@easy-editor/materials-dashboard-line-chart 0.0.3 → 0.0.4

package/dist/meta.min.js

@@ -1,2 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsLineChartMeta={})}(this,function(e){"use strict";const t="EasyEditorMaterialsLineChart",a=[{name:"Mon",value1:120,value2:80},{name:"Tue",value1:200,value2:120},{name:"Wed",value1:150,value2:100},{name:"Thu",value1:280,value2:180},{name:"Fri",value1:220,value2:140},{name:"Sat",value1:300,value2:200},{name:"Sun",value1:250,value2:160}];const r={componentName:t,title:"折线图",group:"chart",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-line-chart",version:"0.0.2",globalName:t,componentName:t},snippets:[{title:"折线图",screenshot:"",schema:{componentName:t,props:{data:a,xField:"name",yFields:["value1","value2"],showGrid:!0,showLegend:!0,glowEffect:!0,strokeWidth:2},$dashboard:{rect:{width:400,height:300}}}},{title:"简单折线图",screenshot:"",schema:{componentName:t,props:{data:a,xField:"name",yFields:["value1"],showGrid:!0,showLegend:!1,glowEffect:!0,strokeWidth:3},$dashboard:{rect:{width:300,height:200}}}}],configure:{props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"id",title:"ID",setter:"NodeIdSetter",extraProps:{label:!1}},{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{type:"group",title:"基础属性",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}}]},{type:"group",title:"数据",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"data",title:"数据",setter:"JsonSetter"},{name:"xField",title:"X轴字段",setter:"StringSetter",extraProps:{defaultValue:"name"}},{name:"yFields",title:"Y轴字段",setter:{componentName:"ArraySetter",props:{itemSetter:"StringSetter"}}}]},{type:"group",title:"坐标轴",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"xAxisLabel",title:"X轴标签",setter:"StringSetter"},{name:"yAxisLabel",title:"Y轴标签",setter:"StringSetter"},{name:"xAxisVisible",title:"显示X轴",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"yAxisVisible",title:"显示Y轴",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"axisLabelRotate",title:"标签旋转",setter:{componentName:"SliderSetter",props:{min:-90,max:90,step:15,suffix:"°"}},extraProps:{defaultValue:0}}]},{type:"group",title:"数值格式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"valuePrefix",title:"前缀",setter:"StringSetter"},{name:"valueSuffix",title:"后缀",setter:"StringSetter"},{name:"valueDecimals",title:"小数位数",setter:{componentName:"NumberSetter",props:{suffix:"位"}},extraProps:{defaultValue:0}},{name:"valueSeparator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!1}}]},{type:"group",title:"样式",setter:{componentName:"CollapseSetter",props:{icon:!1}},items:[{name:"colors",title:"颜色",setter:{componentName:"ArraySetter",props:{itemSetter:"ColorSetter"}}},{name:"strokeWidth",title:"线条宽度",setter:{componentName:"SliderSetter",props:{min:1,max:10,step:1,suffix:"px"}},extraProps:{defaultValue:2}},{name:"smooth",title:"平滑曲线",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"areaFill",title:"区域填充",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"showGrid",title:"显示网格",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"showLegend",title:"显示图例",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"legendPosition",title:"图例位置",setter:{componentName:"SelectSetter",props:{options:[{label:"顶部",value:"top"},{label:"底部",value:"bottom"},{label:"左侧",value:"left"},{label:"右侧",value:"right"}]}},extraProps:{defaultValue:"bottom"}},{name:"showTooltip",title:"显示提示",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"glowEffect",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!0}}]}]},{type:"group",key:"data",title:"数据",items:[{name:"dataBinding",title:"数据绑定",setter:"DataBindingSetter"}]},{type:"group",key:"advanced",title:"高级",items:[{name:"condition",title:"显隐控制",setter:"SwitchSetter",extraProps:{defaultValue:!0,supportVariable:!0}}]}]}],component:{},supports:{},advanced:{}}};e.default=r,Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=meta.min.js.map
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsLineChartMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),s=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),n="EasyEditorMaterialsLineChart";const p=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,s]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"chartData",title:"数据",items:[{name:"xField",title:"X轴字段",setter:"StringSetter",extraProps:{defaultValue:"name"}},{name:"yFields",title:"Y轴字段",setter:{componentName:"ArraySetter",props:{itemSetter:"StringSetter"}},extraProps:{defaultValue:["value1","value2"]}}]},{type:"group",key:"style",title:"样式",items:[{name:"colors",title:"颜色",setter:{componentName:"ArraySetter",props:{itemSetter:"ColorSetter"}}},{name:"strokeWidth",title:"线条宽度",setter:{componentName:"SliderSetter",props:{min:1,max:10,step:1,suffix:"px"}},extraProps:{defaultValue:2}},{name:"smooth",title:"平滑曲线",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"areaFill",title:"区域填充",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"glowEffect",title:"发光效果",setter:"SwitchSetter",extraProps:{defaultValue:!0}}]},{type:"group",key:"legend",title:"图例",items:[{name:"showGrid",title:"显示网格",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"showLegend",title:"显示图例",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"legendPosition",title:"图例位置",setter:{componentName:"SelectSetter",props:{options:[{label:"顶部",value:"top"},{label:"底部",value:"bottom"},{label:"左侧",value:"left"},{label:"右侧",value:"right"}]}},extraProps:{defaultValue:"bottom"}},{name:"showTooltip",title:"显示提示",setter:"SwitchSetter",extraProps:{defaultValue:!0}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"name",label:"name",type:"string",required:!0,description:"类目名称"},{name:"value1",label:"value1",type:"number",required:!0,description:"数值1"},{name:"value2",label:"value2",type:"number",required:!1,description:"数值2"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}}),d=[{name:"A",value1:120,value2:80},{name:"B",value1:200,value2:120},{name:"C",value1:150,value2:100},{name:"D",value1:280,value2:180},{name:"E",value1:220,value2:140}];const u={componentName:n,title:"折线图",group:"chart",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-line-chart",version:"0.0.4",globalName:n,componentName:n},snippets:[{title:"折线图",screenshot:"",schema:{componentName:n,title:"折线图",props:{$data:t(d),xField:"name",yFields:["value1","value2"],showGrid:!0,showLegend:!0,glowEffect:!0,strokeWidth:2,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:400,height:300}}}},{title:"面积图",screenshot:"",schema:{componentName:n,title:"面积图",props:{$data:t(d),xField:"name",yFields:["value1","value2"],showGrid:!0,showLegend:!0,glowEffect:!0,strokeWidth:2,areaFill:!0,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:400,height:300}}}},{title:"简单折线图",screenshot:"",schema:{componentName:n,title:"简单折线图",props:{$data:t(d),xField:"name",yFields:["value1"],showGrid:!0,showLegend:!1,glowEffect:!0,strokeWidth:3,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:200}}}}],configure:p};e.meta=u});

package/easypack.config.ts

@@ -0,0 +1,10 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-line-chart",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Line Chart component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -48,20 +48,16 @@
   },
   "dependencies": {
     "echarts": "^5.6.0",
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "dev:debug": "vite --port 5002",
     "format": "biome format --write .",
     "lint": "biome check .",
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
-    "build:js": "rollup -c",
-    "build:types": "pnpm types",
-    "types": "npm-run-all -nl types:*",
-    "types:src": "tsc --project tsconfig.build.json",
-    "test-types": "tsc --project tsconfig.test.json"
+    "build:js": "easypack build"
   },
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js"

package/src/component.tsx

@@ -1,232 +1,277 @@
-import { useEffect, useRef, type CSSProperties, type Ref } from 'react'
-import * as echarts from 'echarts/core'
-import { LineChart } from 'echarts/charts'
-import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-import { CanvasRenderer } from 'echarts/renderers'
-import type { SeriesOption } from 'echarts'
-import { DEFAULT_COLORS, DEFAULT_DATA, type DataPoint } from './constants'
-import styles from './component.module.css'
-
-// 按需注册 ECharts 组件
-echarts.use([LineChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])
-
-interface LineChartProps {
-  ref?: Ref<HTMLDivElement>
-  data?: DataPoint[]
-  xField?: string
-  yFields?: string[]
-  colors?: string[]
-  showGrid?: boolean
-  showLegend?: boolean
-  showTooltip?: boolean
-  glowEffect?: boolean
-  strokeWidth?: number
-  areaFill?: boolean
-  smooth?: boolean
-  style?: CSSProperties
-}
-
-// 构建 series 配置
-const buildSeries = (
-  yFields: string[],
-  data: DataPoint[],
-  colors: string[],
-  options: {
-    smooth: boolean
-    strokeWidth: number
-    glowEffect: boolean
-    areaFill: boolean
-  },
-): SeriesOption[] => {
-  const { smooth, strokeWidth, glowEffect, areaFill } = options
-  return yFields.map((field, index) => {
-    const color = colors[index % colors.length]
-    return {
-      name: field,
-      type: 'line' as const,
-      data: data.map(item => item[field] as number),
-      smooth,
-      lineStyle: {
-        width: strokeWidth,
-        color,
-        shadowColor: glowEffect ? color : 'transparent',
-        shadowBlur: glowEffect ? 10 : 0,
-      },
-      itemStyle: {
-        color,
-      },
-      areaStyle: areaFill
-        ? {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: `${color}40` },
-              { offset: 1, color: `${color}05` },
-            ]),
-          }
-        : undefined,
-      symbol: 'circle',
-      symbolSize: 6,
-    }
-  })
-}
-
-// 构建图表配置
-const buildOption = (
-  data: DataPoint[],
-  xField: string,
-  series: SeriesOption[],
-  options: {
-    showGrid: boolean
-    showLegend: boolean
-    showTooltip: boolean
-  },
-) => {
-  const { showGrid, showLegend, showTooltip } = options
-
-  return {
-    backgroundColor: 'transparent',
-    grid: {
-      top: showLegend ? 40 : 20,
-      right: 20,
-      bottom: 30,
-      left: 50,
-      containLabel: false,
-    },
-    xAxis: {
-      type: 'category',
-      data: data.map(item => item[xField]),
-      axisLine: {
-        lineStyle: {
-          color: '#8899aa',
-          opacity: 0.3,
-        },
-      },
-      axisTick: { show: false },
-      axisLabel: {
-        color: '#8899aa',
-        fontSize: 12,
-      },
-      splitLine: {
-        show: showGrid,
-        lineStyle: {
-          color: '#00d4ff',
-          opacity: 0.1,
-          type: 'dashed',
-        },
-      },
-    },
-    yAxis: {
-      type: 'value',
-      axisLine: {
-        lineStyle: {
-          color: '#8899aa',
-          opacity: 0.3,
-        },
-      },
-      axisTick: { show: false },
-      axisLabel: {
-        color: '#8899aa',
-        fontSize: 11,
-      },
-      splitLine: {
-        show: showGrid,
-        lineStyle: {
-          color: '#00d4ff',
-          opacity: 0.1,
-          type: 'dashed',
-        },
-      },
-    },
-    tooltip: showTooltip
-      ? {
-          trigger: 'axis',
-          backgroundColor: 'rgba(0, 20, 40, 0.9)',
-          borderColor: '#00d4ff',
-          borderWidth: 1,
-          textStyle: {
-            color: '#fff',
-          },
-        }
-      : undefined,
-    legend: showLegend
-      ? {
-          show: true,
-          top: 10,
-          textStyle: {
-            color: '#8899aa',
-            fontSize: 11,
-          },
-        }
-      : undefined,
-    series,
-  }
-}
-
-const LineChartComponent = (props: LineChartProps) => {
-  const {
-    ref,
-    data = DEFAULT_DATA,
-    xField = 'name',
-    yFields = ['value1', 'value2'],
-    colors = DEFAULT_COLORS,
-    showGrid = true,
-    showLegend = true,
-    showTooltip = true,
-    glowEffect = true,
-    strokeWidth = 2,
-    areaFill = false,
-    smooth = true,
-    style: externalStyle,
-  } = props
-
-  const chartRef = useRef<HTMLDivElement>(null)
-  const chartInstance = useRef<echarts.ECharts | null>(null)
-
-  useEffect(() => {
-    if (!chartRef.current) {
-      return
-    }
-
-    chartInstance.current = echarts.init(chartRef.current)
-
-    // 构建 series
-    const series = buildSeries(yFields, data, colors, {
-      smooth,
-      strokeWidth,
-      glowEffect,
-      areaFill,
-    })
-
-    const option = buildOption(data, xField, series, {
-      showGrid,
-      showLegend,
-      showTooltip,
-    })
-
-    chartInstance.current.setOption(option)
-
-    // 响应式调整
-    const resizeObserver = new ResizeObserver(() => {
-      chartInstance.current?.resize()
-    })
-    resizeObserver.observe(chartRef.current)
-
-    return () => {
-      resizeObserver.disconnect()
-      chartInstance.current?.dispose()
-    }
-  }, [data, xField, yFields, colors, showGrid, showLegend, showTooltip, glowEffect, strokeWidth, areaFill, smooth])
-
-  const containerStyle: CSSProperties = {
-    width: '100%',
-    height: '100%',
-    ...externalStyle,
-  }
-
-  return (
-    <div className={styles.container} ref={ref} style={containerStyle}>
-      <div className={styles.chart} ref={chartRef} />
-    </div>
-  )
-}
-
-export default LineChartComponent
+/**
+ * Line Chart Component
+ * 折线图组件 - 支持数据源绑定和事件交互
+ */
+
+import { useEffect, useMemo, useRef, type CSSProperties } from 'react'
+import * as echarts from 'echarts/core'
+import { LineChart as EChartsLineChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import { CanvasRenderer } from 'echarts/renderers'
+import type { SeriesOption } from 'echarts'
+import { type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import { DEFAULT_COLORS, DEFAULT_DATA, type DataPoint } from './constants'
+import styles from './component.module.css'
+
+// 按需注册 ECharts 组件
+echarts.use([EChartsLineChart, GridComponent, TooltipComponent, LegendComponent, CanvasRenderer])
+
+export interface LineChartProps extends MaterialComponet {
+  /** X轴字段 */
+  xField?: string
+  /** Y轴字段列表 */
+  yFields?: string[]
+  /** 颜色列表 */
+  colors?: string[]
+  /** 显示网格 */
+  showGrid?: boolean
+  /** 显示图例 */
+  showLegend?: boolean
+  /** 显示提示 */
+  showTooltip?: boolean
+  /** 发光效果 */
+  glowEffect?: boolean
+  /** 线条宽度 */
+  strokeWidth?: number
+  /** 区域填充 */
+  areaFill?: boolean
+  /** 平滑曲线 */
+  smooth?: boolean
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+}
+
+// 构建 series 配置
+const buildSeries = (
+  yFields: string[],
+  data: DataPoint[],
+  colors: string[],
+  options: {
+    smooth: boolean
+    strokeWidth: number
+    glowEffect: boolean
+    areaFill: boolean
+  },
+): SeriesOption[] => {
+  const { smooth, strokeWidth, glowEffect, areaFill } = options
+  return yFields.map((field, index) => {
+    const color = colors[index % colors.length]
+    return {
+      name: field,
+      type: 'line' as const,
+      data: data.map(item => item[field] as number),
+      smooth,
+      lineStyle: {
+        width: strokeWidth,
+        color,
+        shadowColor: glowEffect ? color : 'transparent',
+        shadowBlur: glowEffect ? 10 : 0,
+      },
+      itemStyle: {
+        color,
+      },
+      areaStyle: areaFill
+        ? {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: `${color}40` },
+              { offset: 1, color: `${color}05` },
+            ]),
+          }
+        : undefined,
+      symbol: 'circle',
+      symbolSize: 6,
+    }
+  })
+}
+
+// 构建图表配置
+const buildOption = (
+  data: DataPoint[],
+  xField: string,
+  series: SeriesOption[],
+  options: {
+    showGrid: boolean
+    showLegend: boolean
+    showTooltip: boolean
+  },
+) => {
+  const { showGrid, showLegend, showTooltip } = options
+
+  return {
+    backgroundColor: 'transparent',
+    grid: {
+      top: showLegend ? 40 : 20,
+      right: 20,
+      bottom: 30,
+      left: 50,
+      containLabel: false,
+    },
+    xAxis: {
+      type: 'category',
+      data: data.map(item => item[xField]),
+      axisLine: {
+        lineStyle: {
+          color: '#8899aa',
+          opacity: 0.3,
+        },
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#8899aa',
+        fontSize: 12,
+      },
+      splitLine: {
+        show: showGrid,
+        lineStyle: {
+          color: '#00d4ff',
+          opacity: 0.1,
+          type: 'dashed',
+        },
+      },
+    },
+    yAxis: {
+      type: 'value',
+      axisLine: {
+        lineStyle: {
+          color: '#8899aa',
+          opacity: 0.3,
+        },
+      },
+      axisTick: { show: false },
+      axisLabel: {
+        color: '#8899aa',
+        fontSize: 11,
+      },
+      splitLine: {
+        show: showGrid,
+        lineStyle: {
+          color: '#00d4ff',
+          opacity: 0.1,
+          type: 'dashed',
+        },
+      },
+    },
+    tooltip: showTooltip
+      ? {
+          trigger: 'axis',
+          backgroundColor: 'rgba(0, 20, 40, 0.9)',
+          borderColor: '#00d4ff',
+          borderWidth: 1,
+          textStyle: {
+            color: '#fff',
+          },
+        }
+      : undefined,
+    legend: showLegend
+      ? {
+          show: true,
+          top: 10,
+          textStyle: {
+            color: '#8899aa',
+            fontSize: 11,
+          },
+        }
+      : undefined,
+    series,
+  }
+}
+
+export const LineChart: React.FC<LineChartProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  xField = 'name',
+  yFields = ['value1', 'value2'],
+  colors = DEFAULT_COLORS,
+  showGrid = true,
+  showLegend = true,
+  showTooltip = true,
+  glowEffect = true,
+  strokeWidth = 2,
+  areaFill = false,
+  smooth = true,
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  const chartRef = useRef<HTMLDivElement>(null)
+  const chartInstance = useRef<echarts.ECharts | null>(null)
+
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const data = useMemo<DataPoint[]>(() => {
+    if (dataSource.length > 0) {
+      return dataSource as DataPoint[]
+    }
+    return DEFAULT_DATA
+  }, [dataSource])
+
+  useEffect(() => {
+    if (!chartRef.current) {
+      return
+    }
+
+    chartInstance.current = echarts.init(chartRef.current)
+
+    // 构建 series
+    const series = buildSeries(yFields, data, colors, {
+      smooth,
+      strokeWidth,
+      glowEffect,
+      areaFill,
+    })
+
+    const option = buildOption(data, xField, series, {
+      showGrid,
+      showLegend,
+      showTooltip,
+    })
+
+    chartInstance.current.setOption(option)
+
+    // 响应式调整
+    const resizeObserver = new ResizeObserver(() => {
+      chartInstance.current?.resize()
+    })
+    resizeObserver.observe(chartRef.current)
+
+    return () => {
+      resizeObserver.disconnect()
+      chartInstance.current?.dispose()
+    }
+  }, [data, xField, yFields, colors, showGrid, showLegend, showTooltip, glowEffect, strokeWidth, areaFill, smooth])
+
+  const containerStyle: CSSProperties = {
+    width: '100%',
+    height: '100%',
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
+      <div className={styles.chart} ref={chartRef} />
+    </div>
+  )
+}