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