legend中的formatter: 用來格式化圖例文本,支持字符串模板和回調(diào)函數(shù)兩種形式.

Documentation - Apache ECharts

字符串模板的相識變量使用(不同的圖表對應(yīng)都有對應(yīng)的變量):

Documentation - Apache ECharts

具體詳細使用可以點^^^鏈接查看:

以下是我司的項目實例:

//核心代碼

legend: {
? ? formatter: function (name) {
? ? ? ? // 想要實現(xiàn)什么樣的效果,可以根據(jù)你們的需求來進行處理返回
? ? ? ?if (name.indexOf('星') > -1) {//判斷是否是星級占比
? ? ? ?      let p = (tarValue / total * 100).toFixed(2);//計算百分比
? ? ? ?     return name + '\r\r' + p + '%';//返回文本
? ? ? ? } else {
? ? ? ?     let p = (tarValue / total * 100).toFixed(2);//計算百分比
? ? ? ?     return name + '\r\r\r' + tarValue + '個\r\r|\r\r' + p + '%';//返回文本
? ? ? ? }
? ? }
}

想要實現(xiàn)兩個圖表的嵌套效果,如上圖所示:

你只需要創(chuàng)建一個 <div id="xjzbChart"></div>

然后 獲取 xjzbChart = echarts.init(document.getElementById('xjzbChart'));

在 series數(shù)組里面創(chuàng)建兩個圖表對象,通過center 屬性調(diào)整位置就OK了.文章來源地址http://www.zghlxwxcb.cn/news/detail-635539.html

<div id="xjzbChart"></div>

onMounted(()=>{
? ? xjzbChart = echarts.init(document.getElementById('xjzbChart'));? ? 
? ? drawXjzbChart();? ? 
? ? window.addEventListener('resize', () => {
? ? ? ? xjzbChart.resize();
? ? })
})

function drawXjzbChart() {
        let option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                icon: 'circle',
                itemHeight: 10,
                itemWidth: 10,
                bottom: 20,
                itemGap: 20,
                left: 'center',
                textStyle: {
                    color:'#ffffff',
                    fontSize: 14
                },
                formatter: function (name) {
                    // 獲取星級占比數(shù)據(jù)
                    let data1 = option.series[0].data;
                    // 獲取機構(gòu)分布數(shù)據(jù)
                    let data2 = option.series[1].data;
                    let total = 0;
                    let tarValue = 0;
                    let allData = data1.concat(data2);// 合并data1和data2
                    for (let i = 0; i < allData.length; i++) {
                        /* series中的 星級占比: data的value總和 與 機構(gòu)分布: data的value總和  一樣所以我們只需要
                        取前前五個(星級占比的value值進行相加計算總和來計算 星級占比和機構(gòu)分布的百分比) */
                        if (i < 5) {
                            total += allData[i].value;
                        }
                        // 把 allData中的每個name 與 formatter中的name進行比對,并賦上對應(yīng)的值
                        if (allData[i].name == name) {
                            tarValue = allData[i].value;
                        }
                    }
                    if (name.indexOf('星') > -1) { // 對 formatter中的name進行檢索,符合的進行操作
                        // 例: (548/2860*100)保留兩位小數(shù) ==> tarValue=548  total=2860
                        let p = (tarValue / total * 100).toFixed(2);
                        return name + '\r\r' + p + '%';
                    } else {
                        // 檢索出不帶星字的就是機構(gòu)的數(shù)據(jù),然后進行操作
                        let p = (tarValue / total * 100).toFixed(2);
                        return name + '\r\r\r' + tarValue + '個\r\r|\r\r' + p + '%';
                    }
                }
            },
            series: [
                {
                    name: '星級占比',
                    type: 'pie',
                    selectedMode: 'single',
                    center: ['50%', '35%'],
                    radius: [0, '20%'],
                    label: {
                        fontSize: 12,
                        color: '#ffffff',
                        formatter: '\nn5n3t3z%'
                    },
                    labelLine: {
                        show: true,
                        length: 5
                    },
                    data: [
                        { value: 548, name: '一星' },
                        { value: 775, name: '二星' },
                        { value: 679, name: '三星'},
                        { value: 479, name: '四星'},
                        { value: 379, name: '五星'}
                    ]
                },
                {
                    name: '機構(gòu)分布',
                    type: 'pie',
                    center: ['50%', '35%'],
                    radius: ['50%', '65%'],
                    labelLine: {
                        length: 20
                    },
                    label: {
                        color: '#ffffff',
                        fontSize: 14,
                        formatter: '\n{c}'
                    },
                    data: [
                        { value: 348, name: '建安區(qū)' },
                        { value: 435, name: '魏都區(qū)' },
                        { value: 710, name: '長葛市' },
                        { value: 551, name: '禹州市' },
                        { value: 634, name: '襄城縣' },
                        { value: 182, name: '鄢陵縣' }
                    ]
                }
            ]
        }
        xjzbChart.setOption(option);
    }