echarts5如何按需引入ECharts 图表和组件

ppylox
·2/7/2023·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

ECharts 5 默认通过 `import * as echarts from 'echarts'` 引入全部图表和组件,体积较大。按需引入需从 `echarts/core` 引入核心模块,再从 `echarts/charts` 引入所需图表(如 PieChart、LineChart),从 `echarts/components` 引入标题、提示框、网格、数据集、数据转换、图例等组件,从 `echarts/features` 引入 LabelLayout、UniversalTransition 特性,并从 `echarts/renderers` 引入 CanvasRenderer 或 SVGRenderer(必须)。最后通过 `echarts.use([...])` 注册后即可正常初始化和 setOption。

大家好我是图恩,如果你的项目中用到了echarts,安装完成后通过以下方式引入

import * as echarts from 'echarts';\n\n// 基于准备好的dom,初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n// 绘制图表\nmyChart.setOption({\n  title: {\n    text: 'ECharts 入门示例'\n  },\n  tooltip: {},\n  xAxis: {\n    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n  },\n  yAxis: {},\n  series: [\n    {\n      name: '销量',\n      type: 'bar',\n      data: [5, 20, 36, 10, 10, 20]\n    }\n  ]\n});

上面的代码会引入 ECharts 中所有的图表和组件,如果你不想引入所有组件,也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。

<script>\n// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from 'echarts/core';\n// 引入柱状图图表,图表后缀都为 Chart\nimport { PieChart,LineChart } from 'echarts/charts';\n// 引入提示框,标题,直角坐标系,数据集,内置数据转换器组件,组件后缀都为 Component\nimport {\n  TitleComponent,\n  TooltipComponent,\n  GridComponent,\n  DatasetComponent,\n  TransformComponent,\n  LegendComponent\n} from 'echarts/components';\n// 标签自动布局、全局过渡动画等特性\nimport { LabelLayout, UniversalTransition } from 'echarts/features';\n// 引入 Canvas 渲染器,注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport { CanvasRenderer } from 'echarts/renderers';\n\n// 注册必须的组件\necharts.use([\n  TitleComponent,\n  TooltipComponent,\n  GridComponent,\n  DatasetComponent,\n  TransformComponent,\n  PieChart,\n  LineChart,\n  LabelLayout,\n  UniversalTransition,\n  CanvasRenderer,\n  LegendComponent\n]);\n// 接下来的使用就跟之前一样,初始化图表,设置配置项\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n  // ...\n});\n</script>


相关文章

评论 (0)

暂无评论,来写第一条吧