echarts按需引入，减小打包后体积

ECharts 提供的模块是可组合的（modular），通过 echarts/core 模块实现按需引入。

npm install echarts

封装echarts，新建一个文件echarts-setup.ts

// echarts-setup.ts
import * as echarts from 'echarts/core'
import {
  LineChart
} from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import {
  CanvasRenderer
} from 'echarts/renderers'

// 注册所需组件
echarts.use([
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer
])

export default echarts

使用：

// MyChart.vue / .tsx
import echarts from './echarts-setup'

// 初始化图表
onMounted(() => {
  const chart = echarts.init(document.getElementById('main'))
  chart.setOption({
    title: { text: '折线图示例' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{
      type: 'line',
      data: [5, 20, 36]
    }]
  })
})