highcharts饼状图使用案例

Posted 2020-08-22 NICE哥哥

在公司由于需要对订单数据进行分析，故使用到了highcharts工具

<block name="Js">
    <script type="text/javascript">//图表属性，不包含数据
            var options = {
                chart: {
                    renderTo:\'container\',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                credits: {
                    enabled:false
                },
                title: {
                    text: \'各类型服务销售饼状图\'
                },
                legend: {
                    margin:40
                },
                tooltip: {
                    formatter: function () {
                        return this.series.name + \': \' + \'<b>\'+this.percentage.toFixed(2)+\'%\'+\'</b><br/>\' +
                                \'订单数： \' + this.y;
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: \'pointer\',
                        dataLabels: {
                            enabled: true,
                            format: \'<b>{point.name}</b>: {point.percentage:.1f} %\'+\'<br/><b>订单数：</b>{point.y}<br/><b>总金额：</b>{point.cost}元<br/><b>平均金额：</b>{point.average}元\',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || \'black\'
                            }
                        },
                        events: {  //绑定点击时间
                            click: function(obj) {
                                window.location.href = obj.point.url;
                            }
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: \'pie\',
                    name: \'占比：\',
                    data: []
                }]
            };

        //初始函数
        if(document.getElementById(\'order_date_to\') != null){
            $(function () {
                queryData();
            });
        }

        var pieArr = [];
        var tooltipArr = [];
        //Ajax 获取数据并解析创建Highcharts图表
        function queryData() {
            var orderDateFrom = document.getElementById(\'order_date_from\').value;
            var orderDateTo = document.getElementById(\'order_date_to\').value;
            $.ajax({
                url:\'getRevenueProfiles?order_date_from=\'+orderDateFrom +\'&order_date_to=\'+orderDateTo,
                type:\'get\',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,dailyData){
                        var value = {name:dailyData[\'service_type_display\'], y:parseInt(dailyData[\'order_count\']), url:dailyData[\'url\'], cost:parseFloat(dailyData[\'all_cost\']), average:parseFloat(dailyData[\'average_cost\'])};
                        pieArr.push(value);
                    });

                    options.title.text = orderDateFrom+"至"+orderDateTo+"各类服务销售饼状图";
                    options.series[0].data = pieArr;

                    var chart = new Highcharts.Chart(options);
                }
            });
        }</script>
</block>

后台代码：利用ajax传递数据。

效果图：

如有问题发邮件至：[e-mail]