option = {
  color: ['#092F64'],
  tooltip: { trigger: 'axis', formatter: '{b}: ${c}M' },
  xAxis: {
    type: 'category',
    data: ['Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar','Apr','May'],
    axisLabel: { fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6B7280' }
  },
  yAxis: {
    type: 'value', min: 2.5,
    axisLabel: { formatter: '${value}M', fontFamily: 'IBM Plex Mono', fontSize: 11, color: '#6B7280' }
  },
  dataZoom: [{ type: 'slider', height: 20, bottom: 0 }],
  series: [{
    type: 'line', smooth: true, symbol: 'circle', symbolSize: 8,
    data: [3.2, 3.4, 3.1, 3.6, 3.8, 4.0, 3.7, 4.2, 4.5, 4.1, 3.9, 4.2],
    lineStyle: { width: 3, color: '#092F64' },
    areaStyle: { color: { type: 'linear', x:0, y:0, x2:0, y2:1,
      colorStops: [{ offset: 0, color: 'rgba(233,245,255,0.8)' },
                   { offset: 1, color: 'rgba(233,245,255,0)' }] } },
    itemStyle: { color: '#092F64', borderColor: '#fff', borderWidth: 2 }
  }]
};

option = {
  series: [{
    type: 'treemap',
    roam: false,
    leafDepth: 1,
    drillDownIcon: '>>',
    levels: [
      { itemStyle: { borderColor: '#fff', borderWidth: 3, gapWidth: 3 } },
      { itemStyle: { borderColor: '#E9F5FF', borderWidth: 2, gapWidth: 2 },
        upperLabel: { show: true, height: 24, color: '#fff',
          fontFamily: 'IBM Plex Mono', fontSize: 11, fontWeight: 600 } }
    ],
    data: [
      { name: 'Dairy — $18.5M', value: 18500000,
        itemStyle: { color: '#092F64' },
        children: [
          { name: 'Barrel Cheddar', value: 8200000, itemStyle:{color:'#092F64'} },
          { name: 'Mozzarella', value: 4800000, itemStyle:{color:'#1A5799'} },
          { name: 'Process Cheese', value: 3200000, itemStyle:{color:'#468BE6'} },
          { name: 'Butter', value: 2300000, itemStyle:{color:'#93BFEF'} }
        ]
      },
      /* ... more categories ... */
    ]
  }]
};

// Uses ECharts scatter with US state coordinate data
// Bubble size = revenue, color intensity = revenue density
option = {
  tooltip: { trigger: 'item', formatter: function(p) {
    return p.name + ': $' + p.value[2].toFixed(1) + 'M';
  }},
  geo: { /* ... US background or custom SVG ... */ },
  series: [{
    type: 'scatter', coordinateSystem: 'geo',
    symbolSize: function(val) { return Math.sqrt(val[2]) * 6; },
    data: stateData, // [{name, value: [lng, lat, revenue]}, ...]
    itemStyle: { color: '#092F64' }
  }]
};

option = {
  series: [{
    type: 'gauge', startAngle: 180, endAngle: 0,
    min: 90, max: 100,
    pointer: { length: '60%', width: 6, itemStyle: { color: '#092F64' } },
    axisLine: { lineStyle: { width: 20,
      color: [[0.5,'#DC2626'],[0.8,'#B45309'],[1,'#0F766E']] } },
    detail: { formatter: '{value}%', fontSize: 28, fontWeight: 700,
      fontFamily: 'IBM Plex Mono', color: '#092F64', offsetCenter: [0, '30%'] },
    data: [{ value: 99.2, name: 'COMPLIANT' }]
  }]
};

option = {
  visualMap: { min: 0, max: 200, inRange: { color: ['#F4F9FF','#E9F5FF','#93BFEF','#468BE6','#1A5799','#092F64'] } },
  calendar: { range: '2025', cellSize: ['auto', 14],
    itemStyle: { borderColor: '#fff', borderWidth: 2 },
    dayLabel: { nameMap: 'en', fontSize: 10, color: '#6B7280' } },
  series: { type: 'heatmap', coordinateSystem: 'calendar',
    data: generateYearData() // [[date, value], ...] }
};

// Bar race uses setInterval to update data each frame
var months = ['Dec 2025','Jan 2026','Feb 2026','Mar 2026','Apr 2026','May 2026'];
var customers = ['Good Eats Corp','Metro Foods','Atlantic Provisions', ...];
var frameData = { /* month: { customer: revenue } */ };
setInterval(function() {
  currentMonth = (currentMonth + 1) % months.length;
  chart.setOption({ /* update series data + title */ });
}, 2500);

option = {
  series: [{
    type: 'graph', layout: 'force', roam: true, draggable: true,
    force: { repulsion: 300, edgeLength: [80, 200] },
    emphasis: { focus: 'adjacency', lineStyle: { width: 4 } },
    nodes: dcNodes,  // [{name, symbolSize, itemStyle:{color}}]
    links: routes,   // [{source, target, lineStyle:{width}}]
    label: { show: true, position: 'bottom', fontFamily: 'IBM Plex Mono', fontSize: 10 }
  }]
};

// Dual-axis: bar (shipments) + line (on-time %)
// Auto-updates via setInterval every 3 seconds
option = {
  xAxis: { type: 'category', data: timeLabels },
  yAxis: [
    { type: 'value', name: 'Shipments', position: 'left' },
    { type: 'value', name: 'On-Time %', position: 'right', min: 85, max: 100 }
  ],
  series: [
    { type: 'bar', yAxisIndex: 0, data: shipmentData,
      itemStyle: { color: '#092F64' } },
    { type: 'line', yAxisIndex: 1, data: ontimeData, smooth: true,
      lineStyle: { color: '#0F766E', width: 3 },
      itemStyle: { color: '#0F766E' } }
  ]
};
setInterval(function() { /* push new data, shift old */ }, 3000);

// Spring easing applied to any ECharts instance
option = {
  animationEasing: 'elasticOut',
  animationDuration: 1200,
  // For data updates:
  animationEasingUpdate: 'elasticOut',
  animationDurationUpdate: 1200,
  series: [{
    // Per-series spring override
    animationDelay: function(idx) {
      return idx * 80; // stagger each element
    }
  }]
};