vue+elementui+echarts饼状图内部显示百分比

在这里插入图片描述

 <!--饼状图-->
            <div id="main" style="width: 400px;height: 350px;"></div>
 import echarts from 'echarts'
    export default {
        name: '',
        data () {
            return {
                charts: '',
                opinion:['执行总额','已经执行'],
                type: 'pie',
                opinionData:[
                    {value:400, name:'执行总额'},
                    {value:600, name:'已经执行'},
                ],
            }
        },
        methods:{
            drawPie(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    color: ['#A4B6C9', '#4E7095'],/*饼状图的颜色*/
                    tooltip : {
                        trigger: 'item',
                        formatter: "{b}({d}%)",/*饼状图触碰之后显示的注释文字*/
                    },
                    legend: {
                        left: 'center',/*标签文字排成一行*/
                        y: 'bottom',/*在垂直方向上的底部*/
                        data:this.opinion,
                    },
                    series: [
                        {
                            type: 'pie',   //饼状图
                            center: ['50%', '40%'],    //显示位置
                            name:'',
                            type:'pie',
                            radius:['0%','60%'],/*空心圆的占比*/
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                },
                                normal: {
                                    borderWidth: 5,/*隔开的白色边界*/
                                    borderColor: '#fff',/*border*/
                                    // labelLine :{show:true}
                                },
                            },

                            avoidLabelOverlap: false,
                            label: {
                                normal: {
                                        show:true,
                                        position:'inner',
                                        textStyle: {
                                            fontWeight: 200,
                                            fontSize: 20   //文字的字体大小
                                        },
                                    formatter: '{d}%',/*饼状图内显示百分比*/
                                    // data:['40%','60%'],
                                },

                                emphasis: {
                                    show: false,/*空心文字出现*/
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                            data:this.opinionData
                        }
                    ]
                })
            }
        },
        //调用
        mounted(){
            this.$nextTick(function() {
                this.drawPie('main')
            })
        },
    }
VueElementUIEcharts 是三个非常常用的前端开发框架,它们可以很好地配合使用以创建可视化大屏。 首先,Vue 是一个用于构建交互式的用户界面的渐进式框架。它提供了一系列的工具和组件,可以让开发者更加便捷地开发单页面应用。Vue 的优点在于其轻量级和易学性,同时它还提供了更好的模块化和数据驱动的开发方式。 其次,ElementUI 是一个基于Vue的组件库,其中包含了常用的UI组件。它提供了丰富的组件和模板,可以与Vue框架无缝集成,极大地提高了开发效率。ElementUI 提供了美观的界面设计,使得可视化大屏的展示效果更加专业和美观。 最后,Echarts 是一个强大的数据可视化库,支持多种图表类型和交互方式。VueEcharts之间的集成非常方便,可以通过Vue的指令或者组件方式调用Echarts的API,实现各种图表的展示Echarts 提供了丰富的配置选项和事件响应机制,使得开发者可以灵活地定制和交互大屏。 结合VueElementUIEcharts,可以很轻松地实现可视化大屏的开发。首先,使用Vue进行单页面应用的开发,结合ElementUI的组件实现大屏的布局和样式。然后,使用Echarts的图表组件,根据需要绘制各种图表,展示数据的变化情况。通过VueEcharts的集成,可以将数据与图表进行绑定,实时更新图表的展示,提高用户的交互体验。 总之,使用VueElementUIEcharts可以轻松地开发可视化大屏,实现数据的可视化展示。这种组合可以提高开发效率和用户体验,同时还可以为用户呈现出更加美观和专业的界面设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值