highcharts3D饼图

您所在的位置：网站首页 › 如何改变饼状图的颜色和大小 › highcharts3D饼图

highcharts3D饼图

2023-11-24 04:57| 来源: 网络整理| 查看: 265

先使用npm安装：

npm install highcharts --save

引入方式：

import HighCharts from 'highcharts' import Highcharts3D from 'highcharts/highcharts-3d';

或者：

const highcharts= require('highcharts') const Highcharts3D = require('highcharts/highcharts-3d')

然后初始化：

Highcharts3D(HighCharts);

接下来是配置：

官网地址：3D 环形图 | JShare

菜鸟教程：Highcharts 3D饼图 | 菜鸟教程

let options = { chart: { type: 'pie', backgroundColor: 'rgba(255, 255, 255, 0)', // 设置背景颜色透明默认是白色 options3d: { enabled: true, //显示图表是否设置为3D alpha: 55, // 内旋转角度从前后看我理解为以x轴为基准的旋转 beta: 0 // 外旋转角度从左右看我理解为以z轴为基准的旋转不知道咋形容，用的时候可以都试试我这样设置的话饼图是躺着的 }, animation: false, }, title: { text: '' // 饼图的标题 }, subtitle: { text: '',// 饼图的副标题 style: { // 标题样式设置 color: '#FFFFFF', //字体颜色 fontSize: "20px", //字体大小 fontWeight: 'bold', // 字体粗细 } }, plotOptions: { pie: { allowPointSelect: true, innerSize: '50%', size: 200, // 设置饼图大小 depth: 45, dataLabels: { enabled: true, // 显示连线 distance: '10%', //连线长度 formatter: function () { //this 为当前的点（扇区）对象，可以通过 console.log(this) 来查看详细信息 return '

【本文地址】

highcharts3D饼图

highcharts3D饼图

今日新闻

推荐新闻