点我扫二维码，查看demo
# ChartPie 饼图
# 介绍
数据可视化组件，可从数据生成饼图或者环形图
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { ChartPie } from '@dolphin-iot/ui'
Vue.use(ChartPie);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
设置饼图的几何属性 geometry,以及 data 即可显示饼图。
<template>
<div class="container">
<mx-chart-pie :geometry="geo" :data="data" />
</div>
</template>
<script>
export default {
data() {
return {
geo:{
color:['#267AFF','#00CBB8','#FFAA10'],
},
data:{
'日均温度': 80,
'日均湿度': 100,
'日均密度':30
}
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
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
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
# 环形图
设置 show-ring 属性为 true 即可显示出环形图。
<template>
<div class="container">
<mx-chart-pie :geometry="geo" :data="data" :show-ring="true"/>
</div>
</template>
<script>
export default {
data() {
return {
geo:{
color:['#267AFF','#00CBB8','#FFAA10'],
},
data:{
'日均温度': 80,
'日均湿度': 100,
'日均密度':30
}
};
},
};
</script>
<style lang="scss" scoped>
.container{
width:100%
height:300px
}
</style>
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
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
# Api
# Props
| 参数 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
| geometry | 显示的几何图形相关的配置，如颜色等 | object | - | 是 |
| data | 待绘图的数据（通常为一个对象） | array | - | 是 |
| show-ring | 是否显示为环型图 | boolean | false | - |
| width | 宽度 | number | - | 是 |
| height | 高度 | number | - | 是 |