折线图

dv-charts-line1

<template>
  <dv-charts-line1 :config="config1"></dv-charts-line1>
</template>
<script>
export default {
  data () {
    return {
      config1: {
        unitText: '单位',
        categoryData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        data: [
          Array.from({ length: 12 }, () => Math.floor(Math.random() * 100)),
          Array.from({ length: 12 }, () => Math.floor(Math.random() * 100)),
        ],
        name: ["系列一", "系列二"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

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

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'单位'
name	系列名称	Array	-	["系列一", "系列二"]
categoryData	类目数据，显示x轴上的文字	Array	-	['类目一', '类目二', '类目三', '类目四', '类目五', '类目六']
data	数据	Array	-	[Array.from({ length: 12 }, () => Math.floor(Math.random() * 100)), Array.from({ length: 12 }, () => Math.floor(Math.random() * 100))]

dv-charts-line2

<template>
  <dv-charts-line2 :config="config2"></dv-charts-line2>
</template>
<script>
export default {
  data () {
    return {
      config2: {
        unitText: '单位',
        categoryData: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"],
        data: [
          Array.from({ length: 12 }, () => Math.floor(Math.random() * 100)),
          Array.from({ length: 12 }, () => Math.floor(Math.random() * 100)),
        ],
        name: ["系列一", "系列二"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

属性	说明	类型	可选值	默认值
config	配置	Object	-	如下config配置
color	颜色	Array	-	["#6DCAFF", "#66E1DF"]
showArea	是否开启区域渐变	Boolean	false	true

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'单位'
name	系列名称	Array	-	["系列一", "系列二"]
categoryData	类目数据，显示x轴上的文字	Array	-	['类目一', '类目二', '类目三', '类目四', '类目五', '类目六']
data	数据	Array	-	[Array.from({ length: 12 }, () => Math.floor(Math.random() * 100)), Array.from({ length: 12 }, () => Math.floor(Math.random() * 100))]

dv-charts-line3

<template>
  <dv-charts-line3 :config="config3"></dv-charts-line3>
</template>
<script>
export default {
  data () {
    return {
      config3: {
        unitText: '万人/万人次',
        categoryData: ["1号", "5号", "10号", "15号", "20号", "25号", "30号"],
        data: [
          Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
          Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)),
          Array.from({ length: 7 }, () => Math.floor(Math.random() * 100))
        ],
        name: ["开户人数", "缴存人数", "支取人数"]
      }
    }
  }
}
</script>

隐藏代码

显示代码

配置

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

config配置

属性	说明	类型	可选值	默认值
unitText	y轴单位	String	-	'万人/万人次'
name	系列名称	Array	-	["开户人数", "缴存人数", "支取人数"]
categoryData	类目数据，显示x轴上的文字	Array	-	["1号", "5号", "10号", "15号", "20号", "25号", "30号"]
data	数据	Array	-	[Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)), Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)), Array.from({ length: 7 }, () => Math.floor(Math.random() * 100)) ]