加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

在vue-cli项目中使用echarts

发布时间:2020-12-16 23:16:01 所属栏目:百科 来源:网络整理
导读:这个示例使用? vue-cli ?脚手架搭建 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registry=https: 使用 cnpm install echarts -S main.js import echarts from 'echarts' Vue.prototype.$echarts = echarts Hello.vue 注意

这个示例使用?vue-cli?脚手架搭建

npm install echarts -S

或者使用国内的淘宝镜像:

  • 安装
    npm install -g cnpm --registry=https:
  • 使用
    cnpm install echarts -S

  • main.js
    import echarts from 'echarts'Vue.prototype.$echarts = echarts

  • Hello.vue

    注意:?这里echarts初始化应在钩子函数mounted()中,这个钩子函数是在el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用

    上面全局引入会将所有的echarts图表打包,导致体积过大,所以我觉得最好还是按需引入。

  • Hello.vue

  • 页面展示

?如果需要引入像字符云之类的官方包里没有的图表,可以在github上找到,如何使用具体请参考我前一阵子的文章http://www.cnblogs.com/Smiled/p/7146550.html

字符云示例:

cnpm install echarts -S

在需要使用的页面引入

require('echarts-wordcloud');

页面展示:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读