The Complete Production SOP: How to Deploy and Run Apache ECharts Enterprise Visualizations in Autonomous AI Agents

---
name: "echarts-enterprise-data-dashboard"
description: "Render complex multi-dimensional enterprise charts and maps with Apache ECharts."
metadata:
  author: "Apache"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create candlestick chart echarts"
  - "add datazoom slider echarts"
  - "switch echarts to svg renderer"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

import * as echarts from 'echarts/core';
import { CandlestickChart, BarChart } from 'echarts/charts';
import {
  TooltipComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components';
import { CanvasRenderer, SVGRenderer } from 'echarts/renderers';

echarts.use([
  CandlestickChart,
  BarChart,
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  CanvasRenderer,
  SVGRenderer
]);

export { echarts };

# Claude Code CLI execution
claude "create candlestick chart echarts with responsive resize and add datazoom slider echarts for daily OHLC data in src/components/StockChart.tsx"

import React, { useEffect, useRef } from 'react';
import { echarts } from '../charts/financialChart';
import type { ECharts, EChartsCoreOption } from 'echarts/core';

interface Props {
  data: Array<[string, number, number, number, number]>; // [Date, Open, Close, Lowest, Highest]
}

export const StockChart: React.FC<Props> = ({ data }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const instanceRef = useRef<ECharts | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    const chart = echarts.init(containerRef.current, null, { renderer: 'canvas' });
    instanceRef.current = chart;

    const option: EChartsCoreOption = {
      xAxis: { type: 'category', data: data.map(item => item[0]) },
      yAxis: { scale: true },
      series: [{
        type: 'candlestick',
        data: data.map(item => [item[1], item[2], item[3], item[4]])
      }],
      dataZoom: [
        { type: 'inside', start: 50, end: 100 },
        { type: 'slider', start: 50, end: 100 }
      ]
    };

    chart.setOption(option);

    const resizeObserver = new ResizeObserver(() => chart.resize());
    resizeObserver.observe(containerRef.current);

    return () => {
      resizeObserver.disconnect();
      chart.dispose();
    };
  }, [data]);

  return <div ref={containerRef} style={{ width: '100%', height: '450px' }} />;
};