柱状图

dv-charts-bar1

<template>
  <dv-charts-bar1 :config="config1"></dv-charts-bar1>
</template>
<script>
export default {
  data () {
    return {
      config1: {
        unitText: '万人',
        categoryData: ['类目一', '类目二', '类目三', '类目四', '类目五', '类目六'],
        data: [2.45, 1.67, 3.42, 3.34, 3.56, 3.56] ,
        name: '人员数量'
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	String	-	'人员数量'
categoryData	类目数据，显示x轴上的文字	Array	-	['类目一', '类目二', '类目三', '类目四', '类目五', '类目六']
data	数据	Array	-	[2.45, 1.67, 3.42, 3.34, 3.56, 3.56]

dv-charts-bar2

<template>
  <dv-charts-bar2 :config="config2"></dv-charts-bar2>
</template>
<script>
export default {
  data () {
    return {
      config2: {
        unitText: '万人',
        categoryData: ['兴业银行', '建设银行', '交通银行', '工商银行', '中国银行'],
        data: [1000, 920, 980, 840, 610] ,
        name: '人员数量'
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	String	-	'人员数量'
categoryData	类目数据，显示x轴上的文字	Array	-	['兴业银行', '建设银行', '交通银行', '工商银行', '中国银行']
data	数据	Array	-	[1000, 920, 980, 840, 610]

dv-charts-bar3

<template>
  <dv-charts-bar3 :config="config3"></dv-charts-bar3>
</template>
<script>
export default {
  data () {
    return {
      config3: {
        unitText: '元',
        categoryData: ['21/09', '21/10', '21/11', '21/12', '22/01', '22/02', '22/03'],
        data: [2731, 4331, 4456, 3389, 3189, 2267, 2267],
        name: '人员数量'
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'元'
name	系列名称	String	-	'人员数量'
categoryData	类目数据，显示x轴上的文字	Array	-	['21/09', '21/10', '21/11', '21/12', '22/01', '22/02', '22/03']
data	数据	Array	-	[2731, 4331, 4456, 3389, 3189, 2267, 2267]

dv-charts-bar4

<template>
  <dv-charts-bar4 :config="config4"></dv-charts-bar4>
</template>
<script>
export default {
  data () {
    return {
      config4: {
        unitText: '万人',
        categoryData: ['类目一', '类目二', '类目三', '类目四', '类目五', '类目六'],
        datas: [
          [2.45, 1.67, 3.42, 3.34, 3.56, 3.56],
          [1.45, 2.67, 2.42, 2.34, 2.56, 3.56]
        ],
        names: ['人员数量','涉及金额']
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
names	系列名称	Array	-	['人员数量','涉及金额']
categoryData	类目数据，显示x轴上的文字	Array	-	['类目一', '类目二', '类目三', '类目四', '类目五', '类目六']
datas	数据	Array	-	[[2.45, 1.67, 3.42, 3.34, 3.56, 3.56], [1.45, 2.67, 2.42, 2.34, 2.56, 3.56]]

dv-charts-bar5

<template>
  <dv-charts-bar5 :config="config5"></dv-charts-bar5>
</template>
<script>
export default {
  data () {
    return {
      config5: {
        unitText: '万人',
        categoryData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        datas: [
          [92, 106, 37, 65, 116, 52, 114, 42, 77, 65, 42, 58],
          [117, 71, 52, 116, 65, 98, 117, 104, 53, 36, 55, 58]
        ],
        names: ['个人缴存','单位集中批量缴存']
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
names	系列名称	Array	-	['个人缴存','单位集中批量缴存']
categoryData	类目数据，显示x轴上的文字	Array	-	['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
datas	数据	Array	-	[92, 106, 37, 65, 116, 52, 114, 42, 77, 65, 42, 58], [117, 71, 52, 116, 65, 98, 117, 104, 53, 36, 55, 58]]

dv-charts-bar6

<template>
  <dv-charts-bar6 :config="config6"></dv-charts-bar6>
</template>
<script>
export default {
  data () {
    return {
      config6: {
        unitText: '单位',
        categoryData: ['1月', '2月', '3月', '4月', '5月','6月'],
        data: [65, 63, 86, 92, 86, 67],
        name: '单位',
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'单位'
name	系列名称	String	-	'单位'
categoryData	类目数据，显示x轴上的文字	Array	-	['1月', '2月', '3月', '4月', '5月','6月']
data	数据	Array	-	[65, 63, 86, 92, 86, 67]

dv-charts-bar7

<template>
  <dv-charts-bar7 :config="config7"></dv-charts-bar7>
</template>
<script>
export default {
  data () {
    return {
      config7: {
        unitText: '百分比',
        categoryData: ['产品A', '产品B', '产品C', '产品D'],
        data: [0.54, 0.21, 0.82, 0.35],
        name: '产品百分比'
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'百分比'
name	系列名称	String	-	'产品百分比'
categoryData	类目数据，显示x轴上的文字	Array	-	['产品A', '产品B', '产品C', '产品D']
data	数据	Array	-	[0.54, 0.21, 0.82, 0.35]

dv-charts-bar8

<template>
  <dv-charts-bar8 :config="config8"></dv-charts-bar8>
</template>
<script>
export default {
  data () {
    return {
      config8: {
        unitText: '百分比',
        categoryData: ['产品A', '产品B', '产品C', '产品D'],
        data: [0.54, 0.21, 0.82, 0.35],
        name: '产品百分比'
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'百分比'
name	系列名称	String	-	'产品百分比'
categoryData	类目数据，显示x轴上的文字	Array	-	['产品A', '产品B', '产品C', '产品D']
data	数据	Array	-	[0.54, 0.21, 0.82, 0.35]

dv-charts-bar9

<template>
  <dv-charts-bar9 :config="config9"></dv-charts-bar9>
</template>
<script>
export default {
  data () {
    return {
      config9: {
        unitText: '单位',
        categoryData: ['产品A', '产品B', '产品C', '产品D'],
        datas: [
          [0.34, 0.11, 0.62, 0.15],
          [0.64, 0.31, 0.92, 0.45]
        ],
        names: ['系列一','系列二']
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'单位'
names	系列名称	Array	-	['系列一','系列二']
categoryData	类目数据，显示x轴上的文字	Array	-	['产品A', '产品B', '产品C', '产品D']
datas	数据	Array	-	[[0.34, 0.11, 0.62, 0.15], [0.64, 0.31, 0.92, 0.45]]

dv-charts-bar10

<template>
  <dv-charts-bar10 :config="config10"></dv-charts-bar10>
</template>
<script>
export default {
  data () {
    return {
      config10: {
        unitText: "人/个",
        categoryData: ["类目一", "类目二", "类目三", "类目四"],
        data: [800, 1000, 600, 1240],
        name: "人员数量"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	String	-	'#66E1DF'

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'人/个'
name	系列名称	String	-	'人员数量'
categoryData	类目数据，显示x轴上的文字	Array	-	["类目一", "类目二", "类目三", "类目四"]
data	数据	Array	-	[800, 1000, 600, 1240]

dv-charts-bar11

<template>
  <dv-charts-bar11 :config="config11"></dv-charts-bar11>
</template>
<script>
export default {
  data () {
    return {
      config11: {
        unitText: "万人",
        categoryData: ["安徽省", "山东省", "浙江省", "福建省", "广东省"],
        data: [4.0, 5.0, 7.5, 9.6, 10.2],
        name: "人员数量"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

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

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	String	-	'人员数量'
categoryData	类目数据，显示x轴上的文字	Array	-	["安徽省", "山东省", "浙江省", "福建省", "广东省"]
data	数据	Array	-	[4.0, 5.0, 7.5, 9.6, 10.2]

dv-charts-bar12

<template>
  <dv-charts-bar12 :config="config12"></dv-charts-bar12>
</template>
<script>
export default {
  data () {
    return {
      config12: {
        unitText: "万人",
        categoryData: ["工伤保险", "失业保险", "机关保", "城乡保", "企业保"],
        data: [3.7, 5.0, 6.7, 8.0, 8.8],
        name: "人员数量"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#5456FA", "#4f76d0", "#71dbe2", "#efe88a", "#eb736f"]

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	String	-	'人员数量'
categoryData	类目数据，显示x轴上的文字	Array	-	["工伤保险", "失业保险", "机关保", "城乡保", "企业保"]
data	数据	Array	-	[3.7, 5.0, 6.7, 8.0, 8.8]

dv-charts-bar13

<template>
  <dv-charts-bar13 :config="config13"></dv-charts-bar13>
</template>
<script>
export default {
  data () {
    return {
      config13: {
        unitText: "单位",
        categoryData: ["类目一", "类目二", "类目三", "类目四"],
        data: [
          [800, 1000, 600, 1240],
          [800, 1000, 500, 1240]
        ],
        name: ["系列一", "系列二"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#66E1DF", "#22BAFF"]

config配置

属性	说明	类型	可选值	默认值
unitText	x轴单位	String	-	'单位'
name	系列名称	Array	-	["系列一", "系列二"]
categoryData	类目数据，显示x轴上的文字	Array	-	["类目一", "类目二", "类目三", "类目四"]
data	数据	Array	-	[[800, 1000, 600, 1240], [800, 1000, 500, 1240]]

dv-charts-bar14

<template>
  <dv-charts-bar14 :config="config14"></dv-charts-bar14>
</template>
<script>
export default {
  data () {
    return {
      config14: {
        unitText: "万人",
        categoryData: ["<30", "31-35", "36-40", "41-45", "45-50", "51-56"],
        data: [
          [800, 1200, 1040, 900, 900, 620],
          [430, 570, 360, 550, 550, 360]
        ],
        name: ["男性", "女性"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

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

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	Array	-	["男性", "女性"]
categoryData	类目数据，显示x轴上的文字	Array	-	["<30", "31-35", "36-40", "41-45", "45-50", "51-56"]
data	数据	Array	-	[[800, 1200, 1040, 900, 900, 620], [430, 570, 360, 550, 550, 360]]

dv-charts-bar15

<template>
  <dv-charts-bar15 :config="config15"></dv-charts-bar15>
</template>
<script>
export default {
  data () {
    return {
      config15: {
        unitText: ["万人/万人次", "%"],
        categoryData: ["兴业银行", "建设银行", "交通银行", "工商银行", "中国银行", "民生银行", "中信银行", "招商银行", "农业银行", "光大银行"],
        data: [
          [1200, 1600, 2000, 1500, 1000, 1700, 800, 1000, 1400, 600],
          [
            (1200 / 2000) * 100 * 1.3,
            (1600 / 2000) * 100 * 1.3,
            (2000 / 2000) * 100 * 1.3,
            (1500 / 2000) * 100 * 1.3,
            (1000 / 2000) * 100 * 1.3,
            (1700 / 2000) * 100 * 1.3,
            (800 / 2000) * 100 * 1.3,
            (1000 / 2000) * 100 * 1.3,
            (1400 / 2000) * 100 * 1.3,
            (600 / 2000) * 100 * 1.3,
          ],
        ],
        name: ["统计名称一", "统计名称二"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#3796FF", "#E6F7FF", "#49FDFD"]

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	Array	-	["万人/万人次", "%"]
name	系列名称	Array	-	["统计名称一", "统计名称二"]
categoryData	类目数据，显示x轴上的文字	Array	-	["兴业银行", "建设银行", "交通银行", "工商银行", "中国银行", "民生银行", "中信银行", "招商银行", "农业银行", "光大银行"]
data	数据	Array	-	[[1200, 1600, 2000, 1500, 1000, 1700, 800, 1000, 1400, 600], [(1200 / 2000) * 100 * 1.3, (1600 / 2000) * 100 * 1.3, (2000 / 2000) * 100 * 1.3, (1500 / 2000) * 100 * 1.3, (1000 / 2000) * 100 * 1.3, (1700 / 2000) * 100 * 1.3, (800 / 2000) * 100 * 1.3, (1000 / 2000) * 100 * 1.3, (1400 / 2000) * 100 * 1.3, (600 / 2000) * 100 * 1.3 ]]

dv-charts-bar16

<template>
  <dv-charts-bar16 :config="config16"></dv-charts-bar16>
</template>
<script>
export default {
  data () {
    return {
      config16: {
        unitText: ["万人/万人次", "%"],
        categoryData: ["兴业银行", "建设银行", "交通银行", "工商银行", "中国银行", "民生银行", "中信银行", "招商银行", "农业银行", "光大银行"],
        data: [
          [1200, 1600, 2000, 1500, 1000, 1700, 800, 1000, 1400, 600],
          [
            (1200 / 2000) * 100 * 2,
            (1600 / 2000) * 100 * 2,
            (2000 / 2000) * 100 * 2,
            (1500 / 2000) * 100 * 2,
            (1000 / 2000) * 100 * 2,
            (1700 / 2000) * 100 * 2,
            (800 / 2000) * 100 * 2,
            (1000 / 2000) * 100 * 2,
            (1400 / 2000) * 100 * 2,
            (600 / 2000) * 100 * 2,
          ],
          [
            (1200 / 2000) * 100 * 1.7,
            (1600 / 2000) * 100 * 0.7,
            (2000 / 2000) * 100 * 1.7,
            (1500 / 2000) * 100 * 1.7,
            (1000 / 2000) * 100 * 0.8,
            (1700 / 2000) * 100 * 0.7,
            (800 / 2000) * 100 * 0.7,
            (1000 / 2000) * 100 * 0.7,
            (1400 / 2000) * 100 * 0.7,
            (600 / 2000) * 100 * 0.7,
          ],
        ],
        name: ["统计名称一", "统计名称二", "统计名称三"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#3796FF", "#00F4FE"]

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	Array	-	["万人/万人次", "%"]
name	系列名称	Array	-	["统计名称一", "统计名称二", "统计名称三"]
categoryData	类目数据，显示x轴上的文字	Array	-	["兴业银行", "建设银行", "交通银行", "工商银行", "中国银行", "民生银行", "中信银行", "招商银行", "农业银行", "光大银行"]
data	数据	Array	-	[[1200, 1600, 2000, 1500, 1000, 1700, 800, 1000, 1400, 600], [(1200 / 2000) * 100 * 2, (1600 / 2000) * 100 * 2, (2000 / 2000) * 100 * 2, (1500 / 2000) * 100 * 2, (1000 / 2000) * 100 * 2, (1700 / 2000) * 100 * 2, (800 / 2000) * 100 * 2, (1000 / 2000) * 100 * 2, (1400 / 2000) * 100 * 2, (600 / 2000) * 100 * 2], [ (1200 / 2000) * 100 * 1.7, (1600 / 2000) * 100 * 0.7, (2000 / 2000) * 100 * 1.7, (1500 / 2000) * 100 * 1.7, (1000 / 2000) * 100 * 0.8, (1700 / 2000) * 100 * 0.7, (800 / 2000) * 100 * 0.7, (1000 / 2000) * 100 * 0.7, (1400 / 2000) * 100 * 0.7, (600 / 2000) * 100 * 0.7]]

dv-charts-bar17

<template>
  <dv-charts-bar17 :config="config17"></dv-charts-bar17>
</template>
<script>
export default {
  data () {
    return {
      config17: {
        unitText: "万人",
        categoryData: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
        data: [
          [2.45, 1.67, 3.42, 3.34, 3.56, 3.56],
          [1.4, 2.1, 3.1, 2.6, 3.2, 3]
        ],
        name: ["系列一", "系列二"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#4FBBFB", "#29FFFD"]

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	Array	-	["统计名称一", "统计名称二", "统计名称三"]
categoryData	类目数据，显示x轴上的文字	Array	-	["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"]
data	数据	Array	-	[[2.45, 1.67, 3.42, 3.34, 3.56, 3.56], [1.4, 2.1, 3.1, 2.6, 3.2, 3]]

dv-charts-bar18

<template>
  <dv-charts-bar18 :config="config18"></dv-charts-bar18>
</template>
<script>
export default {
  data () {
    return {
      config18: {
        unitText: "万人",
        categoryData: ["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"],
        data:[2.45, 1.67, 3.42, 3.34, 3.56, 3.56],
        name: "系列一"
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#003AFF", "#52C0FF"]

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人'
name	系列名称	String	-	'系列一'
categoryData	类目数据，显示x轴上的文字	Array	-	["类目一", "类目二", "类目三", "类目四", "类目五", "类目六"]
data	数据	Array	-	[2.45, 1.67, 3.42, 3.34, 3.56, 3.56]