datav 接收标签组件-环状图
作者:互联网
先上效果图:
通用接收标签组件:
<dv-charts :option="option"></dv-charts>
这次主要是环形图的详解
在data中书写option
如下:
data(){
return{
option:{
//背景图颜色设置
backgroundColor: "#031d33",
//环的颜色
color:["#0097FB", "#92E1FF", "#FFC227", "#30ECA6", "red"],
//显示的title
title:{
//title的名字
text:'测试',
//设置title偏移量 也就位置
offset:[0,-10],
//设置title样式
style:{
//设置title字体颜色
fill:"red",
//设置title字体大小
fontSize:20
}
},
series:[
{
//名字
name:'',
//图表类型 ---> pie 饼图 | line ---> 折线图 | bar ---> 柱状图
type:'pie',
//图形所占大小比
radius:["44%","63%"],
//图形所在位置
center:["50%","50%"],
//是否开启玫瑰图
roseType:true,
//玫瑰图下是否启用自动排序
roseSort:true,
//data 数据, 由于datav中是基于charts的,所以在data中格式必须写上 value 和 name,不然会报错,无法给值添加颜色属性,例子如下
data:[{value:21,name:'1'},{value:32,name:'2'},{value:32,name:"3"},{value:32,name:"4"},{value:32,name:"5"}]
// 饼图外部标签配置
outsideLabel:{
//是否显示指示线
show:true,
//样式配置项 -- 可配置字体大小、字体颜色 ! fill为修改字体颜色的属性
style:{
//修改字体大小
fontSize:11,
//修改字体颜色,若是不设置,则显示饼图环对应颜色
//fill:"red"
},
//自定义标签返回内容
formatter:(params)=>{
return Math.round(params.percent)+"%"
},
//标签线弯曲点与饼图的间距
labelLineBendGap:21,
//标签线末端长度
labelLineEndLength:10,
//标签线宽度
labelLineStyle:{
lineWidth:1
}
}
}
]
}
}
}
标签:颜色,name,title,标签,value,组件,datav,data 来源: https://www.cnblogs.com/a973692898/p/15272210.html