图标插件——heightcharts

不需要引入css,有中文网站，此例是改进。注释

官网：https://www.hcharts.cn/

highcharts legend 饼图 图例位置 http://blog.csdn.net/kfyong/article/details/51082683

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min- 377px;height:277px;"></div>

JAVASCRIPT

<script>
    $(function () {
        $('#container').highcharts({
            //清除版本网址
            credits: {
                enabled: false
            },
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            //图的标题
            title: {
                text: '',
                style: {
                    height: '0px',
                    display: 'none'
                     }
            },
            //鼠标hover事件
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    //配置图上显示的文字
                    dataLabels: {
                        enabled: true,//是否显示块信息百分比
                        distance: -10,//显示位置不配置会有线
                        //format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        format: '{point.percentage:.1f} %',
                        style: {
                            fontWeight: '400',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                        //style: {
                        //    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        //}

                    },
                    showInLegend: true,//是否显示图例
             
                }
            },
            legend: {//控制图例显示位置
                layout: 'vertical',//垂直排列
                align: 'right',
                verticalAlign: 'top',
                //y: 50,//距上方的位置
                //symbolHeight: 12,//小图标的大小
                //symbolWidth: 12,
                symbolRadius: 1,//图标圆角
                itemDistance: 5,//图例间距
            },
            series: [{
                type: 'pie',
                name: '全国PPG占比',
                data: [
                    ['直接访问', 45.0],
                    ['邮件营销', 26.8],
                    ['联盟广告', 8.5],
                    ['视频广告', 6.2],
                    ['搜索引擎', 7.7]
                ]
            }]
        });
    });
</script>