Echarts 之pie 环形图

朴灿烈づ我的快乐病毒、 2023-01-19 11:50 3阅读 0赞

# 实现步骤： #

### 一、引入Echars ###

> npm install echarts

### 二、main.js中导入 ###

// 图表--插件
    import echarts from 'echarts'
    
    Vue.use(echarts)
    
    Vue.prototype.$echarts = echarts

### 三、html代码 ###

### 四、js代码 ###

// 初始化环形图
    initEchars_Pie(){   
        var myChart = this.$echarts.init(document.getElementById('sjfxPieChart'))
        let option = {
            color:['#57FF64','#FFA53C','#675AFF','#FF457E','#39D7DE','#026DF0'],
            tooltip: {  //悬浮提示内容
                trigger: 'item',
            },
            legend: {   //图例文字
                orient:'vertical',
                top: '13%',
                right:'0px',
                icon: "circle", //这个字段控制形状
                itemGap: 10,    //设置间距
                textStyle:{     //图例文字的样式
                    color:'#424F65',
                    fontSize:14,
                    fontWeight:700,
                    rich:{    //这里面的 a、b 是在formatter中定义的
                        a:{
                            width:50,
                            fontSize:14,
                            fontWeight:700,
                            color:"#666",
                        },
                        b:{
                            width:60,
                            fontSize:14,
                            fontWeight:700,
                            align: 'right',
                            color:'#3EF771',
                        },
                    },
                },
                // 重写legend显示样式 legend显示内容
                formatter: function(name) {
                    let data = option.series[0].data;
                    let total = 0;
                    let tarValue = 0;
                    for (let i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    let p = (tarValue / total * 100).toFixed(2);
                    return ['{a|'+name+'}{b|'+ (p?parseFloat(p):0) +'%}']
                },
            },
            series: [
                {
                    // name: '访问来源',
                    name: '提示：',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['23%', '50%'],//环形图--显示位置
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                        normal: {
                            show: true,
                            position: 'center',
                            formatter:function(){
                                return ' 年龄分布'
                            },
                            textStyle:{
                                fontSize:17,
                                color:"#666"
                            }
                        },
                    },
                    data: [
                        {value: 148, name: '18岁以下'},
                        {value: 735, name: '18～29岁'},
                        {value: 580, name: '30～39岁'},
                        {value: 484, name: '40～49岁'},
                        {value: 300, name: '50～59岁'},
                        {value: 300, name: '60岁以上'}
                    ]
                }
            ]
        };
        myChart.setOption(option)
    },

### 显示结果： ###

![2021080814330923.png][]

[2021080814330923.png]: /images/20221021/8be44581c4f34de5bb09850232ecb5e3.png