记录使用Echarts 实现3D饼状图的过程。
效果图：
1.首先安装echarts 3d插件
"echarts": "^4.7.0",
"echarts-gl": "^1.1.2",
npm install echarts --save
npm install echarts-gl
2.封装组件
<template>
<div
ref="chartPanel"
:style="{width: '950PX', height: height}"
></div>
</template>
<script>
import {getPie3D} from '@/utils/largeScreen/sector'
import 'echarts-gl'
import {colorMixin} from '@/store/mixins/color'
const colors = ['#13c5a1', '#3de9d4', '#1256dd', '#39a0fe', '#fff942', '#126109', '#9ce3cc', '#a5c9ef', '#cbe5de', '#bfb6db']
export default {
name: 'PieChartSolid',
mixins: [colorMixin],
props: {
// options: {
// type: Object,
// default: () => null
// },
height: {
type: String,
default: '388PX'
}
},
data() {
return {
backgroundDots: {
'材料成本': '#13c5a1',
'劳务分包成本': '#3de9d4',
'人工成本': '#1256dd',
'设备成本': '#39a0fe',
'其他费用成本': '#fff942'
},
notUseColors: [],
optionData: [
{
name: '材料成本',
value: 0,
itemStyle: {
opacity: 0.7,
color: '#D6476C'
}
},
{
name: '劳务分包成本',
value: 0,
itemStyle: {
opacity: 0.7,
color: '#c79caa'
}
},
{
name: '人工成本',
value: 0,
itemStyle: {
opacity: 0.7,
color: '#804BC6'
}
},
{
name: '设备成本',
value: 1,
itemStyle: {
opacity: 0.7,
color: '#cbe5de'
}
},
{
name: '其他成本',
value: 2,
itemStyle: {
opacity: 0.7,
color: '#bfb6db'
}
}
]
}
},
mounted() {
this.draw3d()
},
watch: {},
methods: {
draw3d(options) {
= (options)
(, '初始化')
if (!) {
return
}
const echarts = this.$echarts
// 基于准备好的dom，初始化echarts实例
let chartPanel = (('chart-panel'))
// 传入数据生成 option
let series = getPie3D(, 1.35)
let option = {
tooltip: {
formatter: (params) => {
// (params)
if (
!== 'mouseoutSeries' &&
!== 'pie2d'
) {
return `<div style="padding:0 10px;">${}：${(
[]. * 100
).toFixed(2)}%</div>`
}
}
},
// left: 100,
legend: {
// data: legendData,
// width: '90%',
itemGap: 25,
// bottom: 'bottom',
icon: 'circle',
top: 'center',
right: 'right',
textStyle: {
color: ,
fontSize: 14
}
},
xAxis3D: {
min: -1,
max: 1
},
yAxis3D: {
min: -1,
max: 1
},
zAxis3D: {
min: -1,
max: 1
},
grid3D: {
show: false, // 是否显示三维笛卡尔坐标系。
boxHeight: 10, // 三维笛卡尔坐标系在三维场景中的高度
boxDepth: 100,
top: '-8.5%',
left: 0,
// bottom: '80%',
// environment: "#021041", //背景
viewControl: {
// 用于鼠标的旋转，缩放等视角控制
alpha: 50, // 角度
distance: 200, // 调整视角到主体的距离，类似调整zoom 重要
rotateSensitivity: 0, // 设置为0无法旋转
zoomSensitivity: 0, // 设置为0无法缩放
panSensitivity: 0, // 设置为0无法平移
autoRotate: false // 自动旋转
}
},
series: series
}
(option)
for (let i = 0; i < ; i++) {
([i]., '[i].')
delete [i].
}
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
({
name: 'pie2d',
type: 'pie',
label: {
// color: '#333333',
fontSize: 12,
// position: 'inner',
// formatter: "{b}\n\n",
// padding: [0, -40],
formatter: (item) => {
// (item)
return + '\n\n' + + '%'
}
},
labelLine: {
length: 20,
length2: 20,
lineStyle: {
// color: '#6ddb61',
// width: 1.5
// top: '0PX',
// left: '50PX'
}
},
startAngle: 330, // 起始角度，支持范围[0, 360]。 //重要
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['40%', '65%'],
center: ['50%', '50%'],
data: ,
itemStyle: {
opacity: 0
},
left: '0%',
top: '0%',
avoidLabelOverlap: true // 防止标签重叠
})
(option)
()
},
getOptionData(options) {
const optionData = []
= []
(options, 'dd')
for (const key in options) {
let color = [key]
if (!color) {
color = (s => !(s))
}
if (color) {
(color)
}
const data = {
name: key,
value: options[key],
itemStyle: {
opacity: 0.8,
color: color
}
}
(data)
}
return optionData
},
initEchart() {
this.$nextTick(() => {
let parent = ('chart-panel') // 获取父元素
let canvas = ('canvas') // 获取父元素下面的所有canvas元素
canvas[1]. = 'rotateX(20deg)'
// canvas[1]. = 'rotateY(-20deg)'
/* 为了对齐线 */
canvas[1]. = '-15PX'
canvas[1]. = '-10PX'
})
}
}
}
</script>
<style scoped>
</style>
封装方法
// 生成模拟 3D 饼图的配置项
// pieData（object）：饼图数据
// internalDiameterRatio（0~1之间的浮点数）：内径/外径的值（默认值 1/2），当该值等于 0 时，
// heigth配置每个数据生成的高度
export function getPie3D(pieData, internalDiameterRatio, height) {
let series = []
let sumValue = 0
let startValue = 0
let endValue = 0
let legendData = []
let k =
typeof internalDiameterRatio !== 'undefined'
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
: 1 / 3
// 计算比例
let total = 0
for (let i = 0; i < ; i++) {
pieData[i].value = Number(pieData[i].value)
// (Number(pieData[i].value))
total += Number(pieData[i].value)
}
// (total)
for (let i = 0; i < ; i++) {
pieData[i].proportion = parseFloat(pieData[i].value / total).toFixed(4)
// (pieData[i].proportion)
}
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < ; i++) {
sumValue += pieData[i].value
let seriesItem = {
name:
typeof pieData[i].name === 'undefined'
? `series${i}`
: pieData[i].name,
type: 'surface',
parametric: true,
wireframe: {
show: false
},
pieData: pieData[i],
pieStatus: {
selected: pieData[i].selected ? pieData[i].selected : false,
hovered: pieData[i].hovered ? pieData[i].hovered : false,
k: k
}
}
if (typeof pieData[i].itemStyle != 'undefined') {
let itemStyle = {}
typeof pieData[i]. != 'undefined'
? ( = pieData[i].)
: null
typeof pieData[i]. != 'undefined'
? ( = pieData[i].)
: null
= itemStyle
}
(seriesItem)
}
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
// 向每个 series-surface 传入不同的参数方程 ，也就是实现每一个扇形。
for (let i = 0; i < ; i++) {
endValue = startValue + series[i].
// (series[i]);
series[i]. = startValue / sumValue
series[i]. = endValue / sumValue
series[i].parametricEquation = getParametricEquation(
series[i].,
series[i].,
series[i].,
series[i].,
k,
height ? series[i]. * height : 1 //自己自定义传入高度，每个类型按比例生成高度
// series[i]. ==>这个是饼图默认自己生成高度
// 1 设置为1所有的扇形高度都一样高
)
startValue = endValue
(series[i].name)
}
// (series);
return series
}
// startRatio（浮点数）: 当前扇形起始比例，取值区间[0, endRatio)
// endRatio（浮点数）: 当前扇形结束比例，取值区间(startRatio, 1]
// isSelected（布尔值）: 是否选中，效果参照二维饼图选中效果（单选）
// isHovered（布尔值）: 是否放大，效果接近二维饼图高亮（放大）效果（未能实现阴影）
// k（0~1之间的浮点数）：用于参数方程的一个参数，取值 0~1 之间，通过「内径 / 外径」的值换算而来。
//height配置3d扇形高度
export function getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
height
) {
// 计算
let midRatio = (startRatio + endRatio) / 2
let startRadian = startRatio * * 2
let endRadian = endRatio * * 2
let midRadian = midRatio * * 2
// 如果只有一个扇形，则不实现选中效果。
if (startRatio === 0 && endRatio === 1) {
isSelected = false
}
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
k = typeof k !== 'undefined' ? k : 1 / 3
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
let offsetX = isSelected ? (midRadian) * 0.2 : 0
let offsetY = isSelected ? (midRadian) * 0.2 : 0
// 计算高亮效果的放大比例（未高亮，则比例为 1）
let hoverRate = isHovered ? 1.05 : 1
// 返回曲面参数方程
return {
u: {
min: -,
max: * 3,
step: / 32
},
v: {
min: 0,
max: * 2,
step: / 20
},
x: function (u, v) {
if (u < startRadian) {
return (
offsetX +
(startRadian) * (1 + (v) * k) * hoverRate
)
}
if (u > endRadian) {
return (
offsetX +
(endRadian) * (1 + (v) * k) * hoverRate
)
}
return offsetX + (u) * (1 + (v) * k) * hoverRate
},
y: function (u, v) {
if (u < startRadian) {
return (
offsetY +
(startRadian) * (1 + (v) * k) * hoverRate
)
}
if (u > endRadian) {
return (
offsetY +
(endRadian) * (1 + (v) * k) * hoverRate
)
}
return offsetY + (u) * (1 + (v) * k) * hoverRate
},
z: function (u, v) {
if (u < - * 0.5) {
return (u)
}
if (u > * 2.5) {
return (u)
}
return (v) > 0 ? 1 * height : -1
}
}
}