1. 安装 ECharts： 在你的项目中安装 ECharts。
npm install echarts --save
2. 安装 ECharts 的 Loader： ECharts 提供了一个用于加载地图等资源的 Loader。
npm install echarts-gl --save
3. 安装 ECharts 的 TypeScript 类型定义（如果你的项目使用 TypeScript）：
npm install --save-dev @types/echarts
4. 在 webpack 项目中配置 ECharts：
在你的 webpack 配置文件中，使用 ProvidePlugin 来全局注入 ECharts，这样在你的代码中就不需要每次都引入。
// webpack.config.js
const webpack = require('webpack');
module.exports = {
// ...其他配置
plugins: [
// 全局注入 ECharts
new webpack.ProvidePlugin({
echarts: 'echarts'
})
]
};
5. 在你的项目中使用 ECharts：
创建一个图表的容器，初始化 ECharts 实例，并配置图表选项。
// 在你的 JavaScript 或 TypeScript 文件中
import echarts from 'echarts';
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
const option = {
// ...其他配置
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
在 HTML 文件中添加一个容器元素：
<!-- 在你的 HTML 文件中 -->
<div id="myChart" style="width: 600px; height: 400px;"></div>
6. 运行项目：
运行你的 webpack 项目，确保没有报错，并且能够在浏览器中看到正确的图表。
这样，你就成功地在 webpack 项目中集成了 ECharts。你可以根据需要进一步配置和定制 ECharts 图表。
转载请注明出处：http://www.zyzy.cn/article/detail/5060/ECharts