jiangyy
3 years ago
6 changed files with 931 additions and 26 deletions
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,275 @@ |
|||
/** |
|||
* 绘制3d图 |
|||
* @param pieData 总数据 |
|||
* @param internalDiameterRatio:透明的空心占比 |
|||
* @param distance 视角到主体的距离 |
|||
* @param alpha 旋转角度 |
|||
* @param pieHeight 立体的高度 |
|||
* @param opacity 饼或者环的透明度 |
|||
*/ |
|||
const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) => { |
|||
const series = [] |
|||
let sumValue = 0 |
|||
let startValue = 0 |
|||
let endValue = 0 |
|||
let legendData = [] |
|||
let legendBfb = [] |
|||
const k = 1 - internalDiameterRatio |
|||
pieData.sort((a, b) => { |
|||
return b.value - a.value |
|||
}) |
|||
// 为每一个饼图数据，生成一个 series-surface 配置
|
|||
for (let i = 0; i < pieData.length; i++) { |
|||
sumValue += pieData[i].value |
|||
const seriesItem = { |
|||
name: |
|||
typeof pieData[i].name === 'undefined' |
|||
? `series${i}` |
|||
: pieData[i].name, |
|||
type: 'surface', |
|||
parametric: true, |
|||
wireframe: { |
|||
show: false |
|||
}, |
|||
pieData: pieData[i], |
|||
pieStatus: { |
|||
selected: false, |
|||
hovered: false, |
|||
k: k |
|||
}, |
|||
center: ['10%', '50%'] |
|||
} |
|||
if (typeof pieData[i].itemStyle !== 'undefined') { |
|||
const itemStyle = {} |
|||
itemStyle.color = |
|||
typeof pieData[i].itemStyle.color !== 'undefined' |
|||
? pieData[i].itemStyle.color |
|||
: opacity |
|||
itemStyle.opacity = |
|||
typeof pieData[i].itemStyle.opacity !== 'undefined' |
|||
? pieData[i].itemStyle.opacity |
|||
: opacity |
|||
seriesItem.itemStyle = itemStyle |
|||
} |
|||
series.push(seriesItem) |
|||
} |
|||
|
|||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|||
legendData = [] |
|||
legendBfb = [] |
|||
for (let i = 0; i < series.length; i++) { |
|||
endValue = startValue + series[i].pieData.value |
|||
series[i].pieData.startRatio = startValue / sumValue |
|||
series[i].pieData.endRatio = endValue / sumValue |
|||
series[i].parametricEquation = getParametricEquation( |
|||
series[i].pieData.startRatio, |
|||
series[i].pieData.endRatio, |
|||
false, |
|||
false, |
|||
k, |
|||
series[i].pieData.value |
|||
) |
|||
startValue = endValue |
|||
const bfb = fomatFloat(series[i].pieData.value / sumValue, 4) |
|||
legendData.push({ |
|||
name: series[i].name, |
|||
value: bfb |
|||
}) |
|||
legendBfb.push({ |
|||
name: series[i].name, |
|||
value: bfb |
|||
}) |
|||
} |
|||
const boxHeight = getHeight3D(series, pieHeight) // 通过pieHeight设定3d饼/环的高度，单位是px
|
|||
// 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|||
const option = { |
|||
legend: { |
|||
show: false, |
|||
data: legendData, |
|||
orient: 'vertical', |
|||
left: 10, |
|||
top: 10, |
|||
itemGap: 10, |
|||
textStyle: { |
|||
color: '#A1E2FF' |
|||
}, |
|||
icon: 'circle', |
|||
formatter: function (param) { |
|||
const item = legendBfb.filter(item => item.name === param)[0] |
|||
const bfs = fomatFloat(item.value * 100, 2) + '%' |
|||
return `${item.name} ${bfs}` |
|||
} |
|||
}, |
|||
labelLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: '#fff' |
|||
} |
|||
}, |
|||
label: { |
|||
show: true, |
|||
position: 'outside', |
|||
formatter: '{b} \n{c} {d}%' |
|||
}, |
|||
tooltip: { |
|||
backgroundColor: '#033b77', |
|||
borderColor: '#21f2c4', |
|||
textStyle: { |
|||
color: '#fff', |
|||
fontSize: 13 |
|||
}, |
|||
formatter: params => { |
|||
if ( |
|||
params.seriesName !== 'mouseoutSeries' && |
|||
params.seriesName !== 'pie2d' |
|||
) { |
|||
const bfb = ( |
|||
(option.series[params.seriesIndex].pieData.endRatio - |
|||
option.series[params.seriesIndex].pieData.startRatio) * |
|||
100 |
|||
).toFixed(2) |
|||
return ( |
|||
`${params.seriesName}<br/>` + |
|||
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + |
|||
`${bfb}%` |
|||
) |
|||
} |
|||
} |
|||
}, |
|||
xAxis3D: { |
|||
min: -1, |
|||
max: 1 |
|||
}, |
|||
yAxis3D: { |
|||
min: -1, |
|||
max: 1 |
|||
}, |
|||
zAxis3D: { |
|||
min: -1, |
|||
max: 1 |
|||
}, |
|||
grid3D: { |
|||
show: false, |
|||
boxHeight: boxHeight, // 圆环的高度
|
|||
viewControl: { |
|||
// 3d效果可以放大、旋转等，请自己去查看官方配置
|
|||
alpha, // 角度
|
|||
beta: -40, |
|||
distance, // 调整视角到主体的距离，类似调整zoom
|
|||
rotateSensitivity: 0, // 设置为0无法旋转
|
|||
zoomSensitivity: 0, // 设置为0无法缩放
|
|||
panSensitivity: 0, // 设置为0无法平移
|
|||
autoRotate: false // 自动旋转
|
|||
} |
|||
}, |
|||
series: series |
|||
} |
|||
return option |
|||
} |
|||
|
|||
/** |
|||
* 生成扇形的曲面参数方程，用于 series-surface.parametricEquation |
|||
*/ |
|||
const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => { |
|||
// 计算
|
|||
const midRatio = (startRatio + endRatio) / 2 |
|||
const startRadian = startRatio * Math.PI * 2 |
|||
const endRadian = endRatio * Math.PI * 2 |
|||
const midRadian = midRatio * Math.PI * 2 |
|||
// 如果只有一个扇形，则不实现选中效果。
|
|||
if (startRatio === 0 && endRatio === 1) { |
|||
isSelected = false |
|||
} |
|||
// 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|||
k = typeof k !== 'undefined' ? k : 1 / 3 |
|||
// 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|||
const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0 |
|||
const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0 |
|||
// 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|||
const hoverRate = isHovered ? 1.05 : 1 |
|||
// 返回曲面参数方程
|
|||
return { |
|||
u: { |
|||
min: -Math.PI, |
|||
max: Math.PI * 3, |
|||
step: Math.PI / 32 |
|||
}, |
|||
v: { |
|||
min: 0, |
|||
max: Math.PI * 2, |
|||
step: Math.PI / 20 |
|||
}, |
|||
x: function (u, v) { |
|||
if (u < startRadian) { |
|||
return ( |
|||
offsetX + |
|||
Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate |
|||
) |
|||
} |
|||
if (u > endRadian) { |
|||
return ( |
|||
offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate |
|||
) |
|||
} |
|||
return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate |
|||
}, |
|||
y: function (u, v) { |
|||
if (u < startRadian) { |
|||
return ( |
|||
offsetY + |
|||
Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate |
|||
) |
|||
} |
|||
if (u > endRadian) { |
|||
return ( |
|||
offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate |
|||
) |
|||
} |
|||
return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate |
|||
}, |
|||
z: function (u, v) { |
|||
if (u < -Math.PI * 0.5) { |
|||
return Math.sin(u) |
|||
} |
|||
if (u > Math.PI * 2.5) { |
|||
return Math.sin(u) * h * 0.1 |
|||
} |
|||
return Math.sin(v) > 0 ? 1 * h * 0.1 : -1 |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* 获取3d丙图的最高扇区的高度 |
|||
*/ |
|||
const getHeight3D = (series, height) => { |
|||
series.sort((a, b) => { |
|||
return b.pieData.value - a.pieData.value |
|||
}) |
|||
return (height * 25) / series[0].pieData.value |
|||
} |
|||
|
|||
/** |
|||
* 格式化浮点数 |
|||
*/ |
|||
const fomatFloat = (num, n) => { |
|||
let f = parseFloat(num) |
|||
if (isNaN(f)) { |
|||
return false |
|||
} |
|||
f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂
|
|||
let s = f.toString() |
|||
let rs = s.indexOf('.') |
|||
// 判定如果是整数，增加小数点再补0
|
|||
if (rs < 0) { |
|||
rs = s.length |
|||
s += '.' |
|||
} |
|||
while (s.length <= rs + n) { |
|||
s += '0' |
|||
} |
|||
return s |
|||
} |
|||
|
|||
export { getPie3D, getParametricEquation } |
|||
@ -0,0 +1,328 @@ |
|||
<template> |
|||
<div class="chart-container"> |
|||
<div class="chart" |
|||
id="cityGreenLand" |
|||
ref="chart"></div> |
|||
<!-- 底座背景 --> |
|||
<div class="bg"></div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import * as echarts from 'echarts'; |
|||
// import echarts from 'echarts' |
|||
import 'echarts-gl'; |
|||
import { getPie3D, getParametricEquation } from './chart.js' //工具类js，页面路径自己修改 |
|||
|
|||
const color = ['#005aff', '#f8b551'] |
|||
|
|||
export default { |
|||
name: 'chart', |
|||
data () { |
|||
return { |
|||
optionData: [ |
|||
{ |
|||
name: '处理中', |
|||
value: 28 |
|||
}, |
|||
{ |
|||
name: '已完成', |
|||
value: 72 |
|||
} |
|||
], |
|||
statusChart: null, |
|||
option: {} |
|||
} |
|||
}, |
|||
created () { |
|||
this.setLabel() |
|||
}, |
|||
mounted () { |
|||
this.initChart() |
|||
|
|||
//根据窗口变化自动调节图表大小 |
|||
const that = this |
|||
window.onresize = function () { |
|||
that.changeSize() |
|||
} |
|||
}, |
|||
methods: { |
|||
// 初始化label样式 |
|||
setLabel () { |
|||
this.optionData.forEach((item, index) => { |
|||
item.itemStyle = { |
|||
color: color[index] |
|||
} |
|||
item.label = { |
|||
normal: { |
|||
show: true, |
|||
color: color[index], |
|||
formatter: [ |
|||
'{d|{d}%}', |
|||
'{b|{b}}' |
|||
|
|||
|
|||
].join('\n'), // 用\n来换行 |
|||
rich: { |
|||
b: { |
|||
color: '#fff', |
|||
lineHeight: 25, |
|||
align: 'left', |
|||
fontSize: 16, |
|||
marginTop: 20 |
|||
}, |
|||
c: { |
|||
fontSize: 22, |
|||
color: '#fff', |
|||
textShadowColor: '#1c90a6', |
|||
textShadowOffsetX: 0, |
|||
textShadowOffsetY: 2, |
|||
textShadowBlur: 5 |
|||
}, |
|||
d: { |
|||
color: color[index], |
|||
fontSize: 25, |
|||
align: 'left' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
item.labelLine = { |
|||
normal: { |
|||
length: 30, |
|||
length2: 80, |
|||
lineStyle: { |
|||
width: 1, |
|||
color: 'rgba(255,255,255,0.7)' |
|||
} |
|||
} |
|||
} |
|||
item.labelLayout = function (params) { |
|||
const isLeft = params.labelRect.x < myChart.getWidth() / 2; |
|||
const points = params.labelLinePoints; |
|||
// Update the end point. |
|||
points[2][0] = isLeft |
|||
? params.labelRect.x |
|||
: params.labelRect.x + params.labelRect.width; |
|||
return { |
|||
labelLinePoints: points |
|||
}; |
|||
} |
|||
}) |
|||
}, |
|||
// 图表初始化 |
|||
initChart () { |
|||
// let statusChart = echarts.init(document.getElementById('cityGreenLand-charts')); |
|||
this.statusChart = echarts.init(document.getElementById('cityGreenLand')); |
|||
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 |
|||
this.option = getPie3D(this.optionData, 0.8, 220, 28, 22, 0.4) |
|||
this.statusChart.setOption(this.option) |
|||
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption |
|||
this.option.series.push({ |
|||
name: '电梯状态', //自己根据场景修改 |
|||
backgroundColor: 'transparent', |
|||
type: 'pie', |
|||
label: { |
|||
opacity: 1, |
|||
fontSize: 13, |
|||
lineHeight: 20 |
|||
}, |
|||
startAngle: 40, // 起始角度，支持范围[0, 360]。 |
|||
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 |
|||
radius: ['40%', '50%'], |
|||
center: ['50%', '50%'], |
|||
data: this.optionData, |
|||
itemStyle: { |
|||
opacity: 0 //这里必须是0，不然2d的图会覆盖在表面 |
|||
} |
|||
}) |
|||
this.statusChart.setOption(this.option) |
|||
this.bindListen(this.statusChart) |
|||
}, |
|||
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。 |
|||
// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton |
|||
bindListen (myChart, optionName = 'option') { |
|||
let selectedIndex = '' |
|||
let hoveredIndex = '' |
|||
// 监听点击事件，实现选中效果（单选） |
|||
myChart.on('click', (params) => { |
|||
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。 |
|||
const isSelected = !this[optionName].series[params.seriesIndex].pieStatus |
|||
.selected |
|||
const isHovered = |
|||
this[optionName].series[params.seriesIndex].pieStatus.hovered |
|||
const k = this[optionName].series[params.seriesIndex].pieStatus.k |
|||
const startRatio = |
|||
this[optionName].series[params.seriesIndex].pieData.startRatio |
|||
const endRatio = |
|||
this[optionName].series[params.seriesIndex].pieData.endRatio |
|||
// 如果之前选中过其他扇形，将其取消选中（对 option 更新） |
|||
if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) { |
|||
this[optionName].series[ |
|||
selectedIndex |
|||
].parametricEquation = getParametricEquation( |
|||
this[optionName].series[selectedIndex].pieData.startRatio, |
|||
this[optionName].series[selectedIndex].pieData.endRatio, |
|||
false, |
|||
false, |
|||
k, |
|||
this[optionName].series[selectedIndex].pieData.value |
|||
) |
|||
this[optionName].series[selectedIndex].pieStatus.selected = false |
|||
} |
|||
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新） |
|||
this[optionName].series[ |
|||
params.seriesIndex |
|||
].parametricEquation = getParametricEquation( |
|||
startRatio, |
|||
endRatio, |
|||
isSelected, |
|||
isHovered, |
|||
k, |
|||
this[optionName].series[params.seriesIndex].pieData.value |
|||
) |
|||
this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected |
|||
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex |
|||
selectedIndex = isSelected ? params.seriesIndex : null |
|||
// 使用更新后的 option，渲染图表 |
|||
myChart.setOption(this[optionName]) |
|||
}) |
|||
// 监听 mouseover，近似实现高亮（放大）效果 |
|||
// myChart.on('mouseover', (params) => { |
|||
// // 准备重新渲染扇形所需的参数 |
|||
// let isSelected |
|||
// let isHovered |
|||
// let startRatio |
|||
// let endRatio |
|||
// let k |
|||
// // 如果触发 mouseover 的扇形当前已高亮，则不做操作 |
|||
// if (hoveredIndex === params.seriesIndex) { |
|||
// // 否则进行高亮及必要的取消高亮操作 |
|||
// } else { |
|||
// // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新） |
|||
// if (hoveredIndex !== '') { |
|||
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。 |
|||
// isSelected = this[optionName].series[hoveredIndex].pieStatus.selected |
|||
// isHovered = false |
|||
// startRatio = this[optionName].series[hoveredIndex].pieData.startRatio |
|||
// endRatio = this[optionName].series[hoveredIndex].pieData.endRatio |
|||
// k = this[optionName].series[hoveredIndex].pieStatus.k |
|||
// // 对当前点击的扇形，执行取消高亮操作（对 option 更新） |
|||
// this[optionName].series[ |
|||
// hoveredIndex |
|||
// ].parametricEquation = getParametricEquation( |
|||
// startRatio, |
|||
// endRatio, |
|||
// isSelected, |
|||
// isHovered, |
|||
// k, |
|||
// this[optionName].series[hoveredIndex].pieData.value |
|||
// ) |
|||
// this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered |
|||
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 |
|||
// hoveredIndex = '' |
|||
// } |
|||
// // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新） |
|||
// if ( |
|||
// params.seriesName !== 'mouseoutSeries' && |
|||
// params.seriesName !== 'pie2d' |
|||
// ) { |
|||
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 |
|||
// isSelected = |
|||
// this[optionName].series[params.seriesIndex].pieStatus.selected |
|||
// isHovered = true |
|||
// startRatio = |
|||
// this[optionName].series[params.seriesIndex].pieData.startRatio |
|||
// endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio |
|||
// k = this[optionName].series[params.seriesIndex].pieStatus.k |
|||
// // 对当前点击的扇形，执行高亮操作（对 option 更新） |
|||
// this[optionName].series[ |
|||
// params.seriesIndex |
|||
// ].parametricEquation = getParametricEquation( |
|||
// startRatio, |
|||
// endRatio, |
|||
// isSelected, |
|||
// isHovered, |
|||
// k, |
|||
// this[optionName].series[params.seriesIndex].pieData.value + 60 |
|||
// ) |
|||
// this[optionName].series[ |
|||
// params.seriesIndex |
|||
// ].pieStatus.hovered = isHovered |
|||
// // 记录上次高亮的扇形对应的系列号 seriesIndex |
|||
// hoveredIndex = params.seriesIndex |
|||
// } |
|||
// // 使用更新后的 option，渲染图表 |
|||
// myChart.setOption(this[optionName]) |
|||
// } |
|||
// }) |
|||
// // 修正取消高亮失败的 bug |
|||
// myChart.on('globalout', () => { |
|||
// // 准备重新渲染扇形所需的参数 |
|||
// let isSelected |
|||
// let isHovered |
|||
// let startRatio |
|||
// let endRatio |
|||
// let k |
|||
// if (hoveredIndex !== '') { |
|||
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 |
|||
// isSelected = this[optionName].series[hoveredIndex].pieStatus.selected |
|||
// isHovered = false |
|||
// k = this[optionName].series[hoveredIndex].pieStatus.k |
|||
// startRatio = this[optionName].series[hoveredIndex].pieData.startRatio |
|||
// endRatio = this[optionName].series[hoveredIndex].pieData.endRatio |
|||
// // 对当前点击的扇形，执行取消高亮操作（对 option 更新） |
|||
// this[optionName].series[ |
|||
// hoveredIndex |
|||
// ].parametricEquation = getParametricEquation( |
|||
// startRatio, |
|||
// endRatio, |
|||
// isSelected, |
|||
// isHovered, |
|||
// k, |
|||
// this[optionName].series[hoveredIndex].pieData.value |
|||
// ) |
|||
// this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered |
|||
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 |
|||
// hoveredIndex = '' |
|||
// } |
|||
// // 使用更新后的 option，渲染图表 |
|||
// myChart.setOption(this[optionName]) |
|||
// }) |
|||
|
|||
}, |
|||
// 自适应宽高 |
|||
changeSize () { |
|||
this.statusChart.resize() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang='scss' scoped> |
|||
.chart-container { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 800px; |
|||
|
|||
.chart, |
|||
.bg { |
|||
width: 100%; |
|||
height: 800px; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.bg { |
|||
position: absolute; |
|||
bottom: 180px; |
|||
left: 50%; |
|||
z-index: 1; |
|||
width: 570px; |
|||
height: 340px; |
|||
background: no-repeat center; |
|||
background-image: url("../../../../../assets/img/shuju/3d-pid-bg.png"); |
|||
background-size: 100% 100%; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue