使用Echarts创建令人惊叹的环形图

一、选取合适的数据

环形图适合用来展示不同数据之间的占比关系，因此选取的数据应当符合这个特点。比如，我们可以用环形图展示某个公司不同部门的利润占比，或者某款产品不同销售地区的市场份额。

举个例子，我们现在有一个小型的外卖平台，想要用环形图展示不同餐饮品类的销售量占比。我们先根据销售数据计算出每个品类的销售量，并把这些数据汇总成一个对象数组：

var data = [
    {value: 300, name: '中式'},
    {value: 200, name: '西式'},
    {value: 150, name: '日式'},
    {value: 100, name: '韩式'},
    {value: 50, name: '其他'}
];

这个数组中，每个对象都包含两个属性：value表示销售量，name表示品类名称。

二、设置图表属性

在使用Echarts绘制环形图之前，我们需要设置一些基础属性。例如，我们可以设置图表的标题和数据源：

var option = {
    title: {
        text: '餐饮品类销售量占比',
        subtext: '2021年1月-6月'
    },
    series: [{
        name: '销售量',
        type: 'pie',
        data: data
    }]
};

上述代码中，我们通过title属性设置了图表的标题和副标题，通过series属性设置了数据和图表类型。这里我们选择使用pie类型绘制环形图。

三、设置环形图样式

除了基础属性之外，我们还可以通过style属性设置图表的样式。在环形图中，我们可以调整环的内外半径、中心位置、颜色等属性来实现不同的效果。

例如，我们可以将内半径设为50%，外半径设为70%，让环形图看起来更加立体：

series: [{
    name: '销售量',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    data: data
}]

我们还可以调整扇形之间的间距和弧度，让图表更加美观。例如，我们可以将间距设为5%，将第一块扇形的起始角度设为90度：

series: [{
    name: '销售量',
    type: 'pie',
    radius: ['50%', '70%'],
    center: ['50%', '50%'],
    roseType: 'radius',
    itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
    },
    label: {
        color: '#000'
    },
    data: data.sort(function(a, b) {
        return a.value - b.value;
    }),
    labelLine: {
        smooth: 0.2,
        length: 10,
        length2: 20
    },
    itemStyle: {
        emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
    }
}]

四、完整示例代码

以下是一个完整的使用Echarts创建令人惊叹的环形图的示例代码：

    
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>


    
  

    <script>
        var data = [
            {value: 300, name: '中式'},
            {value: 200, name: '西式'},
            {value: 150, name: '日式'},
            {value: 100, name: '韩式'},
            {value: 50, name: '其他'}
        ];

        var option = {
            title: {
                text: '餐饮品类销售量占比',
                subtext: '2021年1月-6月'
            },
            series: [{
                name: '销售量',
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    color: '#000'
                },
                data: data.sort(function(a, b) {
                    return a.value - b.value;
                }),
                labelLine: {
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };

        var chart = echarts.init(document.getElementById('chart'));
        chart.setOption(option);
    </script>