葫芦的运维日志

下一篇 搜索 上一篇

---

kendoui 圆饼图传参，鼠标点击圆饼对应区块传参不同数据：

 

{"data": [{"category": "类别1", "value": 14}, {"category": "类别2", "value": 4}, {"category": "类别3", "value": 7}, {"category": "类别4", "value": 2}, {"category": "类别5", "value": 43}, {"category": "类别6", "value": 8}], "result": true}

<script>
  
    var piedata = [];
        $.ajax({
            url: "${SITE_URL}countpie/",
            type: 'GET',
            dataType: 'json',
            async: true,

            success: function (res) {
                //获取数据成功
                if (res.result) {
                    piedata = res.data;
                    $('#chartC').kendoChart({
                        legend: {
                            position: "bottom"
                        },
                        theme: 'bootstrap',
                        seriesDefaults: {
                            labels: {
                                template: "#= category # - #= kendo.format('{0:P}', percentage)#",
                                position: "outsideEnd",
                                visible: true,
                                background: "transparent"
                            }
                        },
                        categoryAxis: {
                            categories: piedata.categories,
                            majorGridLines: {
                                visible: false
                            },
                            labels: {
                                rotation: "auto"
                            }
                        },
                        render: function (event) {
                            $("svg").css('padding-top', '15px');
                        },
                        series: [{
                            name: '访问来源',
                            type: 'pie',
                            data: piedata
                        }],
                        seriesClick: function (event) {
                            layer.ready(function () {
                                layer.open({
                                    type: 2,
                                    //关键传参
                                    title: '\<font color="red">' + event.category + '\<\/font>',
                                    maxmin: true,
                                    area: ['910px', '810px'],
                                    content: '${SITE_URL}g6demo',
                                    end: function () {
                                        layer.tips('Hi', '#about', {tips: 1})
                                    }
                                });
                            });
                        }


                    });
                }
            }
        });
</script>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇