vue开发:vue引入echarts
来源:互联网 发布:网络电玩城捕鱼游戏 编辑:程序博客网 时间:2024/06/08 09:43
安装echarts依赖
- 1
或者使用国内的淘宝镜像:
- 安装
- 1
- 使用
- 1
创建图表
全局引入
- main.js
- 1
- 2
- 3
- 4
- Hello.vue
- 1
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
注意: 这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用
按需引入
上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。
- Hello.vue
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
这里之所以使用 require 而不是 import,是因为 require 可以直接从 node_modules 中查找,而 import 必须把路径写全。
页面展示
阅读全文
0 0
- vue开发:vue引入echarts
- vue如何引入echarts地图
- vue开发:vue中引入jquery
- vue开发:vue-cli引入swiper
- Vue+Echarts
- vue 引入echarts画中国地图 Map china not exists
- vue使用echarts
- Vue全局组件开发,Vue.use(xxx)一次引入,全局使用 【Vue 非父子组件通信】
- vue引入swiper插件
- vue中引入jquery
- vue引入 jquery 插件
- vue中引入bootstrap
- vue引入图片问题
- vue中引入bootstrap
- vue引入Mint-UI
- Vue 引入假数据
- vue引入css
- VUE 引入JQ
- muduo库源码学习(base)ThreadLocalSingleton
- switch开关语句
- HDU-2010(水仙花数)
- npm ERR!errno -4048
- 把pinpoint编译环境做成Docker镜像文件
- vue开发:vue引入echarts
- Spring Boot学习之旅:(十一)模版引擎-jsp
- Docker下,极速体验pinpoint1.6.3
- 【plan】noip冲刺计划
- footer置顶之js方法
- while语句
- Git学习笔记
- 总结一
- 搭建基于https和Parse的后端服务