# Chart 图表
组件依赖全局的 echarts (opens new window) https://unpkg.com/echarts@5.4.0/dist/echarts.js
由于 echartjs 的文件太大,这里就只写例子不做演示了.
<template>
<div>
<ba-chart :height="300" :options="options"></ba-chart>
</div>
</template>
<script>
export default {
data() {
return {
options: {}
};
},
mounted: function () {
this.chartInit();
},
methods: {
chartInit: function (datalist) {
this.options = {
grid: {
top: '5%',
left: '5%',
right: '0%',
bottom: '10%'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}
]
};
}
}
};
</script>
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
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
# 属性/事件/参数
# Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
height | 高度 | Number | — | 300 |
options | 配置 | Object | — | — |
# Events
事件名称 | 说明 | 回调参数 |
---|---|---|
load | 图表加载完成事件 | Chart 对象 |
# Slot
名称 | 说明 |
---|---|
— | — |