highCharts立体加背景图效果

最新推荐文章于 2023-06-02 14:48:43 发布
是可爱的大福呀~
最新推荐文章于 2023-06-02 14:48:43 发布
阅读量874
点赞数 2
文章标签： javascript 开发语言 ecmascript
本文链接：https://blog.csdn.net/henghahouhei/article/details/125442376
版权
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>highCharts</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .electricChart{
            width:500px;
            height: 230px;
        }
    </style>
</head>
<body>
<div class="electricChart" id="electricChart"></div>
<script src="modules/jquery.min.js"></script>
<script src="modules/highChart/highcharts.js"></script>
<script src="modules/highChart/highcharts-3d.js"></script>
<script>
    var dataList = [
        {
            name: '照明与插座用电',
            y: 124,
            h: 30
        }, {
            name: '空调用电',
            y: 155,
            h: 10
        }, {
            name: '动力用电',
            y: 140,
            h: 8
        }, {
            name: '特殊用电',
            y: 13,
            h: 6
        }, {
            name: '其他用电',
            y: 120,
            h: 20
        }]
    getSituationPie(dataList)
    function getSituationPie(dataList){
        var each = Highcharts.each,
            round = Math.round,
            cos = Math.cos,
            sin = Math.sin,
            deg2rad = Math.deg2rad;
        Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
            proceed.apply(this, [].slice.call(arguments, 1));
            // Do not do this if the chart is not 3D
            if (!this.chart.is3d()) {
                return;
            }
            var series = this,
                chart = series.chart,
                options = chart.options,
                seriesOptions = series.options,
                depth = seriesOptions.depth || 0,
                options3d = options.chart.options3d,
                alpha = options3d.alpha,
                beta = options3d.beta,
                z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
            z += depth / 2;
            if (seriesOptions.grouping !== false) {
                z = 0;
            }
            each(series.data, function(point) {
                var shapeArgs = point.shapeArgs,
                    angle;
                point.shapeType = 'arc3d';
                var ran = point.options.h;
                shapeArgs.z = z;
                shapeArgs.depth = depth * 0.75 + ran;
                shapeArgs.alpha = alpha;
                shapeArgs.beta = beta;
                shapeArgs.center = series.center;
                shapeArgs.ran = ran;
                angle = (shapeArgs.end + shapeArgs.start) / 2;
                point.slicedTranslation = {
                    translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
                    translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
                };
            });
        });
        (function(H) {
            H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
                // Run original proceed method
                var ret = proceed.apply(this, [].slice.call(arguments, 1));
                ret.zTop = (ret.zOut + 0.5) / 100;
                return ret;
            });
        }(Highcharts));
        Highcharts.chart('electricChart', {
            chart: {
                animation: false,
                backgroundColor: "none",
                type: "pie", //饼图
                plotBackgroundImage: 'image/transfer/echartBg.png',
                options3d: {
                    enabled: true, //使用3d功能
                    alpha: 65, //延y轴向内的倾斜角度
                    beta: 0,
                },
                events: {
                    load: function() {
                        var each = Highcharts.each,
                            points = this.series[0].points;
                        each(points, function(p, i) {
                            p.graphic.attr({
                                translateY: -p.shapeArgs.ran
                            });
                            p.graphic.side1.attr({
                                translateY: -p.shapeArgs.ran
                            });
                            p.graphic.side2.attr({
                                translateY: -p.shapeArgs.ran
                            });
                        });
                    }
                }
            },
            legend: {
                useHTML: true,
                labelFormatter: function () {
                    return (
                        '<div style="width: 4.5vw;display: inline-block">' +
                        this.name +
                        ':&nbsp;&nbsp;</div><div style="color: #0290b4;display: inline-block">' +
                        this.y +
                        "</div>"
                    );
                },
                layout: 'vertical',
                align: "right",
                verticalAlign: "middle",
                itemMarginTop: 5,
                itemStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                itemHoverStyle: {
                    color: '#fff'
                },
            },
            title: {text: ''},
            colors: ['#0edae2', '#8c6af5', '#116bdc', '#de5e3c', '#f7e65f', '#87ea99'],
            plotOptions: {
                pie: {
                    innerSize: 60,
                    depth: 0,
                    dataLabels: {
                        useHTML: true,
                        enabled: false, //是否显示饼图的线形tip
                        distance: 5,
                        borderColor: '#007acc',
                        align: "center",
                        // verticalAlign: 'top',
                        position: "right",
                        color: "#ffffff",
                        style: {
                            textOutline: "none",
                            fontSize:12,
                        },
                    },
                    showInLegend: true,
                    // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                    enableMouseTracking: false
                },
            },
            credits: {
                enabled: false, // 禁用版权信息
            },
            series: [{
                type: 'pie',
                name: '告警概况',
                data: dataList
            }]
        });

    }
</script>
</body>
</html>