Vue+HighCharts画不同⾼度的3D饼环图
前⾔：由于公司可视化数字⼤屏项⽬需要⽤到了3D饼图和3D环图，所以在博客⾥记录⼀下！如果能帮到你，那么点个赞吧，哈哈哈。
话不多说，直接先上效果图：
3D饼图
3D环图
下⾯是步骤以及代码：
1.npm 安装 highcharts
npm install highcharts --save
2.在main.js中引⽤ highcharts, 注意：画3D图需要使⽤到 highcharts⾥⾯的 highcharts-3d
import Highcharts from'highcharts'
import Highcharts3d from'highcharts/highcharts-3d'
Highcharts3d(Highcharts)
3D饼图：
HTML:
<template>
<div class="absolute-left-right-top-bottom charts-main">
<div class="content">
<highcharts :options="chartOptions1"class="content-pic"></highcharts>
</div>
</div>
</template>
JS：
<script>
import{ Chart }from'highcharts-vue'
import Highcharts from'highcharts'
import Highcharts3d from'highcharts/highcharts-3d'
Highcharts3d(Highcharts)
export default{
name:'theHospitalStatistics',
components:{
'highcharts': Chart
},
data(){
return{
chartOptions1:{
credits:{
enabled:false
},
exporting:{ enabled:false},
chart:{
type:'pie',
plotBackgroundColor:null,
plotBorderWidth:null,
backgroundColor:null,
animation:false,
options3d:{
enabled:true,
// 延y轴向内的倾斜⾓度
alpha:75,
// 外旋转⾓度
beta:0
}
},
title:{
text:null
},
tooltip:{
// 数据提⽰框的背景颜⾊
backgroundColor:'rgba(50,71,179,0.4)',
// 边框颜⾊
// borderColor:'rgba(206,94,74,.9)',
style:{
fontSize:24,
color:'#16D8E9'
},
useHTML:true,// 是否使⽤HTML编辑提⽰信息
formatter:function(){
// console.log(this) // 控制台输出可以看到有很多属性
if(this.point.name ==='治愈'){
return'<span >'+this.series.name +'</span>'+'<br>'+'<span >'+this.point.name +' : '+'</span>'+'<span >'+ Highcharts.numberFormat(this.percentage, 2)+'%'+'</span>';
}else if(this.point.name ==='好转'){
return'<span >'+this.series.name +'</span>'+'<br>'+'<span >'+this.point.name +' : '+'</span>'+'<span >'+ Highcharts.numberFormat(this.percentage,
2)+'%'+'</span>';
}else if(this.point.name ==='死亡'){
return'<span >'+this.series.name +'</span>'+'<br>'+'<span >'+this.point.name +' : '+'</span>'+'<span >'+ Highcharts.numberFormat(this.percentage, 2)+'%'+'</span>';
}else if(this.point.name ==='其他'){
return'<span >'+this.series.name +'</span>'+'<br>'+'<span >'+this.point.name +' : '+'</span>'+'<span >'+ Highcharts.numberFormat(this.percentage, 2)+'%'+'</span>';
}
},
valueDecimals:2// 数据值保留⼩数位数
},
legend:{
itemStyle:{
fontSize :18,
color:'#00FCF9',
fontFamily:'MicrosoftYaHei',
fontWeight:400
}
},
plotOptions:{
pie:{
/
/ 每个扇块能否选中
allowPointSelect:false,
// ⿏标指针
cursor:'pointer',
// 饼图的厚度
depth:70,
// 空⼼
innerSize:'0%',
textShadow:false,
fontweight属性boldshadow:false,
// 提⽰信息
dataLabels:{
// 是否显⽰饼图的线形tip
enabled:true,
// 设置引导线的长度
distance:25,
style:{
color:'#E9F4FF',
fontSize:14,
fontWeight:'bold'
},
formatter:function(){// 设置字体与引导线和饼图颜⾊⼀致
if(this.point.name ==='治愈'){
return'<span >'+ Highcharts.numberFormat(this.percentage,2)+'%'+'</span>';
}else if(this.point.name ==='好转'){
return'<span >'+ Highcharts.numberFormat(this.percentage,2)+'%'+'</span>';
}else if(this.point.name ==='死亡'){
return'<span >'+ Highcharts.numberFormat(this.percentage,2)+'%'+'</span>';
}else if(this.point.name ==='其他'){
return'<span >'+ Highcharts.numberFormat(this.percentage,2)+'%'+'</span>';
}
}
}
}
},
// colors: ['#763FF7', '#e42af8', '#67cee8', '#4061f7'],
series:[{
type:'pie',
name:'挂号类别分布',
size:'65%',
startAngle:220,// 调整饼图的⾓度⽅向：顺时针
showInLegend:true,// 是否打开图例
colorByPoint:true,
data:[
{
name:'治愈',
y:56.21,
h:50,// ⾼度
sliced:false,// 是否突出
selected:false// 是否⼀直不透明
},
{
name:'好转',
y:38.96,
h:30,// ⾼度
sliced:false,// 是否突出
selected:false// 是否⼀直不透明
},
{
name:'其他',
y:4.83,
h:10,// ⾼度
sliced:false,// 是否突出
selected:false// 是否⼀直不透明
},
{
name:'死亡',
y:1.83,
h:10,// ⾼度
sliced:false,// 是否突出
selected:false// 是否⼀直不透明
}
]
}]
}
}
},
created(){
// 设置颜⾊渐变
this.setcolor();
// 设置饼图⾼度
this.setOptonHeight();
},
mounted(){
},
methods:{
setcolor(){
// 颜⾊的填充
let color1 =['#763FF7','#e42af8','#67cee8','#4061f7']// 16D8E9
let color2 =['#480ecd','#a834ea','#51b3ea','#3101c6']
function(color, index){
return{
radialGradient:{ cx:0.5, cy:0.3, r:0.7},
stops:[
[0, color1[index]],
[1, color2[index]]// darken
]
}
}
)
},
setOptonHeight(){
var each = Highcharts.each,
round = und,
cos = s,
cos = s,
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;
uping !==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.ran = ran;
angle =(d + 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))
}
}
}
</script>
3D环图
环图与饼图的代码区别只有⼀个 innerSize 空⼼率的设置，我这边设置的为 50%。
// 空⼼
innerSize: ‘50%’,
HTML：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论