Newer
Older
ScreenDatav / examples / docs / LineChart.md
StephanieGitHub on 23 Jul 2021 2 KB first commit

折线图

横轴为category, 纵轴为数值型的折线图

使用方法

<template>
  <line-chart
      :x-axis-data="xAxisData"
    :legend="legend"
    :gradient="false"
    unit="次"
    :series-data="seriesData"/>
</template>
<script>
    export default {
    data(){
      return {
          legend:['单灯控制器', '灯箱']
        xAxisData:['周一','周二','周三','周四','周五','周六','周日'],
        seriesData:[
          {name:'单灯控制器',data:[120, 252, 101, 134, 290, 230, 110], color:'0,191,255'}
        ]
      }
    },
  }
</script>

lineChart Attributes

参数 说明 类型 可选值 默认值
smooth 曲线是否平滑 Boolean true, false true
gradient 曲线下方是否需要渐变 Boolean true, false true
seriesData 数据 Array -- --
unit 单位(Y轴上显示文字) String -- ''
xAxisData X轴数据 Array -- --
xAxisOption X轴配置 Object 见下表 {}
yAxisOption Y轴配置 Object 见下表 {}
tooltipOption Y轴配置 Object 见下表 {}
labelColor 图形上方文本标签颜色 String 16进制颜色值 #47c8b2
symbol 折线节点 String 'none' #47c8b2

seriesData对象数组的参数说明

参数 说明 类型 可选值 默认值
name 系列数据名称 String '' ''
data 数据 Array -- --
color 曲线颜色 String rgb值,为了方便取渐变值 --

xAxisOption, yAxisOption的参数说明

参数 说明 类型 可选值 默认值
axisLineColor 轴线颜色 String 16进制颜色值 #101d5d
fontColor 轴线文字颜色 String 16进制颜色值 #ffffff
fontSize 轴线文字大小 String px字号大小 14

tooltipOption的参数说明

参数 说明 类型 可选值 默认值
fontSize 提示框文字大小 String px字号大小 16