Echarts【参考】B02.饼状图

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
    color: ['#4D9CFF', '#FF8286', '#F7B500', '#2DB596', '#A695FF'],
    title: {
        show: true,
        text: '{title|执行总数}\n{num|8}',
        left: 'center',
        top: 'center',
        textStyle: {
            rich: {
                title: {
                    fontSize: 21,
                    color: '#999',
                    lineHeight: 50,
                },
                num: {
                    fontSize: 40,
                    color: '#000',
                    lineHeight: 40,
                }
            }
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            let html = '<div style="margin-top: 5px;margin-right: 5px;float: left; border-radius: 10px;width: 10px;height:10px;background-color: ' + params.color + '"></div>'
            let _name = params.name.split('/')
            return html + _name[0] + ': ' + params.percent + '%'
        }
    },
    series: {
            type: 'pie',
            radius: [70, 100],
            left: 'center',
            label: {
                fontSize: 21,
                alignTo: 'edge',
                formatter: '{b}\n',
                edgeDistance: 10,
                lineHeight: 30,
                rich: {
                    title: {
                        fontSize: 21,
                        color: '#999',
                        lineHeight: 50,
                    },
                }
            },
            labelLayout: function (params) {
                var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                var points = params.labelLinePoints;
                points[2][0] = isLeft
                    ? params.labelRect.x
                    : params.labelRect.x + params.labelRect.width;
                return {
                    labelLinePoints: points
                };
            },
            data: [
                { name: '类目1', value: 38, label: {color: '#4D9CFF'}},
                { name: '类目2', value: 23, label: {color: '#FF8286'}},
                { name: '类目3', value: 22, label: {color: '#F7B500'}},
                { name: '类目4', value: 13, label: {color: '#2DB596'}},
                { name: '类目5', value: 12, label: {color: '#A695FF'}},
            ]
        }
};

option && myChart.setOption(option);