vue集成 echarts 圆环+中间文字

安装echarts

npm install echarts --save

核心使用

title的x,y
series的radius

			<div ref="pieChart"></div>
			
			import echarts from 'echarts';
			mounted () {
			        this.drawPie (legendData, seriesData,seriestotal);
			},
			drawPie (legendData, seriesData,seriestotal) {
                this.pieChart = echarts.init(this.$refs.pieChart);
                this.pieChart.setOption(
                    {
                        title: {
                            zlevel: 0,
                            text: '总数',
                            subtext: seriestotal,
                            subtextStyle:{
                                color:'#13227a',
                                fontWeight:'bold',
                                fontSize:26
                            },
                            x: 'center',//文字位置
                            y:'center'//文字位置
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                mark: {show: true},
                                dataView: {show: true, readOnly: false},
                                restore: {show: true},
                                saveAsImage: {show: true}
                            }
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c}份 ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: legendData
                        },
                        series: [
                            {
                                name: '统计',
                                type: 'pie',
                                radius: ['40%', '80%'],//设置圆环 数组的第一项是内半径，第二项是外半径
                                data: seriesData,
                                zlevel: 1,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }
                );
            },