ECharts 专业化数据可视化开发完整学习文档（从基础到企业级实战）

// src/utils/echarts.ts
import * as echarts from 'echarts/core'
import { BarChart, LineChart, PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'

// 注册需要的组件与图表
echarts.use([
  TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent,
  BarChart, LineChart, PieChart, CanvasRenderer
])

export default echarts

// src/hooks/useEcharts.ts
import { ref, onMounted, onUnmounted, watch } from 'vue'
import echarts from '@/utils/echarts'
import type { ECharts, EChartsOption } from 'echarts'

export function useEcharts(domRef: HTMLElement | null, initOption: EChartsOption) {
  const chartInstance = ref<ECharts | null>(null)

  // 初始化图表
  const initChart = () => {
    if (!domRef) return
    chartInstance.value = echarts.init(domRef)
    chartInstance.value.setOption(initOption)
  }

  // 更新配置
  const setOption = (option: EChartsOption) => {
    chartInstance.value?.setOption(option, true)
  }

  // 窗口自适应
  const resizeHandler = () => chartInstance.value?.resize()

  // 销毁实例，释放内存
  const disposeChart = () => {
    chartInstance.value?.dispose()
    chartInstance.value = null
  }

  onMounted(() => {
    initChart()
    window.addEventListener('resize', resizeHandler)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler)
    disposeChart()
  })

  return { chartInstance, setOption }
}

const pieOption: EChartsOption = {
  tooltip: { trigger: 'item', formatter: '{b}: {c} ({d}%)' },
  legend: { orient: 'vertical', left: 'left', top: 'middle' },
  series: [
    {
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: true,
      itemStyle: { borderRadius: 6 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      data: [
        { name: '活跃用户', value: 1250 },
        { name: '沉睡用户', value: 680 },
        { name: '流失用户', value: 320 }
      ]
    }
  ]
}