webpack打包第三方类库

技术胖webpack教程

webpack中使用echarts

在 webpack 的入口文件中直接引入第三方类库,向外全局暴露，以 jquery 插件使用为例

1.创建本地项目 webpack-demo

2.在 webpack-demo 的根目录下创建 package.json 文件

模块说明：

4.修改 package.json 文件的 scripts 属性值,进行打包资源的配置

5.安装相关的 loader

6.安装jquery

7.在入口文件 app.js 中引入 jquery

8.给按钮绑定事件

9.运行命令

10.结果展示

通过 webpack 的 ProvidePlugin 插件全局引入第三方类库,以 echats 使用为例

1 ~ 5步同上

6.安装echarts

7.在webpack.config.js中进行配置

7.创建echart容器

8.初始化echarts

9.运行命令

10.结果展示

步骤如下：

方式一：官网下载引用

<script src="echarts.min.js"></script>

方式二：npm 安装

npm install echarts --saveimport echarts from 'echarts'// echarts = require('echarts')

方式三：CDN 引入

使用jsDelivr (https://www.jsdelivr.com/)

<scriptsrc="https://cdn.jsdelivr.net/npm/echarts@4.9.0/echarts.all.js"></script>

或者BootCDN (https://www.bootcdn.cn/)

<scriptsrc="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts.js"></script>

1、使用代码如下（示例）：// HTML<div id="my-chartID"></div>// js//

2、基于准备好的dom，初始化echarts实例

let myChart = echarts.init(document.getElementById('my-chartID'))//

3、数据加载是显示加载动画myChart.showLoading({maskColor:'rgba(255, 255, 255, 0)',textColor: 'white'})//

4、数据加载Ajax/Axios// 加载完毕(注意异步请求myChart.hideLoading

Echarts使用有很多方式，这里我来说在 webpack 中使用 ECharts...

2.引入 ECharts

可以直接在项目中引用，这里是在main,js引用

3.直接使用

这样简单的一个图表就成功了 如下图：

下面直接奔入主题，对于一些公司的业务需要与图表打交道，比如大数据可视化平台，echarts就可以完美胜任了。

但是对于刚接触echarts的或者是不经常用的朋友，虽说简单好用 但是去改变echarts图表的样式还是很费时的。

毕竟官网的实例与公司业务或者UI的设计有些出入。。这样就需要改里面的参数了。

下面是我用到的图表总结的一些参数设置，我就不一一手写解释了，直接用图来展现出来

今天先整理到这里，后期增加关系图、仪表盘、散点图 以及我们的大地图......

整理地图相关参数：

①②③④

JSON引入方式

地图属性设置都会在geo对象中设置相应参数，下面介绍常用参数：

地图上的内容主要在serise中设置，

---