• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

datav 接收标签组件-环状图

开发技术 开发技术 4小时前 2次浏览

先上效果图:

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
            }
          }
        }
      ]

    }
  }
}
    
  


 


程序员灯塔
转载请注明原文链接:datav 接收标签组件-环状图
喜欢 (0)