highcharts饼状图,echarts 3d饼图
这篇文章主要为大家详细介绍了某视频剪辑软件高图表实现三维(三维的缩写)饼图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件高图表实现三维(三维的缩写)饼图效果的具体代码，供大家参考，具体内容如下
这是最终效果
模板
大盒子
div class= com-container ref= container style= width:380 px；高度：300像素；
/div
div class=tulibox
div v-for=(item，index)in Pei data :key= index class= tuliboxitem
span class= name"{ item。name } }/span span class= value " { item。y } } %/span
/div
/div
/div
/模板
脚本
从"高图表"导入高图表
导出默认值{
道具：{},
data () {
返回{
peiData: [
{姓名： 输电，y: 28，h: 60 }，
{姓名： 变电，y: 20，h: 20 }，
{姓名： 配电，y: 10，h: 32 }，
{姓名： 新业务，y: 6，h: 45 }
]
}
},
已计算：{},
已更新(){},
已创建(){},
已安装(){
this.initChart()
常数那个=这个
窗户。onresize=function(){ that。初始化图表()}
},
方法：{
initChart () {
//修改三维(三维的缩写)饼图绘制过程
const each=HighCharts.each
const round=Math.round
const cos=Math.cos
const sin=Math.sin
const deg2rad=Math.deg2rad
高图表。wrap(高图表。系列类型。派。原型，“翻译”，功能(继续){
proceed.apply(this，[].slice.call(arguments，1))
//如果图表不是三维的，请不要这样做
如果(!this.chart.is3d()) {
返回
}
常量系列=这个
常数图表=系列.图表
常量选项=图表.选项
常数系列选项=系列.选项
常量深度=系列选项。深度 0
const options 3d=选项。图表。选项3d
const alpha=options3d.alpha
const beta=options3d.beta
var z=seriesOptions.stacking？(seriesOptions.stack 0) *深度：系列我*深度
z=深度/2
if (seriesOptions.grouping！==假){
z=0
}
每个（系列。数据，函数（点){
const shapeArgs=point.shapeArgs
可变角度
point.shapeType=arc3d
var ran=point.options.h
shapeArgs.z=z
shapeArgs.depth=深度* 0.75纳米
shapeArgs.alpha=alpha
shapeArgs.beta=beta
shapeArgs.center=series.center
shapeArgs.ran=ran
角度=(形状参数。结束形状参数。开始)/2
point.slicedTranslation={
平移x:圆形(cos(角度)*系列选项。切片偏移* cos(*度2弧度))，
平移y:圆形(正弦(角度)*系列选项。切片偏移* cos(* deg 2 rad))
}
})
});
（功能(H) {
包装(高图表SVGRenderer.prototype， arc3dPath ，函数（继续){
//运行原始处理方法
const ret=proceed.apply(this，[].slice.call(arguments，1))
ret.zTop=(ret.zOut 0.5)/100
返回浸水使柔软
})
}(高图表))
//生成不同高度的三维(三维的缩写)饼图
const highEcharts=this .$refs.container
HighCharts.chart(highEcharts，{
图表：{
类型："饼图",
动画：假的，
背景色： rgba(0，0，0，0)，
事件：{
负载：函数(){
const each=HighCharts.each
const points=this.series[0].点
每个（点，函数(p，i) {
p.graphic.attr({
translateY: -p.shapeArgs.ran
})
p.graphic.side1.attr({
translateY: -p.shapeArgs.ran
})
p.graphic.side2.attr({
translateY: -p.shapeArgs.ran
})
})
}
},
选项3d: {
启用：真，
阿尔法：65
}
},
标题：{
显示："假",
文本：空
},
副标题：{
文本：空
},
学分：{
启用：假
},
图例：{ //【图例】位置样式
背景色： rgba(0，0，0，0)，
影子：假的，
布局："垂直",
对齐：右,//水平方向位置
垂直对齐：顶部,//垂直方向位置
x: 0，//距离x轴的距离
y: 100，//距离Y轴的距离
标志添加：10,
symbol高度：14
项目样式：{
行高：“24px”，
fontSize: 16px ，
颜色： #fff
},
labelFormatter: function () {
/*
* 格式化函数可用的变量：这个，可以用console.log(this)来查看包含的详细信息
*这个代表当前数据列对象，所以默认的实现是返回这个名字
*/
返回this . name this . h“%”
}
},
绘图选项：{
馅饼：{
allowPointSelect: true，
光标："指针",
深度：35,
内部尺寸：180,
数据标签:{
启用：假
},
//显示图例
showInLegend: false
}
},
系列：[{
类型："饼图",
名称： 占比，
//h是高度y是占的圆环长度
颜色点：真的，
颜色：[
{ //注意！如果是柱状图请使用颜色，如果是面积图请使用填充颜色
线性梯度：{
x1: 0，
y1: 1，
x2: 1，
y2: 0
},
停靠点：[
[0， #19596d]，
[1， #2ea1b2]
]
}, { //注意！如果是柱状图请使用颜色，如果是面积图请使用填充颜色
线性梯度：{
x1: 0，
y1: 1，
x2: 1，
y2: 0
},
停靠点：[
[0， #ee7529]，
[1， #f5a86c]
]
}, { //注意！如果是柱状图请使用颜色，如果是面积图请使用填充颜色
线性梯度：{
x1: 0，
y1: 1，
x2: 1，
y2: 0
},
停靠点：[
[0， #f5c055]，
[1， #967b3d]
]
}, { //注意！如果是柱状图请使用颜色，如果是面积图请使用填充颜色
线性梯度：{
x1: 0，
y1: 1，
x2: 1，
y2: 0
},
停靠点：[
[0， #2d7bb5]，
[1， #1a5784]
]
}],
数据：this.peiData
}]
})
}
},
组件：{}
}
/脚本
样式范围语言=少。表示“同”容器{
宽度：380像素
高度：300像素
填充-右：20px
}。大盒子{
显示器：flex
背景图像：url(./img/迪左。png’)；
背景-重复：不重复；
背景-位置：25px 144px
padding-top:20px；
}。tulibox{
填充顶部：65像素。tuliboxitem{
位置：相对；
边距：10px 0；名称{
字体大小：18px
颜色：#费费
填充-右：20px
}。价值{
字体大小：22px
颜色：# 0cd 2 ea
}
}。tuliboxitem:before{
内容："";
位置：绝对；
宽度：16px
高度：16px
top:7px；
边界半径：50%;
左：-33px；
}。tuliboxitem:n-child(1):before {
背景色：# 600法郎
}。tuliboxitem:n-child(2):before {
背景色：# 209FED
}。tuliboxitem:n-child(3):before {
背景色：# 808EC7
}。tuliboxitem:n-child(4):before {
背景色：# EE6B26
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。