前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中使用Echart

vue中使用Echart

作者头像
tianyawhl
发布2019-11-30 14:30:01
2.2K0
发布2019-11-30 14:30:01
举报
文章被收录于专栏:前端之攻略前端之攻略

1、安装

npm install echarts --save

2、全局注册

Vue.prototype.$echarts = echarts

3、使用方法

       let myChart = this.$echarts.init(document.getElementById("myChart"));

引入主题的方法

第一种情况:使用Echart 主题里面的文件

在main.js引用主题JS  --    import  'echarts/theme/shine.js' 使用方法 -- let myChart = this.$echarts.init(document.getElementById('myChart'),'shine');

第二种情况:使用自己文件夹中的主题
如果我们把theme的js放到自己的文件夹中,直接放会报错,有2个解决方法

第一种解决方法

1、修改shine.js代码格式    var theme = {  }   并增加  export default theme 导出

2、在main.js 中 引入并注册

import echarts from 'echarts' import theme from '@/assets/js/theme/shine.js' Vue.prototype.theme = theme

3、使用方法

 let myChart = this.$echarts.init(         document.getElementById("myChart"),         this.theme  );

第二种解决方法

1、修改shine.js 代码

把 js文件里的root.echarts 改成echarts;然后在该js文件内 import echarts from 'echarts'

2、在main.js中引入   import '@/assets/js/theme/shine.js'

3、使用方法

      let myChart = this.$echarts.init(         document.getElementById("myChart"),         "shine"       );

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、安装
  • 2、全局注册
  • 3、使用方法
  • 引入主题的方法
    • 第一种情况:使用Echart 主题里面的文件
      • 第二种情况:使用自己文件夹中的主题
        • 如果我们把theme的js放到自己的文件夹中,直接放会报错,有2个解决方法
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档