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
　　　　　　　　 }
　　　　　　},
　　　　　　//legend為圖表提供圖例標簽功能，它允許用戶隱藏/顯示series中的某個子圖表。
　　　　　　legend:{
　　　　　　　　//控制是否顯示legend,默認為true
　　　　　　　　show:true,
　　　　　　　　//data，數據顯示 data[i].name需要與series中的某個圖表的name相同，data[i].icon 有rect | line 2個值
　　　　　　　　data:[{name:'測試'，icon:'line'}],
　　　　　　　　//控制legend的位置 ---也可以用left，top等， 有2個值，horizontal 顯示在底部 vertical 顯示在右側
　　　　　　　　orient:"horizontal"
　　　　　　},
　　　　　　series:[
　　　　　　　　{
　　　　　　　　　　//名字---》主要作用是跟legend屬性對應
　　　　　　　　　　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
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　]
　　　　}
　　}
}