echarts 饼图百分比-教你如何用ECharts绘制饼图和环形图

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

下面制作一个基本的饼图echarts 饼图百分比，将Echarts中series的type参数值设置为pie，如图4-14所示。

代码如下所示：

option = {
    title: {
        text: '各商品销量占比',
        subtext: 'A商场情况分析',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
    },
    series: [
        {
            name: '所售商品',
            type: 'pie',
            data: [
                {value: 343, name: 'A商品'},
                {value: 250, name: 'B商品'},
                {value: 509, name: 'C商品'},
                {value: 108, name: 'D商品'},
                {value: 948, name: 'E商品'}
            ],
        }
    ]
};

复制

▲图4-14 饼图

上面代码中，图例设置为垂直，防止水平显示后与标题重叠。 这里设置tooltip的显示格式为：formatter:'{a}

{b}:{c}({d}%)'echarts 饼图百分比，饼图中各个参数的具体含义为：{a}（系列名称）、{b}（数据项名称）、{c}（值） ，{d}（比率）。 当鼠标悬停在饼图上时，饼图将突出显示，并且将根据格式化程序显示文本和值。

需要注意的是，当我们点击饼图的图例时，例如，当我们点击产品C的图例时，产品C的图例会变成红色，同时产品C的饼图也会变成红色。饼图上不再显示，且比例将重新估计，如图4-15所示。

▲图4-15 饼图显示控件

不仅是基本的饼图，环形图也经常使用。 在ECharts中，可以通过在系列中添加radius参数来绘制环形图，如下面代码中的radius:['50%','70%']，表示内径与外径的比例环的直径为50%、70%。

option = {
    title: {
        text: '各商品销量占比',
        subtext: 'A商场情况分析',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} 
{b} : {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['A商品', 'B商品', 'C商品', 'D商品', 'E商品']
    },
    series: [
        {
            name: '所售商品',
            type: 'pie',
            radius: ['50%', '70%'],
            data: [
                {value: 343, name: 'A商品'},
                {value: 250, name: 'B商品'},
                {value: 509, name: 'C商品'},
                {value: 108, name: 'D商品'},
                {value: 948, name: 'E商品'}
            ],
        }
    ]
};

复制

环形图的可视化结果如图4-16所示。

▲图4-16 环图

作者简介：王大伟，毕业于华南理工大学，硕士，目前就职于平安金融壹账通，从事数据挖掘算法工作，擅长ECharts、Python、自然语言处理、数据分析与挖掘和机器学习。 获得Google最有价值专家（MVP）荣誉称号。