v-charts是一个Echarts的封包,饿了么官方前端团队开发的Echarts基于Vue的图表组件。
v-charts的封装理念是将部分属性暴露在组件属性上,同时也可以通过哦extend属性设置对应属性。
<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},
]
}
},
如下,我将right的值改小:
模板变量有 {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提示的目的。
组件代码
<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,
},