vue HighCharts 饼图 3D效果

最新推荐文章于 2024-05-30 15:07:12 发布

聪聪ii

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量202

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_41672186/article/details/132918481

版权

下载依赖

 npm install  highcharts -S

main.js 引入依赖


import highcharts from "highcharts";
import highcharts3d from "highcharts/highcharts-3d";
highcharts3d(highcharts);

使用页面

 allData.questionsCount =[{
    
        name:'占比1',
        y：'50',
        rate：'50%',

    },
{
    
        name:'占比2',
        y：'50',
        rate：'50%',

    },
]

import HighCharts from "highcharts";

<template>
  <div id="pie1"></div>
</template>


   const init = () => {
            // 图表配置
            var options = {
                chart: {
                    type: "pie",
                    options3d: {
                        enabled: true,
                        alpha: 45,
                        beta: 0,
                    },
                    backgroundColor: "transparent",
                },
                title: {
                    style: {
                        color: "transparent",
                    },
                },
                credits: {
                    //关闭版权信息的标签
                    enabled: false,
                },
                tooltip: {
                    backgroundColor: "#F5F8FA",
                    borderColor: "transparent",
                    formatter: function () {
                        var s =
                            this.point.options.name +
                            ":" +
                            this.point.options.y;
                        return s;
                    },
                    animation: true, // 是否启用动画效果
                    style: {
                        // 文字内容相关样式\
                        fontSize: "14px",
                        fontFamily: "Alibaba PuHuiTi",
                        color: "#666666",
                    },
                },
                plotOptions: {
                    pie: {
                        size: "100%",
                        allowPointSelect: true,
                        cursor: "pointer",
                        depth: 50,
                        showInLegend: false,
                        dataLabels: {
                            enabled: true,
                            style: {
                                color: "rgba(93, 245, 255, 1)",
                                fontSize: "12px",
                                fontWeight: "500",
                            },
                        },
                    },
                },
                series: [
                    {
                        type: "pie",
                        name: "占比",
                        data: allData.questionsCount,
                        colors: ["#0ebd92", "#3f9f30", "#87aecb"],
                        center: ["50%", "30%"],
                    },
                ],
            };
            // 图表初始化函数
            allData.chart = HighCharts.chart("pie1", options);
            window.addEventListener("resize", resizeTheChart);
        };