|
|
@@ -0,0 +1,736 @@
|
|
|
+export const getBarOptions = (currentData = []) => {
|
|
|
+ const xAxis = ["1#好氧池硝酸盐", "2#好氧池硝酸盐", "1#缺氧氨氮", "2#缺氧氨氮", "二沉池正磷酸盐"];
|
|
|
+ const rangeData = [12, 12, 15, 15, 0.4];
|
|
|
+
|
|
|
+ let option = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis',
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ // containLabel: true,
|
|
|
+ bottom: "10%",
|
|
|
+ top: "6%",
|
|
|
+ left: "10%",
|
|
|
+ right: "2%",
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: xAxis,
|
|
|
+ axisLabel: {
|
|
|
+ interval: 0,
|
|
|
+ show: true,
|
|
|
+ fontSize: '1.1rem',
|
|
|
+ color: "#0A284E",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ show: true,
|
|
|
+ color: "rgba(54, 153, 255, .4)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //背景柱体，不显示数据在图表中，只显示背景色
|
|
|
+ // {
|
|
|
+ // type: "category",
|
|
|
+ // show: false,
|
|
|
+ // data: myData6,
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ show: true,
|
|
|
+ fontSize: '1.1rem',
|
|
|
+ color: "#7395B3",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#7FD6FF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#BDD4E8",
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "当前值",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ borderRadius: [2, 2, 0, 0],
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(246,115,7, 0.5)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(246,115,7, 0.1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 8,
|
|
|
+ data: currentData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "范围值",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: {
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(10,184,4, 0.5)",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(10,184,4, 0.1)",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barWidth: 8,
|
|
|
+ // 展示柱图背景
|
|
|
+ data: rangeData,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 柱形顶部色块
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#FF6737'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ symbolRepeat: false,
|
|
|
+ symbolMargin: 8,
|
|
|
+ symbol: 'rect',
|
|
|
+ symbolClip: false,
|
|
|
+ symbolSize: [7, 2],
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbolOffset: [-4, 0],
|
|
|
+ data: currentData,
|
|
|
+ width: 1,
|
|
|
+ z: 0,
|
|
|
+ zlevel: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ // 柱形顶部色块
|
|
|
+ name: '',
|
|
|
+ type: 'pictorialBar',
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#00AB84'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ symbolRepeat: false,
|
|
|
+ symbolMargin: 8,
|
|
|
+ symbol: 'rect',
|
|
|
+ symbolClip: false,
|
|
|
+ symbolSize: [7, 2],
|
|
|
+ symbolPosition: 'end',
|
|
|
+ symbolOffset: [5, 0],
|
|
|
+ data: rangeData,
|
|
|
+ width: 1,
|
|
|
+ z: 0,
|
|
|
+ zlevel: 1
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+
|
|
|
+ return option;
|
|
|
+}
|
|
|
+
|
|
|
+export const getPieOptions = (optionsData) => {
|
|
|
+ let colors = ['#00A0E9', '#00AB84', '#C6A3FF', '#E9D0A1', '#45D3F2']
|
|
|
+
|
|
|
+ function getParametricEquation(
|
|
|
+ startRatio,
|
|
|
+ endRatio,
|
|
|
+ isSelected,
|
|
|
+ isHovered,
|
|
|
+ k,
|
|
|
+ height,
|
|
|
+ i
|
|
|
+ ) {
|
|
|
+ // 计算
|
|
|
+ let midRatio = (startRatio + endRatio) / 2;
|
|
|
+
|
|
|
+ let startRadian = startRatio * Math.PI * 2;
|
|
|
+ let endRadian = endRatio * Math.PI * 2;
|
|
|
+ let midRadian = midRatio * Math.PI * 2;
|
|
|
+
|
|
|
+ // 如果只有一个扇形，则不实现选中效果。
|
|
|
+ if (startRatio === 0 && endRatio === 1) {
|
|
|
+ isSelected = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|
|
+ k = typeof k !== "undefined" ? k : 1 / 3;
|
|
|
+
|
|
|
+ // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|
|
+ let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|
|
+ let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|
|
+ let offsetZ = i == 1 ? 2 : 0;
|
|
|
+ // 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|
|
+ let 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);
|
|
|
+ }
|
|
|
+ return Math.sin(v) > 0 ? 1 * height : -1;
|
|
|
+ },
|
|
|
+ };
|
|
|
+ }
|
|
|
+ // 生成模拟 3D 饼图的配置项
|
|
|
+ function getPie3D(pieData, internalDiameterRatio) {
|
|
|
+ let series = [];
|
|
|
+ let sumValue = 0;
|
|
|
+ let startValue = 0;
|
|
|
+ let endValue = 0;
|
|
|
+ let legendData = [];
|
|
|
+ let k =
|
|
|
+ typeof internalDiameterRatio !== "undefined"
|
|
|
+ ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
|
|
+ : 1 / 3;
|
|
|
+
|
|
|
+ // 为每一个饼图数据，生成一个 series-surface 配置
|
|
|
+ for (let i = 0; i < pieData.length - 1; i++) {
|
|
|
+ sumValue += pieData[i].value;
|
|
|
+
|
|
|
+ let seriesItem = {
|
|
|
+ name:
|
|
|
+ typeof pieData[i].name === "undefined"
|
|
|
+ ? `series${i}`
|
|
|
+ : pieData[i].name,
|
|
|
+ type: "surface",
|
|
|
+ parametric: true,
|
|
|
+ wireframe: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ pieData: pieData[i],
|
|
|
+ itemStyle: {
|
|
|
+ color: pieData[i].color, // 自定义颜色
|
|
|
+ opacity: '0.7'
|
|
|
+ },
|
|
|
+ pieStatus: {
|
|
|
+ selected: false,
|
|
|
+ hovered: false,
|
|
|
+ k: k,
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ if (typeof pieData[i].itemStyle != "undefined") {
|
|
|
+ let itemStyle = {};
|
|
|
+
|
|
|
+ typeof pieData[i].itemStyle.color != "undefined"
|
|
|
+ ? (itemStyle.color = pieData[i].itemStyle.color)
|
|
|
+ : null;
|
|
|
+ typeof pieData[i].itemStyle.opacity != "undefined"
|
|
|
+ ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
|
|
+ : null;
|
|
|
+
|
|
|
+ seriesItem.itemStyle = itemStyle;
|
|
|
+ }
|
|
|
+ series.push(seriesItem);
|
|
|
+ }
|
|
|
+
|
|
|
+ for (let i = 0; i < series.length; i++) {
|
|
|
+ endValue = startValue + series[i].pieData.value;
|
|
|
+ series[i].pieData.startRatio = startValue / sumValue;
|
|
|
+ series[i].pieData.endRatio = endValue / sumValue;
|
|
|
+ series[i].parametricEquation = getParametricEquation(
|
|
|
+ series[i].pieData.startRatio,
|
|
|
+ series[i].pieData.endRatio,
|
|
|
+ false,
|
|
|
+ false,
|
|
|
+ k,
|
|
|
+ // 调整扇形高度
|
|
|
+ i === 0 ? 10 : 10,
|
|
|
+ i,
|
|
|
+ series[i].pieData.value
|
|
|
+ );
|
|
|
+
|
|
|
+ startValue = endValue;
|
|
|
+
|
|
|
+ legendData.push(series[i].name);
|
|
|
+ }
|
|
|
+ return series;
|
|
|
+ }
|
|
|
+
|
|
|
+ const series = getPie3D(optionsData, 0.6); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
|
|
|
+ series.push({
|
|
|
+ name: "pie2d",
|
|
|
+ type: "pie",
|
|
|
+ startAngle: 2, //起始角度，支持范围[0, 360]。
|
|
|
+ clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
|
+ // radius: ["50%", "60%"],
|
|
|
+ // center: ["62%", "50%"],
|
|
|
+ data: optionsData,
|
|
|
+ itemStyle: {
|
|
|
+ opacity: 0,
|
|
|
+ },
|
|
|
+ labelLine: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ position: 'center'
|
|
|
+ },
|
|
|
+ });
|
|
|
+ // 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
|
+ let option = {
|
|
|
+ animation: true,
|
|
|
+ tooltip: {
|
|
|
+ formatter: (params) => {
|
|
|
+ if (params.seriesName !== 'mouseoutSeries') {
|
|
|
+ const { name, value, color} = optionsData[params.seriesIndex] ?? {};
|
|
|
+ return `${name
|
|
|
+ }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color
|
|
|
+ };"></span>${value}` ;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ x: "center",
|
|
|
+ top: "20",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ fontSize: 22,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ xAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1,
|
|
|
+ },
|
|
|
+ yAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1,
|
|
|
+ },
|
|
|
+ zAxis3D: {
|
|
|
+ min: -1,
|
|
|
+ max: 1,
|
|
|
+ },
|
|
|
+ grid3D: {
|
|
|
+ show: false,
|
|
|
+ boxHeight: 2.5,
|
|
|
+ top: '-10%',
|
|
|
+ // left: "8%",
|
|
|
+ // bottom: "50%",
|
|
|
+ viewControl: {
|
|
|
+ // alpha: 38,
|
|
|
+ // beta: 70,
|
|
|
+ enabled: true,
|
|
|
+ alpha: 30,
|
|
|
+ beta: 55,
|
|
|
+ distance: 150,
|
|
|
+ rotateSensitivity: 0, //设置为0无法旋转
|
|
|
+ zoomSensitivity: 0, //设置为0无法缩放
|
|
|
+ panSensitivity: 0, //设置为0无法平移
|
|
|
+ autoRotate: false, //自动旋转
|
|
|
+
|
|
|
+
|
|
|
+ // beta: 325,
|
|
|
+ // autoRotate: false, // 自动旋转
|
|
|
+ },
|
|
|
+ },
|
|
|
+ series: series,
|
|
|
+ };
|
|
|
+
|
|
|
+ // return option
|
|
|
+
|
|
|
+ // let colors = ['#16d0ff', '#664bff', '#37a2da', '#ffdb5c', '#ff9f7f', '#9fe6b8', '#67e0e3', '#32c5e9', '#fb7293', "#9A60B4", "#ea7ccc"]
|
|
|
+ // // 传入数据生成 option
|
|
|
+ // const optionsData = [
|
|
|
+ // {
|
|
|
+ // name: "第一科室",
|
|
|
+ // value: 68,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "第二科室",
|
|
|
+ // value: 52,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "第三科室",
|
|
|
+ // value: 37,
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "第四科室",
|
|
|
+ // value: 58,
|
|
|
+ // },
|
|
|
+ // ];
|
|
|
+ // function getParametricEquation(
|
|
|
+ // startRatio,
|
|
|
+ // endRatio,
|
|
|
+ // isSelected,
|
|
|
+ // isHovered,
|
|
|
+ // k,
|
|
|
+ // height,
|
|
|
+ // i
|
|
|
+ // ) {
|
|
|
+ // // 计算
|
|
|
+ // let midRatio = (startRatio + endRatio) / 2;
|
|
|
+
|
|
|
+ // let startRadian = startRatio * Math.PI * 2;
|
|
|
+ // let endRadian = endRatio * Math.PI * 2;
|
|
|
+ // let midRadian = midRatio * Math.PI * 2;
|
|
|
+
|
|
|
+ // // 如果只有一个扇形，则不实现选中效果。
|
|
|
+ // if (startRatio === 0 && endRatio === 1) {
|
|
|
+ // isSelected = false;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
|
|
|
+ // k = typeof k !== "undefined" ? k : 1 / 3;
|
|
|
+
|
|
|
+ // // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
|
|
|
+ // let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
|
|
|
+ // let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
|
|
|
+ // let offsetZ = i == 1 ? 2 : 0;
|
|
|
+ // // 计算高亮效果的放大比例（未高亮，则比例为 1）
|
|
|
+ // let 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);
|
|
|
+ // }
|
|
|
+ // return Math.sin(v) > 0 ? 1 * height : -1;
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ // // 生成模拟 3D 饼图的配置项
|
|
|
+ // function getPie3D(pieData, internalDiameterRatio) {
|
|
|
+ // let series = [];
|
|
|
+ // let sumValue = 0;
|
|
|
+ // let startValue = 0;
|
|
|
+ // let endValue = 0;
|
|
|
+ // let legendData = [];
|
|
|
+ // let k =
|
|
|
+ // typeof internalDiameterRatio !== "undefined"
|
|
|
+ // ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio)
|
|
|
+ // : 1 / 3;
|
|
|
+
|
|
|
+ // // 为每一个饼图数据，生成一个 series-surface 配置
|
|
|
+ // for (let i = 0; i < pieData.length; i++) {
|
|
|
+ // sumValue += pieData[i].value;
|
|
|
+
|
|
|
+ // let seriesItem = {
|
|
|
+ // name:
|
|
|
+ // typeof pieData[i].name === "undefined"
|
|
|
+ // ? `series${i}`
|
|
|
+ // : pieData[i].name,
|
|
|
+ // type: "surface",
|
|
|
+ // parametric: true,
|
|
|
+ // wireframe: {
|
|
|
+ // show: false,
|
|
|
+ // },
|
|
|
+ // pieData: pieData[i],
|
|
|
+ // itemStyle: {
|
|
|
+ // color: colors[i], // 自定义颜色
|
|
|
+ // opacity: '0.7'
|
|
|
+ // },
|
|
|
+ // pieStatus: {
|
|
|
+ // selected: false,
|
|
|
+ // hovered: false,
|
|
|
+ // k: k,
|
|
|
+ // },
|
|
|
+ // };
|
|
|
+
|
|
|
+ // if (typeof pieData[i].itemStyle != "undefined") {
|
|
|
+ // let itemStyle = {};
|
|
|
+
|
|
|
+ // typeof pieData[i].itemStyle.color != "undefined"
|
|
|
+ // ? (itemStyle.color = pieData[i].itemStyle.color)
|
|
|
+ // : null;
|
|
|
+ // typeof pieData[i].itemStyle.opacity != "undefined"
|
|
|
+ // ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
|
|
|
+ // : null;
|
|
|
+
|
|
|
+ // seriesItem.itemStyle = itemStyle;
|
|
|
+ // }
|
|
|
+ // series.push(seriesItem);
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
|
|
|
+ // // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
|
|
|
+ // for (let i = 0; i < series.length; i++) {
|
|
|
+ // endValue = startValue + series[i].pieData.value;
|
|
|
+ // console.log(series[i]);
|
|
|
+ // series[i].pieData.startRatio = startValue / sumValue;
|
|
|
+ // series[i].pieData.endRatio = endValue / sumValue;
|
|
|
+ // series[i].parametricEquation = getParametricEquation(
|
|
|
+ // series[i].pieData.startRatio,
|
|
|
+ // series[i].pieData.endRatio,
|
|
|
+ // false,
|
|
|
+ // false,
|
|
|
+ // k,
|
|
|
+ // // 调整扇形高度
|
|
|
+ // i === 0 ? 10 : 10,
|
|
|
+ // i,
|
|
|
+ // series[i].pieData.value
|
|
|
+ // );
|
|
|
+
|
|
|
+ // startValue = endValue;
|
|
|
+
|
|
|
+ // legendData.push(series[i].name);
|
|
|
+ // }
|
|
|
+ // return series;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // const series = getPie3D(optionsData, 0.6); // 可做为调整内环大小 0为实心圆饼图，大于0 小于1 为圆环
|
|
|
+ // series.push({
|
|
|
+ // name: "pie2d",
|
|
|
+ // type: "pie",
|
|
|
+ // label: {
|
|
|
+ // opacity: 1,
|
|
|
+ // fontSize: 14,
|
|
|
+ // lineHeight: 20,
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 14,
|
|
|
+ // color: "#fff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // length: 10,
|
|
|
+ // length2: 10,
|
|
|
+ // },
|
|
|
+ // startAngle: 2, //起始角度，支持范围[0, 360]。
|
|
|
+ // clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
|
+ // radius: ["50%", "60%"],
|
|
|
+ // center: ["62%", "50%"],
|
|
|
+ // data: optionsData,
|
|
|
+ // itemStyle: {
|
|
|
+ // opacity: 0,
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // show: false
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: false,
|
|
|
+ // position: 'center'
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ // // 准备待返回的配置项，把准备好的 legendData、series 传入。
|
|
|
+ // let option = {
|
|
|
+
|
|
|
+ // animation: true,
|
|
|
+ // tooltip: {
|
|
|
+ // show: false,
|
|
|
+ // textStyle: {
|
|
|
+ // fontSize: 14,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // title: {
|
|
|
+ // x: "center",
|
|
|
+ // top: "20",
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#fff",
|
|
|
+ // fontSize: 22,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // labelLine: {
|
|
|
+ // show: true,
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "#7BC0CB",
|
|
|
+ // },
|
|
|
+ // normal: {
|
|
|
+ // show: false,
|
|
|
+ // length: 10,
|
|
|
+ // length2: 10,
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // label: {
|
|
|
+ // show: true,
|
|
|
+ // position: "outside",
|
|
|
+ // // formatter: "{b} {d}%",
|
|
|
+ // formatter: function (optionsData) {
|
|
|
+ // console.log('optionsData', optionsData)
|
|
|
+ // return (
|
|
|
+ // "{name|" +
|
|
|
+ // optionsData.name +
|
|
|
+ // "}" +
|
|
|
+ // " {value|" +
|
|
|
+ // optionsData.percent.toFixed(0) +
|
|
|
+ // "%}"
|
|
|
+ // );
|
|
|
+ // },
|
|
|
+ // rich: {
|
|
|
+ // name: {
|
|
|
+ // fontSize: 14,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // value: {
|
|
|
+ // fontSize: 14,
|
|
|
+ // color: "#ffffff",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // textStyle: {
|
|
|
+ // color: "#fff",
|
|
|
+ // fontSize: "14px",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // xAxis3D: {
|
|
|
+ // min: -1,
|
|
|
+ // max: 1,
|
|
|
+ // },
|
|
|
+ // yAxis3D: {
|
|
|
+ // min: -1,
|
|
|
+ // max: 1,
|
|
|
+ // },
|
|
|
+ // zAxis3D: {
|
|
|
+ // min: -1,
|
|
|
+ // max: 1,
|
|
|
+ // },
|
|
|
+ // grid3D: {
|
|
|
+ // show: false,
|
|
|
+ // boxHeight: 2,
|
|
|
+ // top: '-10%',
|
|
|
+ // // left: "8%",
|
|
|
+ // // bottom: "50%",
|
|
|
+ // // environment: "rgba(255,255,255,0)",
|
|
|
+ // viewControl: {
|
|
|
+ // alpha: 30,
|
|
|
+ // distance: 150,
|
|
|
+ // beta: 15,
|
|
|
+ // autoRotate: false, // 自动旋转
|
|
|
+
|
|
|
+ // // // alpha: 38,
|
|
|
+ // // // beta: 70,
|
|
|
+ // // enabled: true,
|
|
|
+ // // alpha: 30,
|
|
|
+ // // beta: 30,
|
|
|
+ // // distance: 150,
|
|
|
+ // // rotateSensitivity: 0, //设置为0无法旋转
|
|
|
+ // // zoomSensitivity: 0, //设置为0无法缩放
|
|
|
+ // // panSensitivity: 0, //设置为0无法平移
|
|
|
+ // // autoRotate: false, //自动旋转
|
|
|
+
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // series: series,
|
|
|
+ // };
|
|
|
+
|
|
|
+ return option;
|
|
|
+
|
|
|
+}
|
whh
