Vue使用Echarts

v-charts

• 此文章持续更新，每个配置都会以例子来讲解，对比v-charts，vue-charts和原生echarts分别描述。

v-charts是一个Echarts的封包，饿了么官方前端团队开发的Echarts基于Vue的图表组件。

v-charts的封装理念是将部分属性暴露在组件属性上，同时也可以通过哦extend属性设置对应属性。

echarts最重要的属性label,tooltip,grid,legend,series等怎么在v-charts组件中配置

• 以三个图表的为例：

<!--组件 不介绍具体组件引入-->
<ve-bar
	 ref='contactsRank'
	 :data='contactsRank.data'
	 :legend-visible='false'
	 :extend='contactsRank.extend'
	 height='280px'/>

//配置
contactsRank :{
   
  extend: {
   
    title:{
   
      text:'常用联系人和消息记录',//条形图标题
      x:'center',//条形图标题预设的定位
      bottom:0 //同样可以使用left、right、top来调整位置
    },
    tooltip:{
   
      formatter:"{b}:<br/>QQ:{c0}<br/>微信:{c1}" //hover的时候提示框模板配置
    },
    grid:{
   
      left:0,
      right:50,
      containLabel: true
    },
    xAxis:{
   
      axisLine:{
   
        show:false
      },
      axisLabel:{
   
        showMinLabel