一、highchart实现,有间隔3D环形图

二、使用步骤

1.代码实现

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="http://code.highcharts.com/highcharts.js"></script><script src="https://cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script>
</head>
<body><div id="myChart" style="height: 300px;"></div>
<script type="text/javascript">renderTo("myChart", [{name: '“0-50”',y: 628,sliced: true,  // 突出显示某个扇区，表示强调},{name: '“50-70”',y: 218,sliced: true,  // 突出显示某个扇区，表示强调},{name: '“70-90”',y: 138,sliced: true,  // 突出显示某个扇区，表示强调},{name: '“90以上”',y: 428,sliced: true,  // 突出显示某个扇区，表示强调},])
function  renderTo(name,data){var chart = new Highcharts.Chart({chart: {backgroundColor: '#02080E',renderTo: name,//页面id为myChart的容器type: 'pie',//图形类型：饼状图options3d: {//3D效果enabled: true,alpha: 55, // 内旋转角度 从前后看 我理解为以x轴为基准的旋转  beta: 0  // 外旋转角度 从左右看 我理解为以z轴为基准的旋转  不知道咋形容，用的时候可以都试试 我这样设置的话饼图是躺着的    },animation: false,},tooltip: {// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'},exporting: {enabled: false},//是否显示打印plotOptions: {pie: {innerSize: '50%',//设置环，内环占比depth:100,//显示3d效果allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,style:{textOutline:"none", // 解决文字重影问题},format: '<b style="font-size:1rem;color:#FFFFFF;">{point.name}区间</b> <br></br><b style="fontStyle:italic;color:#04FBFE;line-height: 3rem;"><b style="font-size:1.4rem;">{point.y}</b><b>个</b></b>',connectorColor: 'silver'}}},colors: ['rgba(235,97,97,0.8)','rgba(250,207,34,0.8)','rgba(65,221,235,0.8)' , 'rgba(109,105,250,0.8)'] ,//配置圈的颜色credits: {  enabled: false  //隐藏highCharts.com标识},  title:{text: ''//标题内容},series: [{//格式化的数据type: 'pie',name: '',data:data}]},);
}</script>
</body>
</html>

highchart实现,有间隔3D环形图相关推荐

highchart 3D 环形图基础设置
先使用npm安装:cnpm install highcharts --save 或者 npm install highcharts --save main.js 引用 import Highchart ...
vue中使用echarts-gl（3d环形图）
以这个为例子:https://www.makeapie.com/editor.html?c=x1-kIyaV6u 记得要先下载echarts 和echarts-gl npm install echar ...
【ECharts】环形图、饼状图
目录 color设置的颜色环形渐变色圆环中间显示文字悬浮显示中间文字悬浮显示中间文字,默认显示第一个循环高亮饼图块 label文字过长重叠 label和饼图一致 label展示位置内容为0 ...
Highcharts3D环形图
***Highcharts3D环形图***小知识: //渐变Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions( ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...
echarts实现3d环形饼状图
首先确保在项目中引入了echarts和echarts-gl "echarts": "^4.9.0", "echarts-gl": " ...
jfreechart折线图+柱状图、柱状图(堆叠)+折线图、饼状图、环形图
记录jfreechart生成图片测试程,主要是为自己研究过之后的记录:) 折线图+柱状图柱状图(堆叠)+折线图获取饼状图获取环形图 jar包下载地址:https://download.csdn. ...
html 环形图圆角,canvas绘制圆角环形图
前言之前一篇文章,写过关于canvas绘制百分比的环形图,以及进度条模糊的解决方案,今天项目中用到了圆角环形图,查了一下百度echart,发现并没有圆角环形图,highchart的圆角环形图和项目中 ...
JS，统计图表大全－－三、饼形图（饼图及环形图）
三.饼形图(饼图及环形图) HTML参考 <!DOCTYPE HTML> <html><head><meta charset="utf-8" ...

highchart实现,有间隔3D环形图

文章目录

一、highchart实现,有间隔3D环形图

二、使用步骤

1.代码实现

highchart实现,有间隔3D环形图相关推荐

最新文章

热门文章