# npm
npm install echarts
 
# yarn
yarn add echarts
 
# pnpm
pnpm add echarts
 
# CDN
<script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>

import * as echarts from 'echarts'
 
// 初始化图表实例
const chartDom = document.getElementById('main')!
const myChart = echarts.init(chartDom)
 
// 配置项
const option = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
}
 
// 使用配置项渲染图表
myChart.setOption(option)

<template>
  <div ref="chartRef" style="width: 600px; height: 400px"></div>
</template>
 
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
 
const chartRef = ref<HTMLElement>()
let chartInstance: echarts.ECharts | null = null
 
onMounted(() => {
  chartInstance = echarts.init(chartRef.value!)
  chartInstance.setOption({
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
    yAxis: { type: 'value' },
    series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
  })
})
 
onUnmounted(() => {
  chartInstance?.dispose()
})
</script>

import { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
 
export default function EChartsDemo() {
  const chartRef = useRef<HTMLDivElement>(null)
  let chartInstance: echarts.ECharts | null = null
 
  useEffect(() => {
    chartInstance = echarts.init(chartRef.current!)
    chartInstance.setOption({
      xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
      yAxis: { type: 'value' },
      series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }]
    })
 
    return () => {
      chartInstance?.dispose()
    }
  }, [])
 
  return <div ref={chartRef} style={{ width: 600, height: 400 }} />
}

npm install vue-echarts  # Vue
npm install echarts-for-react  # React

// 按需引入核心和组件
import * as echarts from 'echarts/core'
import { BarChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
 
// 注册组件
echarts.use([
  BarChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  CanvasRenderer
])
 
// 初始化图表
const chart = echarts.init(document.getElementById('main')!)

// 注册自定义主题
echarts.registerTheme('myTheme', {
  color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'],
  backgroundColor: 'rgba(252,252,252,0)',
  textStyle: {},
  title: {
    textStyle: { fontSize: 16, fontWeight: 'bold' }
  }
})
 
// 使用主题
const chart = echarts.init(document.getElementById('main'), 'myTheme')

<template>
  <v-chart :option="chartOption" autoresize />
</template>
 
<script setup lang="ts">
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import VChart from 'vue-echarts'
 
use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent])
 
const chartOption = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
  yAxis: { type: 'value' },
  series: [{ data: [150, 230, 224], type: 'line' }]
}
</script>

import ReactECharts from 'echarts-for-react'
 
export default function Chart() {
  const option = {
    xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
    yAxis: { type: 'value' },
    series: [{ data: [150, 230, 224], type: 'line' }]
  }
 
  return <ReactECharts option={option} style={{ height: 400 }} />
}

import * as echarts from 'echarts'
import { createCanvas } from 'canvas'
 
const canvas = createCanvas(800, 600)
const chart = echarts.init(canvas as any)
 
chart.setOption({
  // ... 配置项
})
 
// 导出图片
const buffer = canvas.toBuffer('image/png')

// 定期更新数据
setInterval(() => {
  const newData = generateRandomData()
  chart.setOption({
    series: [{ data: newData }]
  })
}, 2000)

npm install echarts-gl

import 'echarts-gl'
 
const chart = echarts.init(document.getElementById('main')!)
chart.setOption({
  xAxis3D: { type: 'category', data: [...] },
  yAxis3D: { type: 'category', data: [...] },
  zAxis3D: { type: 'category', data: [...] },
  series: [{
    type: 'bar3D',
    data: [...]
  }]
})

// ✅ 推荐：按需引入
import * as echarts from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
 
echarts.use([BarChart, GridComponent, CanvasRenderer])
 
// ❌ 避免：引入整个包
import * as echarts from 'echarts'

// ✅ 推荐：使用 dataset 分离数据和配置
const option = {
  dataset: {
    dimensions: ['product', '2020', '2021', '2022'],
    source: [
      ['Matcha Latte', 43.3, 85.8, 93.7],
      ['Milk Tea', 83.1, 73.4, 55.1],
      ['Cheese Cocoa', 86.4, 65.2, 82.5]
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  series: [
    { type: 'bar' },
    { type: 'bar' },
    { type: 'bar' }
  ]
}
 
// ❌ 避免：硬编码数据到 series

// 完全替换配置
chart.setOption(newOption, { notMerge: true })
 
// 合并配置（默认）
chart.setOption(newOption, { notMerge: false })
 
// 延迟更新（批量操作时提升性能）
chart.setOption(newOption, { lazyUpdate: true })

// ✅ 使用 ResizeObserver
const observer = new ResizeObserver(() => {
  chart.resize()
})
observer.observe(container)
 
// ❌ 避免：直接监听 window resize
window.addEventListener('resize', () => {
  chart.resize()
})

// 动态切换主题
function toggleTheme(isDark: boolean) {
  chart.dispose()
  chart = echarts.init(container, isDark ? 'dark' : 'light')
  chart.setOption(option)
}

const option = {
  series: [{
    type: 'line',
    data: largeDataset, // 百万级数据
    large: true,
    largeThreshold: 2000, // 超过 2000 条启用大数据模式
    sampling: 'lttb', // 使用 LTTB 下采样算法
    showSymbol: false // 隐藏数据点
  }]
}

// 引入中国地图
import chinaGeoJSON from 'echarts/map/json/china.json'
echarts.registerMap('china', chinaGeoJSON)
 
// 使用地图
const option = {
  geo: {
    map: 'china',
    roam: true
  },
  series: [{
    type: 'map',
    map: 'china',
    data: [...]
  }]
}