import echarts = require('echarts');

import * as echarts from 'echarts';
// or
import { init, use } from 'echarts';

// Named imports are now preferred
import { init, use } from 'echarts';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';

// Review your viewCoordSys configurations
option = {
  // Ensure center calculations align with new implementation
};

option = {
  series: [{
    type: 'candlestick',
    emphasis: {
      itemStyle: {
        color: '#c23531',
        borderColor: '#c23531'
      }
    },
    blur: {
      itemStyle: {
        opacity: 0.5
      }
    }
  }]
};

{
  "dependencies": {
    "echarts": "^6.0.0",
    "zrender": "^6.0.0"
  }
}

{
  "devDependencies": {
    "typescript": "^4.4.3"
  }
}

import type { EChartsOption } from 'echarts/types/dist/all';
import type { BarSeriesOption } from 'echarts/types/dist/charts';
import type { GridComponentOption } from 'echarts/types/dist/components';

npm install [email protected] [email protected]

// Before
import echarts = require('echarts');

// After
import * as echarts from 'echarts';

{
  "compilerOptions": {
    "module": "ES2022",
    "moduleResolution": "node16",
    "esModuleInterop": true
  }
}

// ❌ Old style (may cause errors)
import echarts = require('echarts');

// ✅ New style
import * as echarts from 'echarts';

module.exports = {
  resolve: {
    extensions: ['.ts', '.js', '.mjs']
  }
};