Echarts 之pie 環形圖

實作步驟：

一、引入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)
},
           

顯示結果：