Echarts 之pie 环形图_echarts 环状图关闭提示

实现步骤：

一、引入Echars

npm install echarts

二、main.js中导入

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

三、html代码

<div id="sjfxPieChart" style="width:100%;height:100%"></div>

四、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)
},

显示结果：