饼图

dv-charts-pie1

<template>
  <dv-charts-pie1 :config="config1"></dv-charts-pie1>
</template>
<script>
export default {
  data () {
    return {
      config1: {
        unitText: '个',
        data: [
          { value: 2, name: "中国银行" },
          { value: 2, name: "招商银行" },
          { value: 1, name: "邮政银行" },
          { value: 1, name: "建设银行" },
          { value: 2, name: "兴业银行" },
          { value: 2, name: "其他银行" }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#4188FF", "#2AC9CF", "#FFDD7B", "#FF7B7B", "#EAF2FF", "#A67BFF"]

config配置

属性	说明	类型	可选值	默认值
unitText	单位	String	-	'个'
data	数据	Array	-	[{ value: 2, name: "中国银行" }, { value: 2, name: "招商银行" }, { value: 1, name: "邮政银行" }, { value: 1, name: "建设银行" }, { value: 2, name: "兴业银行" }, { value: 2, name: "其他银行" }]

dv-charts-pie2

<template>
  <dv-charts-pie2 :config="config2"></dv-charts-pie2>
</template>
<script>
export default {
  data () {
    return {
      config2: {
        unitText: '个',
        data: [
          { value: 100, name: "基金类型" },
          { value: 200, name: "理财类型" },
          { value: 300, name: "保险类型" },
          { value: 400, name: "储蓄类型" }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#4188FF", "#FFDD7B", "#2AC9CF", "#FF7B7B"]

config配置

属性	说明	类型	可选值	默认值
unitText	单位	String	-	'个'
data	数据	Array	-	[{ value: 100, name: "基金类型" }, { value: 200, name: "理财类型" }, { value: 300, name: "保险类型" }, { value: 400, name: "储蓄类型" }]

dv-charts-pie3

<template>
  <dv-charts-pie3 :config="config3"></dv-charts-pie3>
</template>
<script>
export default {
  data () {
    return {
      config3: {
        unitText: '个',
        data: [
          { value: 110, name: "城镇职工基本养老保险" },
          { value: 120, name: "机关事业单位养老保险" },
          { value: 170, name: "城乡居民养老保险" }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#4188FF", "#FFDD7B", "#2AC9CF", "#FF7B7B"]

config配置

属性	说明	类型	可选值	默认值
unitText	单位	String	-	'个'
data	数据	Array	-	[{ value: 110, name: "城镇职工基本养老保险" }, { value: 120, name: "机关事业单位养老保险" }, { value: 170, name: "城乡居民养老保险" }]

dv-charts-pie4

<template>
  <dv-charts-pie4 :config="config4"></dv-charts-pie4>
</template>
<script>
export default {
  data () {
    return {
      config4: {
        data: [
          { value: 40, name: "男性" },
          { value: 60, name: "女性" }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#5293f7", "#f7cb64"]

config配置

属性	说明	类型	可选值	默认值
data	数据	Array	-	[{ value: 40, name: "男性" }, { value: 60, name: "女性" }]

dv-charts-pie5

<template>
  <dv-charts-pie5 :config="config5"></dv-charts-pie5>
</template>
<script>
export default {
  data () {
    return {
      config5: {
        data: [
          { value: 40, name: "语文" },
          { value: 30, name: "数学" },
          { value: 30, name: "英语" }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

dv-charts-pie6

<template>
  <dv-charts-pie6 :config="config6"></dv-charts-pie6>
</template>
<script>
export default {
  data () {
    return {
      config6: {
        data: [
          { value: 35, name: "女性" },
          { value: 65, name: "男性" }
        ],
        alpha: 60,
        depth: 70,
        innerSize: "60%"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	[["#02AAEF", "#0041BF"], ["#77EBB1", "#6EDFF6"]]

config配置

属性	说明	类型	可选值	默认值
data	数据	Array	-	[{ value: 35, name: "女性" }, { value: 65, name: "男性" }]
alpha	倾斜度	Number	-	60
depth	深度	Number	-	70
innerSize	内圈大小	String	-	'60%'

dv-charts-pie7

<template>
  <dv-charts-pie7 :config="config7"></dv-charts-pie7>
</template>
<script>
export default {
  data () {
    return {
      config7: {
        data: [
          { value: 65, name: "男性" },
          { value: 35, name: "女性" }
        ],
        alpha: 75,
        innerSize: "50%",
        startAngle: 0,
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	[["#0041BF", "#02AAEF"], ["#46FFA2", "#37E5FF"]]

config配置

属性	说明	类型	可选值	默认值
data	数据	Array	-	[{ value: 65, name: "男性" }, { value: 35, name: "女性" }]
alpha	倾斜度	Number	-	75
innerSize	内圈大小	String	-	'50%'
startAngle	起点开始角度	Number	-	0

dv-charts-pie8

<template>
  <dv-charts-pie8 :config="config8"></dv-charts-pie8>
</template>
<script>
export default {
  data () {
    return {
      config8: {
        data: [
          { value: 20, name: "草莓" },
          { value: 40, name: "桑椹" },
          { value: 45, name: "蔓越莓" },
          { value: 55, name: "蓝莓" },
          { value: 60, name: "黑莓" },
          { value: 35, name: "覆盆子" },
          { value: 40, name: "红醋莓" },
          { value: 10, name: "樱桃" }
        ],
        alpha: 70,
        innerSize: "70%",
        startAngle: 160,
        unitText: "个"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#4D42D8", "#229DAD", "#4DA5D7", "#3CD495", "#FFFFFF", "#2A48C2", "#38C3C3", "#2476CA"]

config配置

属性	说明	类型	可选值	默认值
data	数据	Array	-	[{ value: 20, name: "草莓" }, { value: 40, name: "桑椹" }, { value: 45, name: "蔓越莓" }, { value: 55, name: "蓝莓" }, { value: 60, name: "黑莓" }, { value: 35, name: "覆盆子" }, { value: 40, name: "红醋莓" }, { value: 10, name: "樱桃" }]
alpha	倾斜度	Number	-	70
innerSize	内圈大小	String	-	'70%'
startAngle	起点开始角度	Number	-	160
unitText	单位	String	-	'个'

dv-charts-pie9

<template>
  <dv-charts-pie9 :config="config9"></dv-charts-pie9>
</template>
<script>
export default {
  data () {
    return {
      config9: {
        data: [
          { value: 20, name: "草莓", h: 20 },
          { value: 10, name: "桑椹", h: 20 },
          { value: 45, name: "蔓越莓", h: 20 },
          { value: 55, name: "蓝莓", h: 30 }
        ],
        alpha: 60,
        innerSize: "70%",
        startAngle: 160,
        unitText: "个"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#4C74FF", "#FFD981", "#59F3B8", "#92DBFF"]

config配置

属性	说明	类型	可选值	默认值
data	数据	Array	-	[{ value: 20, name: "草莓", h: 20 }, { value: 10, name: "桑椹", h: 20 }, { value: 45, name: "蔓越莓", h: 20 }, { value: 55, name: "蓝莓", h: 30 }]
alpha	倾斜度	Number	-	60
innerSize	内圈大小	String	-	'70%'
startAngle	起点开始角度	Number	-	160
unitText	单位	String	-	'个'

dv-pie-chart1

全市企业注册数

<template>
  <dv-pie-chart1 :config="pieChartConfig1"></dv-pie-chart1>
</template>
<script>
export default {
  data () {
    return {
      pieChartConfig1: {
        title: {
          text: "3520"
        },
        series: [
          {
            data: [70, 30],
            color: ["#efd643", "#233762"]
          }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
des	描述	String	-	'全市企业注册数'
d	圆形直径	String	-	'300'

config配置

属性	说明	类型	可选值	默认值
title	标题配置	Object	-	{ text: "3520" }
series	系列数据	Array	-	[{ data: [70, 30], color: ["#efd643", "#233762"] }]

dv-pie-chart2

<template>
  <dv-pie-chart2 :config="pieChartConfig2"></dv-pie-chart2>
</template>
<script>
export default {
  data () {
    return {
      pieChartConfig2: {
        title: {
          text: "41-50岁\n85%"
        },
        series: [
          {
            data: [75, 25],
            color: ["#edab60", "#012988"],
          },
          {
            color: ["#edab60"]
          }
        ]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
d	圆形直径	String	-	'300'

config配置

属性	说明	类型	可选值	默认值
title	标题配置	Object	-	{ text: "41-50岁\n85%" }
series	系列数据	Array	-	[{ data: [75, 25], color: ["#edab60", "#012988"] }, { color: ["#edab60"] } ]

dv-pie-chart3

<dv-pie-chart3></dv-pie-chart3>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
rate	数据传值	Number	-	83.6
d	圆形直径	String	-	'300'

dv-pie-chart4

<dv-pie-chart4></dv-pie-chart4>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
dataList	数据	Array	-	[{ name: "灵活就业", value: "28", color: "#efd643" }, { name: "企业", value: "38.79", color: "#4e64f9" }, { name: "公益性岗位", value: "33.11", color: "red" }]
d	圆形直径	String	-	'300'