Merge branch 'master' of http://git.umayle.com:2023/zhouyonghang/zhuzhansheji
This commit is contained in:
lll
commit
dcd7e5f8ba
|
|
@ -0,0 +1,34 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import("../views/KHC.vue"),
|
||||
},
|
||||
{
|
||||
path: "/tan",
|
||||
name: "tan",
|
||||
component: () => import("../views/TAN.vue"),
|
||||
},
|
||||
{
|
||||
path: "/zhdy",
|
||||
name: "zhdy",
|
||||
component: () => import("../views/ZHDY.vue"),
|
||||
},
|
||||
{
|
||||
path: "/xqxy",
|
||||
name: "xqxy",
|
||||
component: () => import("../views/XQXY.vue"),
|
||||
},
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import("../views/KHC.vue"),
|
||||
},
|
||||
{
|
||||
path: "/tan",
|
||||
name: "tan",
|
||||
component: () => import("../views/TAN.vue"),
|
||||
},
|
||||
{
|
||||
path: "/zhdy",
|
||||
name: "zhdy",
|
||||
component: () => import("../views/ZHDY.vue"),
|
||||
},
|
||||
{
|
||||
path: "/xqxy",
|
||||
name: "xqxy",
|
||||
component: () => import("../views/XQXY.vue"),
|
||||
},
|
||||
{
|
||||
path:"/one",
|
||||
name:"one",
|
||||
component:()=>import("../views/ONE.vue")
|
||||
}
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import("../views/KHC.vue"),
|
||||
},
|
||||
{
|
||||
path: "/tan",
|
||||
name: "tan",
|
||||
component: () => import("../views/TAN.vue"),
|
||||
},
|
||||
{
|
||||
path: "/zhdy",
|
||||
name: "zhdy",
|
||||
component: () => import("../views/ZHDY.vue"),
|
||||
},
|
||||
{
|
||||
path: "/xqxy",
|
||||
name: "xqxy",
|
||||
component: () => import("../views/XQXY.vue"),
|
||||
},
|
||||
{
|
||||
path:"/one",
|
||||
name:"one",
|
||||
component:()=>import("../views/ONE.vue");
|
||||
}
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
import Vue from "vue";
|
||||
import VueRouter from "vue-router";
|
||||
Vue.use(VueRouter);
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "index",
|
||||
component: () => import("../views/KHC.vue"),
|
||||
},
|
||||
{
|
||||
path: "/tan",
|
||||
name: "tan",
|
||||
component: () => import("../views/TAN.vue"),
|
||||
},
|
||||
{
|
||||
path: "/zhdy",
|
||||
name: "zhdy",
|
||||
component: () => import("../views/ZHDY.vue"),
|
||||
},
|
||||
{
|
||||
path: "/xqxy",
|
||||
name: "xqxy",
|
||||
component: () => import("../views/XQXY.vue"),
|
||||
},
|
||||
{
|
||||
path:"/one",
|
||||
name:"one",
|
||||
component:()=>import("../views/ONE.vue"),
|
||||
}
|
||||
];
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: "hash",
|
||||
base: process.env.BASE_URL,
|
||||
routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,288 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProjectONE',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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图
|
||||
* @param pieData 总数据
|
||||
* @param internalDiameterRatio:透明的空心占比
|
||||
* @param distance 视角到主体的距离
|
||||
* @param alpha 旋转角度
|
||||
* @param pieHeight 立体的高度
|
||||
* @param opacity 饼或者环的透明度
|
||||
*/
|
||||
getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== 'undefined'
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== 'undefined') {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value)
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing(){
|
||||
const optionsData = [
|
||||
{
|
||||
name: 'aa',
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: '#41adf8',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'cc',
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: '#ffa100',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bb',
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: '#2acf81',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ['20%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ['aa', 'bb', 'cc'],
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '3D 饼图',
|
||||
x: 'center',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: '#333',
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7BC0CB',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b} \n{c} {d}%',
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,279 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProjectONE',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== 'undefined'
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== 'undefined') {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value)
|
||||
series[i].parametricEquation = getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing(){
|
||||
const optionsData = [
|
||||
{
|
||||
name: 'aa',
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: '#41adf8',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'cc',
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: '#ffa100',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bb',
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: '#2acf81',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ['20%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ['aa', 'bb', 'cc'],
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '3D 饼图',
|
||||
x: 'center',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: '#333',
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7BC0CB',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b} \n{c} {d}%',
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,279 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProjectONE',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== 'undefined'
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== 'undefined') {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value)
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing(){
|
||||
const optionsData = [
|
||||
{
|
||||
name: 'aa',
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: '#41adf8',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'cc',
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: '#ffa100',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bb',
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: '#2acf81',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ['20%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ['aa', 'bb', 'cc'],
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '3D 饼图',
|
||||
x: 'center',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: '#333',
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7BC0CB',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b} \n{c} {d}%',
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
@ -0,0 +1,284 @@
|
|||
<template>
|
||||
<div></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProjectONE',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== 'undefined'
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== 'undefined') {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value)
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing(){
|
||||
const optionsData = [
|
||||
{
|
||||
name: 'aa',
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: '#41adf8',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'cc',
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: '#ffa100',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bb',
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: '#2acf81',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ['20%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ['aa', 'bb', 'cc'],
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '3D 饼图',
|
||||
x: 'center',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: '#333',
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7BC0CB',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b} \n{c} {d}%',
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ProjectONE',
|
||||
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== 'undefined'
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== 'undefined') {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== 'undefined') {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== 'undefined') {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value)
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing(){
|
||||
const optionsData = [
|
||||
{
|
||||
name: 'aa',
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: '#41adf8',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'cc',
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: '#ffa100',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'bb',
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: '#2acf81',
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: 'pie2d',
|
||||
type: 'pie',
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ['20%', '50%'],
|
||||
center: ['50%', '50%'],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ['aa', 'bb', 'cc'],
|
||||
bottom: '10%',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: '3D 饼图',
|
||||
x: 'center',
|
||||
top: '20',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: '#333',
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#7BC0CB',
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'outside',
|
||||
formatter: '{b} \n{c} {d}%',
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing{
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "aa",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#41adf8",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "cc",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "bb",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("")
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "aa",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#41adf8",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "cc",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "bb",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option)
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,313 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "aa",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#41adf8",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "cc",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "bb",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "aa",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#41adf8",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "cc",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "bb",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "aa",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#41adf8",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "cc",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "bb",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#41adf8",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#ffa100",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#2acf81",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["aa", "bb", "cc"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
title: {
|
||||
text: "3D 饼图",
|
||||
x: "center",
|
||||
top: "20",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
},
|
||||
},
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
legend: {
|
||||
tooltip: {
|
||||
show: true,
|
||||
},
|
||||
data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
bottom: "10%",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
console.log(params.seriesName);
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
console.log(params.seriesName);
|
||||
if (
|
||||
params.seriesName !== "mouseoutSeries" &&
|
||||
params.seriesName !== "pie2d"
|
||||
) {
|
||||
let 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}%`
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,317 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
backgroundColor: "#333",
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,316 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: "{b} \n{c} {d}%",
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}</br>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}</br>`+`<span style=color:${params.color}>${params.name}</span>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+`<span style=color:${params.color}>${params.name}</span>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+`<span style="color:${params.color}"">${params.name}</span>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+"\t"+`<span style="color:${params.color}"">${params.name}</span>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+"\d"+`<span style="color:${params.color}"">${params.name}</span>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+"\n"+`<span style="color:${params.color}"">${params.name}</span>`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+"\n"+`<span style="color:${params.color}""></span>`+${params.name}
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,325 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter:(params)=>{
|
||||
console.log(params);
|
||||
return `{name|${params.name}}`+"\n"+`<span style="color:${params.color}""></span>`+`${params.name}`
|
||||
},
|
||||
rich:{
|
||||
name:{
|
||||
fontSize:24,
|
||||
color:"#fff",
|
||||
}
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing",option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +
|
||||
`<span style="color:${params.color}""></span>` +
|
||||
`${params.name}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +
|
||||
`<span style="color:${params.color}"></span>` +
|
||||
`${params.name}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,330 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
`<span style="color:${params.color}"></span>` +
|
||||
`${params.name}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,332 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:36,
|
||||
color:"#",
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:36,
|
||||
color:"#",
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:function(params){
|
||||
console.log(params);
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,335 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:36,
|
||||
color:function(params){
|
||||
console.log(params);
|
||||
},
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,335 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:36,
|
||||
color:function(params){
|
||||
console.log(params);
|
||||
},
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:36,
|
||||
color:function(params){
|
||||
console.log(params);
|
||||
return params.color
|
||||
},
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:36,
|
||||
color:function(params){
|
||||
console.log(params);
|
||||
return params.data.color
|
||||
},
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:24,
|
||||
color:function(params){
|
||||
console.log(params);
|
||||
return params.data.color
|
||||
},
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return (
|
||||
`{name|${params.name}}` +
|
||||
"\n" +`{colors|${params.color}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors:{
|
||||
fontSize:30,
|
||||
color:function(params){
|
||||
console.log(params);
|
||||
return params.data.color
|
||||
},
|
||||
fontWeight:700
|
||||
}
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${params.color}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,336 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a,b)=>{
|
||||
return a.value+b.value
|
||||
})
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${params.color}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a, b) => {
|
||||
return a.value + b.value;
|
||||
});
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${params.color}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a, b) => {
|
||||
return a.value + b.value;
|
||||
});
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a, b) => {
|
||||
return a.value + b.value;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a, b) => {
|
||||
return a + b;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a, b) => {
|
||||
return a.value + b.value;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a, b) => {
|
||||
console.log(a);
|
||||
return a.value + b.value;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((item,index) => {
|
||||
console.log(a);
|
||||
return a + b;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((item,index) => {
|
||||
console.log(index);
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((item,index) => {
|
||||
console.log(item);
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a,b) => {
|
||||
console.log(item);
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a,b) => {
|
||||
console.log(a);
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
const total = optionsData.reduce((a,b) => {
|
||||
console.log();
|
||||
return a+b;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
total +=item.value;
|
||||
})
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: "11",
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
total +=item.value;
|
||||
})
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: "11",
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: "33",
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: "22",
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
total +=item.value;
|
||||
})
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: "11",
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: "33",
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: "22",
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item, index) => {
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: "11",
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: "33",
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: "22",
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item);
|
||||
total +=item.value
|
||||
})
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total +=item.value
|
||||
})
|
||||
console.log(total);
|
||||
const percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total +=item.value
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total+=item.value
|
||||
return total
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total+=item.value
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total+=item.value;
|
||||
console.log(total);
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total=0;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total+=item.value;
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total=0;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total+=item.value;
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100;
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total=0;
|
||||
optionsData.forEach((item,index)=>{
|
||||
console.log(item.value);
|
||||
total+=item.value;
|
||||
})
|
||||
console.log(total);
|
||||
let percent = (params.value / total) * 100.toFixed(2);
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return `{name|${params.name}}` + "\n" + `{colors|${percent}%}`;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return `{colors|${percent}%}`+ "\n"+"\n" + `{name|${params.name}}` ;
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,343 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:"#",
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
color: "#fff",
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color: function (params) {
|
||||
console.log(params);
|
||||
return params.data.color;
|
||||
},
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:"#",
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,338 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color: "#",
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:"#",
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color:optionsData.itemStyle.color[0]
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:"#",
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color:optionsData.itemStyle.color[0],
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="bing"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProjectONE",
|
||||
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getbing();
|
||||
},
|
||||
|
||||
methods: {
|
||||
// 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
|
||||
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 = 1;
|
||||
// 计算选中效果分别在 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;
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
getPie3D(
|
||||
pieData,
|
||||
internalDiameterRatio,
|
||||
distance,
|
||||
alpha,
|
||||
pieHeight,
|
||||
opacity = 1
|
||||
) {
|
||||
const series = [];
|
||||
let sumValue = 0;
|
||||
let startValue = 0;
|
||||
let endValue = 0;
|
||||
const legendData = [];
|
||||
const k =
|
||||
typeof internalDiameterRatio !== "undefined"
|
||||
? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
||||
: 1 / 3;
|
||||
// 为每一个饼图数据，生成一个 series-surface 配置
|
||||
for (let i = 0; i < pieData.length; i += 1) {
|
||||
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,
|
||||
},
|
||||
};
|
||||
if (typeof pieData[i].itemStyle !== "undefined") {
|
||||
const itemStyle = {};
|
||||
if (typeof pieData[i].itemStyle.color !== "undefined") {
|
||||
itemStyle.color = pieData[i].itemStyle.color;
|
||||
}
|
||||
if (typeof pieData[i].itemStyle.opacity !== "undefined") {
|
||||
itemStyle.opacity = pieData[i].itemStyle.opacity;
|
||||
}
|
||||
seriesItem.itemStyle = itemStyle;
|
||||
}
|
||||
series.push(seriesItem);
|
||||
}
|
||||
// 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
||||
// 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
||||
for (let i = 0; i < series.length; i += 1) {
|
||||
endValue = startValue + series[i].pieData.value;
|
||||
series[i].pieData.startRatio = startValue / sumValue;
|
||||
series[i].pieData.endRatio = endValue / sumValue;
|
||||
console.log(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
series[i].parametricEquation = this.getParametricEquation(
|
||||
series[i].pieData.startRatio,
|
||||
series[i].pieData.endRatio,
|
||||
false,
|
||||
false,
|
||||
k,
|
||||
series[i].pieData.value
|
||||
);
|
||||
startValue = endValue;
|
||||
legendData.push(series[i].name);
|
||||
}
|
||||
return series;
|
||||
},
|
||||
getbing() {
|
||||
const optionsData = [
|
||||
{
|
||||
name: "生料系统",
|
||||
value: 11,
|
||||
itemStyle: {
|
||||
color: "#0BA0E3",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "水泥磨系统",
|
||||
value: 33,
|
||||
itemStyle: {
|
||||
color: "#01E3F4",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "破碎系统",
|
||||
value: 22,
|
||||
itemStyle: {
|
||||
color: "#50F4C1",
|
||||
// opacity: 1,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const series = this.getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
|
||||
|
||||
series.push({
|
||||
name: "pie2d",
|
||||
type: "pie",
|
||||
label: {
|
||||
opacity: 1,
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
labelLine: {
|
||||
length: 30,
|
||||
length2: 30,
|
||||
},
|
||||
startAngle: -30, //起始角度，支持范围[0, 360]。
|
||||
clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "50%"],
|
||||
center: ["50%", "50%"],
|
||||
data: optionsData,
|
||||
itemStyle: {
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
|
||||
let option = {
|
||||
// legend: {
|
||||
// tooltip: {
|
||||
// show: true,
|
||||
// },
|
||||
// data: ["生料系统", "水泥磨系统", "破碎系统"],
|
||||
// bottom: "10%",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 12,
|
||||
// },
|
||||
// },
|
||||
// tooltip: {
|
||||
// formatter: (params) => {
|
||||
// console.log(params);
|
||||
// console.log(params.seriesName);
|
||||
// if (
|
||||
// params.seriesName !== "mouseoutSeries" &&
|
||||
// params.seriesName !== "pie2d"
|
||||
// ) {
|
||||
// let 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}%`
|
||||
// );
|
||||
// }
|
||||
// },
|
||||
// },
|
||||
// title: {
|
||||
// text: "3D 饼图",
|
||||
// x: "center",
|
||||
// top: "20",
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// fontSize: 22,
|
||||
// },
|
||||
// },
|
||||
labelLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#7BC0CB",
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
color:"#",
|
||||
position: "outside",
|
||||
formatter: (params) => {
|
||||
var total = 0;
|
||||
optionsData.forEach((item, index) => {
|
||||
console.log(item.value);
|
||||
total += item.value;
|
||||
});
|
||||
console.log(total);
|
||||
let percent = ((params.value / total) * 100).toFixed(2);
|
||||
console.log(params);
|
||||
return (
|
||||
`{colors|${percent}%}` + "\n" + "\n" + `{name|${params.name}}`
|
||||
);
|
||||
},
|
||||
rich: {
|
||||
name: {
|
||||
fontSize: 24,
|
||||
},
|
||||
colors: {
|
||||
fontSize: 30,
|
||||
color:optionsData[0].itemStyle.color,
|
||||
fontWeight: 700,
|
||||
},
|
||||
},
|
||||
},
|
||||
xAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
yAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
zAxis3D: {
|
||||
min: -1,
|
||||
max: 1,
|
||||
},
|
||||
grid3D: {
|
||||
show: false,
|
||||
boxHeight: 30, // 三维笛卡尔坐标系在三维场景中的高度
|
||||
viewControl: {
|
||||
alpha: 40,
|
||||
beta: 40,
|
||||
distance: 500, //调整视角到主体的距离，类似调整zoom
|
||||
rotateSensitivity: 0, // 设置为0无法旋转
|
||||
zoomSensitivity: 0, // 设置为0无法缩放
|
||||
panSensitivity: 0, // 设置为0无法平移
|
||||
autoRotate: false, // 自动旋转
|
||||
},
|
||||
},
|
||||
series: series,
|
||||
};
|
||||
this.defineEcharts("bing", option);
|
||||
},
|
||||
defineEcharts(dom, option) {
|
||||
var chartDom = document.getElementById(dom);
|
||||
var myChart = this.$echarts.init(chartDom, null, {
|
||||
devicePixelRatio: 10, // 设置为2或更高的值
|
||||
});
|
||||
myChart.setOption(option);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
#bing {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue