使用hicharts 画饼图(pie图)

我个人觉得echarts会稍微好用点, 可能是接触echarts稍微多一点吧(nodejs环境, python环境我都用的echarts的封装实现), 但hicherts也很强大
现在还有ant-design的一整套的解决方案, 也不错, 点击跳转

关键代码

function pieCharts(title, dataName, dataList, container){
    $('#' + container).highcharts({
        chart: {
            plotShadow: false,
            type: 'pie'
        },
        tooltip: {
            headerFormat: '{point.key}
',
            pointFormat: '{series.name}: {point.percentage:.1f}%',
            style: {                      // 文字内容相关样式
                fontSize: "14px"
            }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '{point.y}人（{point.percentage:.1f} %）',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                showInLegend: true
            }
        },
        title: {
            text: title
        },
        credits: {
            text: '', // 设置LOGO区文字
            href: '' // 设置LOGO链接地址
        },
        legend: {
            orient: 'vertical',
            right: 'right',
            top:'50%',
            data: dataName
        },
        series: [{
            name: '占比',
            colorByPoint: true,
            data: dataList
        }]
    });
};

参数解释

• tittle
  图标标题

• dataName
  画图的指标类型, 例如: 男和女

• dataList
  画图的参数, 每种指标占多少

• container
  图标画好后渲染的位置, 一般为div的id