Vue系列-齊枭飛——在vue項目中使用echarts --齊枭飛

如果有什麼不明白的地方 大家可以加 vue2.0技術交流群：285595782

安裝echarts依賴

npm install echarts -S 或者 使用淘寶鏡像安裝 cnpm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用：cnpm install echarts -S

下面就建立圖表了： 其實很簡單—>

建立圖表

全局// 引入

echartsimportecharts from’echarts’

Vue.prototype.$echarts=echarts 這個地方要稍微講一下、： 但凡是用過axios的童鞋肯定知道axios是不能use（axios）的，在這裡就要說一下axios吧，但是要想用它 其實也很簡單：他有兩種用法：

第一種是全局引用，也就是在vue執行個體的原型上–> Vue.prototype.axios = axios,這就可以了，在任何一個地方直接 this.$http(‘a.php’)… 就可以用了！

第二種方法就是 ：局部引入（小編推薦這種方法引入），@import axios from ‘‘axios’’;這樣就完成了， 用法： axios.http(‘a.php’);就可以了！

axios介紹完了，那麼echarts和axios的用法原理是一樣的，一樣的用法

下面在hellow.vue元件裡面建立一個容器：

下面在裡面寫入：

export default {

name:‘hello’,data() {return{

msg:‘Welcome to Your Vue.js App’}

},

mounted(){

this.drawLine();

},

methods: {

drawLine(){// 基于準備好的dom，初始化echarts執行個體letmyChart=this.$echarts.init(document.getElementById(‘myChart’))// 繪制圖表myChart.setOption({

title: { text:‘在Vue中使用echarts’},

tooltip: {},

xAxis: {data:[“襯衫”,“羊毛衫”,“雪紡衫”,“褲子”,“高跟鞋”,“襪子”]},

yAxis: {},

series:[{

name:‘銷量’,type:‘bar’,data:[5,20,36,10,10,20]}]

});

}

}

}

嗯，不錯，這已經基本完成了，啟動服務 你可以看到本意已經有一個圖表了，不過 這是其中的一種方法（全局建立圖表）；改日再聊按需引入建立圖表的方法：

如果有什麼不明白的地方 大家可以加 vue2.0技術交流群：285595782