Vue系列 在vue專案中使用echarts

該示例使用vue-cli腳手架搭建

npm install echarts -s

npm install -g cnpm --registry=

.taobao
.org

cnpm install echarts -s

// 引入echarts

import echarts from 'echarts'
vue.prototype.
$echarts
= echarts

"mychart"

:style="">

export default 

},mounted(),
methods: ,
tooltip: {},
xaxis: ,
yaxis: {},
series: 
});}
}}

這裡echarts初始化應在鉤子函式mounted()中，這個鉤子函式是在el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫

上面全域性引入會將所有的echarts圖表打包，導致體積過大，所以我覺得最好還是按需引入。

// 引入基本模板

let echarts =
require('echarts/lib/echarts')
// 引入柱狀圖元件
require('echarts/lib/chart/bar')
// 引入提示框和title元件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default 
},mounted() ,
methods: ,
tooltip: {},
xaxis: ,
yaxis: {},
series: 
});}
}}

Vue系列 在vue專案中使用echarts

該示例使用vue cli腳手架搭建 npm install echarts s或者使用國內的 映象 npm install g cnpm registry cnpm install echarts s 引入echarts import echarts from echarts vue.prototy...

在 Vue 專案中使用 ECharts

重要檔案版本 在 vue 專案中使用 echarts 只需要在 vue 元件的mounted生命週期中 初始化 echarts，然後在每次配置項有變更時呼叫setoption 方法更新配置即可 專案模板原始碼 class default chart style div template import...

在vue專案中使用echarts

安裝echarts依賴 npm install echarts s 建立圖表 全域性引入 main.js 引入echarts import echarts from echarts vue.prototype.echarts echarts 這裡也可以在router下index.js引入，看規定 h...