vue中使用Echart

• 2019 年 11 月 30 日
• 筆記

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({});