餅圖-玫瑰圖

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狀態(tài)`,
                    textAlign: 'center',
                    fill: '#ffffff',
                    fontSize: '100%', // 用百分比代替數(shù)字進行適配
                    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: ['狀態(tài)', '數(shù)量'],
                    rows: []
                },
                colorList:[
                    // {color:'',text:'', num:''}
                ]
            }
        },
        beforeDestroy() {
            clearInterval(this.apiTimer)
        },
        created() {
            this.getRingData()
        },
        methods:{
            getRingData(){   // 接口請求餅圖的數(shù)據(jù)。封裝過的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(
                                {
                                    '狀態(tài)': element.stateName, '數(shù)量': element.nums
                                }
                            )
                        })
                        this.colorList = colorList;
                        this.show = true
                    }else{
                        this.show = false;
                    }
                })
            }
        }
    }
</script>