export const getBarOptions = (currentData = []) => { const xAxis = ["1#好氧池硝酸盐", "2#好氧池硝酸盐", "1#缺氧氨氮", "2#缺氧氨氮", "二沉池正磷酸盐"]; const rangeData = [12, 12, 15, 15, 0.4]; let option = { tooltip: { trigger: 'axis', }, grid: { bottom: '4%', top: "6%", left: "5%", right: "2%", containLabel: true, // bottom: "4%", // top: "6%", // left: "10%", // right: "2%", }, legend: { show: false, }, xAxis: [ { type: "category", data: xAxis, axisLabel: { interval: 0, show: true, fontSize: '12px', color: "#fff", }, axisLine: { show: true, lineStyle: { show: true, color: "#3f4a59", }, }, axisTick: { show: false, }, }, ], yAxis: [ { splitNumber: 4, type: "value", axisLabel: { show: true, fontSize: '12px', color: "#fff" }, axisLine: { show: false, lineStyle: { color: "#3f4a59", }, }, axisTick: { show: false, }, splitLine: { lineStyle: { color: "#3f4a59", }, } }, ], series: [ { name: 'maxdata', type: 'custom', itemStyle: { color: 'rgba(216, 230, 255, .1)' }, renderItem: function (params, api) { //获取对应类目的axisTick中心点坐标 var start = api.coord([api.value(0)]) //通过坐标系的宽度和类目数,计算单个类目的背景 var width = (params.coordSys.width / 7) * 0.7 return { type: 'rect', shape: { // 相对左上角坐标 x: start[0] - width / 2, y: params.coordSys.y, width: width, height: params.coordSys.height }, style: api.style() } }, data: currentData.map(() => 0) }, { name: "当前值", type: "bar", itemStyle: { borderRadius: [2, 2, 0, 0], color: { x: 0, y: 0, x2: 0, y2: 1, colorStops: [ { offset: 0, color: "#FBB03B", }, { 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: "#17FFC9", }, { 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: [-5, 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 }
${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; }