饼图-玫瑰图

template

<div class="ringPosition" style="width: 6.77rem"  v-if="show">
                <ve-ring :data="chartData" :settings="chartSettings" :graphic="graphic" :judge-width="true" height="7.8rem"></ve-ring>
</div>

js

<script>
    export default {
        name: "ringRose",
        data () {
            this.graphic= [{  // 设置饼图中心显示的文字
                type: 'text',
                left: 'center', //设置位置
                top: '37%', 
                style: {
                    text: `设备\n状态`,
                    textAlign: 'center',
                    fill: '#ffffff',
                    fontSize: '100%', // 用百分比代替数字进行适配
                    color: "#4d4f5c",
                }
            }];
            this.chartSettings = {
                roseType: 'radius',
                legendLimit: 0,
                label: {
                    show: false
                },
                radius: ['65%', '100%'], //设置饼图内圆和外圆的占比
                offsetY: '49%', //设置饼图位置
                itemStyle: {
                    color: seriesIndex => {
                        return this.colorList[seriesIndex.dataIndex].color; //设置饼图每份的颜色
                    }
                }
            }
            return {
                apiTimer:null,
                show: false,
                chartData: {
                    columns: ['状态', '数量'],
                    rows: []
                },
                colorList:[
                    // {color:'',text:'', num:''}
                ]
            }
        },
        beforeDestroy() {
            clearInterval(this.apiTimer)
        },
        created() {
            this.getRingData()
        },
        methods:{
            getRingData(){   // 接口请求饼图的数据。封装过的axios请求
                this.$api.getRequest('/api/device', {shopId: this.$route.query.groupId}).then(res => {
                    this.chartData.rows = [];
                    let colorList = [];
                    if(res != null && res.length > 0){
                        res.forEach((element, index)=>{
                            colorList[index] = {color: element.statusColour, text: element.stateName, num: element.nums};
                            this.chartData.rows.push(
                                {
                                    '状态': element.stateName, '数量': element.nums
                                }
                            )
                        })
                        this.colorList = colorList;
                        this.show = true
                    }else{
                        this.show = false;
                    }
                })
            }
        }
    }
</script>