官方文檔:https://echarts.apache.org/zh/index.html
使用技巧：點擊例子-》配置項，可以看到哪些選項可以配置

formatter中abc的含義（注意類似{a}、使用return的方式不生效）

1、折線（區(qū)域）圖、柱狀（條形）圖: a（系列名稱），b（類目值），c（數(shù)值）, d（無）
2、散點圖（氣泡）圖 : a（系列名稱），b（數(shù)據(jù)名稱），c（數(shù)值數(shù)組）, d（無）
3、餅圖、雷達圖 : a（系列名稱），b（數(shù)據(jù)項名稱），c（數(shù)值）, d（百分比）
4、弦圖 : a（系列名稱），b（項1名稱），c（項1-項2值），d（項2名稱)， e(項2-項1值)
5、除abcd外的自定義值
// formatter,自定義展示的內(nèi)容，其中p,q為自己定義的值，item.p為p的值，    \n 表示換行的意思
formatter: '{b|}\n{p|P:' + item.p + 'KW}\n{q|Q:' + item.q + 'KW}',
rich: {  // rich可以設(shè)置p q b 的樣式，即 | 左側(cè)定義的內(nèi)容
    p: { // 自定義的p的樣式
        color: '#3c3c3c',
        lineHeight: 22,
        align: 'center'
    },
    q:{ // 自定義的q的樣式
        color: '#3c3c3c',
        lineHeight: 22,
        align: 'center'
    },
    b: { // b的樣式
        color: '#000',
        fontSize: 14,
        lineHeight: 20
    }
}

一、餅圖

import * as echarts from 'echarts';
...
initChart() {
    this.chart && this.chart.dispose();
    this.chart = echarts.init(document.getElementById('chart'));
    this.chart.setOption({
        tooltip: { // 點擊顯示數(shù)據(jù)
            trigger: 'item'， // 點擊餅圖塊觸發(fā)
            formatter: function(params) {
             // 自定義返回數(shù)據(jù)顯示: 圖例圖形+名字：+數(shù)值%
                 return params.marker + params.name + ':' + value + '%'
            }
        },
        legend: { //  圖例說明
            x:'left',  // 圖例x軸的位置，left/center/right/具體數(shù)值
            y:'top', // 圖例y軸的位置，top/center/bottom/具體數(shù)值
            backgroundColor: '#fff', // 圖例背景顏色
            borderColor:'#f00', // 圖例邊框顏色
            borderWidth: '15', // 邊框顏色
            padding: [0, 5],  // 內(nèi)邊距，和同css一樣，只是改為數(shù)組傳入
            itemHeight: 10, // 圖例圖形高度
            itemWidth: 10, // 圖例圖形寬度
            orient: 'horizontal', // 水平顯示， vertical垂直顯示
            type: 'scroll', // 如果個數(shù)太多，一行滾動顯示，不設(shè)置默認換行并排顯示
            selected: { // 設(shè)置圖例的某個選項的數(shù)據(jù)默認是顯示還是隱藏
                  '展示名字1': false,
                  '展示名字2': true
            },
            data: [{
                name: '展示名字1',
                icon:'指定圖例項的icon，可以為內(nèi)置的circle、triangle等圖形7個圖形，或者自定義圖標(biāo)的形式：'image://url''  ,
                itemGap: 20, // 每一項的間距
                textStyle: { // 設(shè)置字體樣式
                    fontWeight: 'bold', 
                    color: 'orange'
               }
            }, {
                name: '展示名字2',
                icon:'circle'
            }]
        }，
        color: ['#975FE6','#3AA1FE','#35CBCA','#4FCB73',' #FBD437','#F3637C'], // 不同塊的顏色
        series: [ {
            type: 'pie',
            radius: ['40%', '60'], // 設(shè)置圓環(huán)的大小
            data:this.chartData.map(item => {
                return {
                    name: item.name,
                    value: item.value,
                    label: {
                        normal: {
                            color:'字體顏色'  // 不同項顯示不同顏色，可以在這邊設(shè)置
                        }
                    }
                }
            })，
            avoidLabelOverlap: true, // 避免標(biāo)簽重疊
            labelLine: {
                normal: {
                    show: true, // false的時候不顯示線，默認為true
                    length: 15, // 第一段線長度
                    length2: 80, // 第二段線長度
                    align: 'right'
                },
                emphasis: { // 點擊的時候效果
                    show: true
                }
            },
            label: {
                normal: {
                    formatter:[
                        'a|u0z1t8os% ',
                        '{b|}'
                    ].join('\n'),
                    rich: { // 設(shè)置a、b樣式，即 | 左側(cè)定義的內(nèi)容
                        a: {
                            left: 20,
                            padding: [0, -80, -15, -80]
                        },
                        b: {
                            height: 5,        
                            width: 5,
                            lineHeight: 5,
                            marginBottom: 10,
                            padding: [0, -5],
                            borderRadius: 5,
                            backgroundColor: '#f00',
                        }
                    }
                },
                itemStyle: { // 塊樣式
                    borderWidth: 5, // 塊間的間距可以通過這個配合borderColor來實現(xiàn)，borderColor設(shè)置和圖表背景顏色一致的話，看起來就是塊的間距了
                    borderColor: '#fff'
                }
            }
        }]
    })
}