# 新手入门

# 我的第一个线形图

Data Inside-BI官网点击Demo体验，进入Demo界面，点击试一试，打开配置页面。

第一步，基础配置
关于页面布局配置，默认布局为2-2-1的布局方式，Data Inside-BI也提供了多种内置布局方式，也可根据组件右上角的增加、删除按钮进行灵活布局；关于主题，Data Inside-BI目前提供两种主题可选择，也可新增自定义主题，此处将自定义布局修改为1，主题选择亮白色。

第二步，创建我的第一个线形图，点击组件编辑控件(如图)。

选择组件占位类别为线形图。

第三步，配置组件参数及数据绑定。将下列代配置模型码复制替换到参数一栏。

{
  "height": "300",
  "title": {
    "text": "我的第一个线形图",
    "bottom": "0%",
    "right": "45%",
    "textStyle": {
      "fontSize": "15"
    }
  },
  "toolbox": {
    "myFull": true,
    "myDown": true,
    "downLevel": -1
  },
  "legend": {},
  "tooltip": {
    "trigger": "axis",
    "formatter": "fn.formatMutle",
    "formatunit": "万"
  },
  "grid": {
    "left": "3%",
    "right": "4%",
    "bottom": "12%",
    "height": "auto",
    "containLabel": true
  },
  "xAxis": {
    "type": "category",
    "data": "${data:DATA_YEAR}"
  },
  "yAxis": {
    "type": "value",
    "axisLine": {
      "onZero": false
    },
    "axisLabel": {
      "formatter": "{value}万元"
    },
    "boundaryGap": true
  },
  "series": [{
    "name": "成都分公司",
    "type": "line",
    "smooth": true,
    "data": "${data:NAME1}"
  },
  {
    "name": "武汉分公司",
    "type": "line",
    "smooth": true,
    "data": "${data:NAME2}"
  },
  {
    "name": "重庆分公司",
    "type": "line",
    "smooth": true,
    "data": "${data:NAME3}"
  }]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

第四步，再将下列数据源绑定代码复制替换到数据源一栏，最后点击预览。

[{
  "apiname": "data",
  "apiaddress": "/api/MppQuery/GetDataListByTableName",
  "params": {
    "tablename": "Demo_table1",
    "colname": "DATA_YEAR,NAME1,NAME2,NAME3",
    "where": [],
    "orderby": ""
  }
}]

1
2
3
4
5
6
7
8
9
10