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}:
QQ:{c0}
微信:{c1}" //hover的时候提示框模板配置
    },
    grid:{
      left:0,
      right:50,
      containLabel: true
    },
    xAxis:{
      axisLine:{
        show:false
      },
      axisLabel:{
        showMinLabel:false
      }
    },
    series: {
      stack:['QQ','微信'],
      label: {
        normal: {
          show:true,
          // position: 'insideRight'
        }
      },
    },
  },
  data: {
    columns: ['label','QQ','微信'],
    rows:[
      { 'label': '姘头', 'QQ': 8530 ,'微信':1561 },
      { 'label': '张三', 'QQ': 1393 ,'微信':620},
      { 'label': '李四', 'QQ': 3530 ,'微信':1300},
      { 'label': '王五', 'QQ': 2923 ,'微信':1589},
      { 'label': '刘二', 'QQ': 1723 ,'微信':550},
      { 'label': '马大哈', 'QQ': 3792 ,'微信':1880},
    ]
  }
},

• 效果
  

详细介绍

grid

• grid 是坐标系图表的配置项，基本定位属性控制图表在容器中显示时相对容器边界的距离，如上面的配置。
• left和right都接受负值，以此为0刻度为中心，可以做正负交替坐标系；
• 同时，以此控制坐标轴数值过大时容易被容器边界隐藏的问题。

如下，我将right的值改小：

right：10

formatter

• 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

• 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

• 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

• 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

• 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。

formatter示例

• 以我上面的数据来对比，{c}代表数据值，因为我设置了堆叠，一项有多个数据，所以，可以给c跟上下标来显示多个数据，c0就代表QQ，c1就代表微信。

• formatter还支持传递函数：

 tooltip:{
   formatter:function(item){
   	console.log('params',item)
   	return 'hahaha'
   }
 },

以上打印结果在鼠标每一次hover图表上方数据中的时候都会触发一次，所以，即使在一个数据里反复移动鼠标也会不断触发。
如上图：
marker就是渲染的模板，默认会返回显示数据颜色 + [条目名 + 数据值,条目名 + 数据值]，如下：

以此可以达到定制tooltip提示的目的。

legend

• 控制图表容器内，有canvas或者svg渲染出的表格的边界位置，如果你把图例（legend）隐藏了，绘制的图表默认是不会自己移动位置来填补原来图例的位置。

组件代码

 <ve-ring
   ref='sourcerecords'
   :data='sourceRecords.data'
   :legend-visible='false'
   :extend='sourceRecords.extend'
   height='250px'/>

:legend-visible = 'false 为例是个分包的属性，同样可以通过在extend里添加 legend属性进行配置：

extend:{
  legend: {
	show: false
  }
}

配置代码

sourceRecords: {
  extend: {
    series: {
      center: ["50%", "50%"],//渲染图表相对容器内容
      label: {
        normal: {
          formatter: "{b}({d}%)",
        },
      },
    },
    legend: {
      show: false,
      //type:'plain', //或 'scroll'设置图例数量过多之后为一行，分别树横和竖，超出的会出现分页箭头
      //top: 20, //如果你设置show：true，那么可以显示图例，同时可以通过 定位属性控制 图例显示的位置上
    }
  },
  data: {
    columns: ['label', 'count'],
    rows: [
      { 'label': '地理位置', 'count': 1393 },
      { 'label': '短信记录', 'count': 3530 },
      { 'label': '通话记录', 'count': 2923 },
      { 'label': '浏览器记录', 'count': 1723 },
      { 'label': '实时通讯记录', 'count': 3792 },
    ]
  }
},

如果我去掉series的属性值：center:['50%','50%']:

如下图我的legend设置：

legend:{
  type: 'scroll', //竖向
  orient: 'vertical',
  left: 0,
  top: 35,
  bottom: 20,
},

当bottom设置为300时，图例显示有限，出现分页箭头