上篇文章给大家介绍了 在 webpack 中使用 ECharts 的实例详解 , 可以点击查看
1. 使用 NPM 安装 (全局引入)
执行下面的命令:
npm install echarts--save
引入 echarts 模块
在 vue 项目的 main.js 中引入 echarts 模块, 即是写入如下代码:
- import echarts from 'echarts'
- Vue.prototype.$echarts = echarts;
2. 按需引入
上面全局引入会将所有的 echarts 图表打包, 导致体积过大, 我解决这一问题, 可以使用 require 按需引入即是需要什么就引入什么:
即是:
let echarts = require('echarts/lib/echarts')
3. 直接引用
在 index.html 文件中全局引入, 使用 script 标签引入
<script src="/static/js/echarts/echarts.js"></script>
注意: src 中写入 echarts 的路径;
然后再 vue 项目 build 目录下找到 webpack.base.conf.js, 配置文件, 在 module.exports 对象中添加 externals 属性, 然后配置 echarts 所在的路径:
- module.exports = {
- .....
- externals: {
- // 路径: 命名空间
- 'echarts/dist/echarts':'echarts',
- }
- };
总结
以上所述是小编给大家介绍的在 Vue 中使用 echarts 的方法, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的在此也非常感谢大家对脚本之家网站的支持
来源: http://www.jb51.net/article/134425.htm