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

发布时间：2023-05-18

一、选取合适的数据

环形图适合用来展示不同数据之间的占比关系，因此选取的数据应当符合这个特点。比如，我们可以用环形图展示某个公司不同部门的利润占比，或者某款产品不同销售地区的市场份额。 举个例子，我们现在有一个小型的外卖平台，想要用环形图展示不同餐饮品类的销售量占比。我们先根据销售数据计算出每个品类的销售量，并把这些数据汇总成一个对象数组：

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创建令人惊叹的环形图的示例代码：

<title>餐饮品类销售量占比</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
<div id="chart" style="width: 600px;height:400px;"></div>
<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>
推荐文章