ap-dev 1.1.19 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dev/ApiPanel/menus.js
CHANGED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<api-tittle-1>图表组件</api-tittle-1>
|
|
4
|
+
<api-tittle-2>一、使用方法</api-tittle-2>
|
|
5
|
+
<api-content>
|
|
6
|
+
<api-code>{{ js1 }}</api-code>
|
|
7
|
+
|
|
8
|
+
<br>echarts官方文档：
|
|
9
|
+
<el-link type="primary">https://echarts.apache.org/zh/option.html#title</el-link>
|
|
10
|
+
</api-content>
|
|
11
|
+
<api-tittle-2>二、参数说明</api-tittle-2>
|
|
12
|
+
<api-table :data="methodData" :columns="methodCols"/>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script>
|
|
17
|
+
import {ApiCode, ApiContent, ApiTable, ApiTittle1, ApiTittle2} from './../components'
|
|
18
|
+
|
|
19
|
+
export default {
|
|
20
|
+
name: 'ApiEcharts',
|
|
21
|
+
components: {
|
|
22
|
+
ApiTable, ApiCode, ApiTittle1, ApiContent, ApiTittle2
|
|
23
|
+
},
|
|
24
|
+
data() {
|
|
25
|
+
const methodCols = [
|
|
26
|
+
{ label: '名称', prop: 'name', width: '180px' },
|
|
27
|
+
{ label: '类型', prop: 'type', width: '100px' },
|
|
28
|
+
{ label: '默认值', prop: 'default', width: '80px' },
|
|
29
|
+
{ label: '描述', prop: 'memo', minWidth: '100px' },
|
|
30
|
+
{ label: '示例代码', prop: 'code', minWidth: '100px' }]
|
|
31
|
+
const methodData = [
|
|
32
|
+
{
|
|
33
|
+
name: 'id',
|
|
34
|
+
type: '字符串',
|
|
35
|
+
default: '时间戳',
|
|
36
|
+
memo: 'echarts渲染dom对应的id',
|
|
37
|
+
code: `<div class="api-code">id: "myId"</div>`
|
|
38
|
+
}, {
|
|
39
|
+
name: 'color',
|
|
40
|
+
type: '字符串',
|
|
41
|
+
default: '无',
|
|
42
|
+
memo: '图表的内置配色库<br>可选值：light、dark',
|
|
43
|
+
code: `<div class="api-code">color: "light"</div>`
|
|
44
|
+
}, {
|
|
45
|
+
name: '其他',
|
|
46
|
+
type: '',
|
|
47
|
+
default: '',
|
|
48
|
+
memo: '同echarts官方属性',
|
|
49
|
+
code: `<div class="api-code">let opts = {
|
|
50
|
+
// 自定义id
|
|
51
|
+
id: "myId",
|
|
52
|
+
// 配色
|
|
53
|
+
color: "light",
|
|
54
|
+
// ---------- echarts 官方属性示例 start ----------
|
|
55
|
+
xAxis: {
|
|
56
|
+
type: 'category',
|
|
57
|
+
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
58
|
+
},
|
|
59
|
+
yAxis: {
|
|
60
|
+
type: 'value'
|
|
61
|
+
},
|
|
62
|
+
series: [
|
|
63
|
+
{
|
|
64
|
+
data: [150, 230, 224, 218, 135, 147, 260],
|
|
65
|
+
type: 'line'
|
|
66
|
+
}
|
|
67
|
+
]
|
|
68
|
+
// ---------- echarts 官方属性示例 end ----------
|
|
69
|
+
};</div>`
|
|
70
|
+
}
|
|
71
|
+
]
|
|
72
|
+
|
|
73
|
+
let js1 = `// 1、定义组件
|
|
74
|
+
<div style="width: 500px;height: 400px;">
|
|
75
|
+
<ap-chart ref="barChart" :options.sync="opts"></ap-chart>
|
|
76
|
+
</div>
|
|
77
|
+
// 2、定义参数
|
|
78
|
+
data() {
|
|
79
|
+
return {
|
|
80
|
+
opts: {
|
|
81
|
+
id: "myId",
|
|
82
|
+
color: "light",
|
|
83
|
+
...
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}`
|
|
87
|
+
return {
|
|
88
|
+
methodData,
|
|
89
|
+
methodCols,
|
|
90
|
+
js1
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
methods: {}
|
|
94
|
+
}
|
|
95
|
+
</script>
|
|
96
|
+
|
|
97
|
+
<style scoped>
|
|
98
|
+
</style>
|
|
@@ -83,6 +83,17 @@ export default {
|
|
|
83
83
|
memo: '数据请求method。get或post',
|
|
84
84
|
code: `<div class="api-code"></div>`
|
|
85
85
|
}, {
|
|
86
|
+
name: 'searchTreeParams',
|
|
87
|
+
type: '对象/方法',
|
|
88
|
+
default: '',
|
|
89
|
+
memo: '数据请求参数。<br>注：1、参数动态时需要使用方法，参数固定可直接定义对象',
|
|
90
|
+
code: `<div class="api-code">1、固定参数：定义对象
|
|
91
|
+
searchTreeParams: { type: 123}
|
|
92
|
+
2、动态参数：使用箭头函数
|
|
93
|
+
searchTreeParams: () => {
|
|
94
|
+
return { type: this.typeId}
|
|
95
|
+
}</div>`
|
|
96
|
+
}, {
|
|
86
97
|
name: 'searchTreeSelectMultiple',
|
|
87
98
|
type: '布尔',
|
|
88
99
|
default: 'false',
|
|
@@ -159,4 +170,4 @@ options:{
|
|
|
159
170
|
</script>
|
|
160
171
|
|
|
161
172
|
<style scoped>
|
|
162
|
-
</style>
|
|
173
|
+
</style>
|