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