highcharts 3D饼状图

最新推荐文章于 2024-08-17 06:03:59 发布

猫七姑娘~~

最新推荐文章于 2024-08-17 06:03:59 发布

阅读量464

点赞数

文章标签： javascript 前端 react npm

本文链接：https://blog.csdn.net/m0_61043829/article/details/132087923

版权

效果图如下：

步骤1：安装 highcharts （命令：npm install highcharts --save）

步骤2：全局引入或者局部引用我这里只有一个页面应用所以采用的是局部引用（！注意路径）

代码：

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)

步骤3：写一个div 并且设置宽高切记不要忘记设置宽高

代码：

html： <div class='devChart' id='pie'></div>

css:         .devChart{
                        width: 100%;
                        height: 77%;
                    }

步骤4：

代码：

调用该代码----------

equonlineChart() {
       var chart = highcharts.chart("pie", {
       chart: {
       type: "pie",
       backgroundColor: "rgba(0,0,0,0)",//背景色
                   options3d: {
                       enabled: true,
                       alpha: 60,
                       beta: 0
                   },
                   animation: false,
       },
       colors: [
       //扇形颜色
       "#00A8FF",
       "#00D7E9",
       "#5f75e5",
       "#67acfe",
       "#5f75e5",
       "#7ca2ff",
       "#4bcdec",
       "#6648ff",
       "#5f75e5",
       "#5a9be7",
       ],
       title: {
       text: "",
       },
       credits: {
       enabled: false,
       },
       tooltip: {
       pointFormat: "<b>{point.options.y:.0f}个</b>",//扇形图内部文字
       },
       plotOptions: {
       pie: {
       allowPointSelect: true,
       cursor: "pointer",
       depth: 20, //饼高度
       dataLabels: {// label属性
       enabled: true,
       formatter: function () {//label 显示的文字
       return `${this.point.options.name}：${this.point.options.y}个`;
       },
       },
       },
       },
       series: [
       {
       type: "pie",
                     data: [
                   { name: '在线', selected: true, y:33, color: 'rgba(106, 230, 170,0.8)', },
                   { name: '离线', selected: true, y: 1, color: 'rgb(190, 70, 185)', },

                   ]
       },
       ],
       });

       },