diff --git a/package.json b/package.json index af0ff12..c028022 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "echarts": "^5.4.3", + "echarts-gl": "^2.0.9", "element-plus": "^2.4.3", "moment": "^2.29.4", "sass": "^1.69.5", diff --git a/src/assets/images/carbonEmission/carbonEmission StatisticsReport.png b/src/assets/images/carbonEmission/carbonEmission StatisticsReport.png new file mode 100644 index 0000000..e25cca3 Binary files /dev/null and b/src/assets/images/carbonEmission/carbonEmission StatisticsReport.png differ diff --git a/src/assets/images/carbonEmission/carbonEmissionReduction.png b/src/assets/images/carbonEmission/carbonEmissionReduction.png new file mode 100644 index 0000000..a1a29ea Binary files /dev/null and b/src/assets/images/carbonEmission/carbonEmissionReduction.png differ diff --git a/src/assets/images/carbonEmission/carbonNeutralityBg.png b/src/assets/images/carbonEmission/carbonNeutralityBg.png new file mode 100644 index 0000000..0d45c50 Binary files /dev/null and b/src/assets/images/carbonEmission/carbonNeutralityBg.png differ diff --git a/src/assets/images/carbonEmission/carbonOffsettingAmount.png b/src/assets/images/carbonEmission/carbonOffsettingAmount.png new file mode 100644 index 0000000..7b66281 Binary files /dev/null and b/src/assets/images/carbonEmission/carbonOffsettingAmount.png differ diff --git a/src/assets/images/carbonEmission/totalEmissions.png b/src/assets/images/carbonEmission/totalEmissions.png new file mode 100644 index 0000000..f9efa34 Binary files /dev/null and b/src/assets/images/carbonEmission/totalEmissions.png differ diff --git a/src/utils/carbonNeutrality.js b/src/utils/carbonNeutrality.js new file mode 100644 index 0000000..d982589 --- /dev/null +++ b/src/utils/carbonNeutrality.js @@ -0,0 +1,285 @@ +/** + * 绘制3d图 + * @param pieData 总数据 + * @param internalDiameterRatio:透明的空心占比 + * @param distance 视角到主体的距离 + * @param alpha 旋转角度 + * @param pieHeight 立体的高度 + * @param opacity 饼或者环的透明度 + */ +const getPie3D = ( + pieData, + internalDiameterRatio, + distance, + alpha, + pieHeight, + opacity = 1 +) => { + const series = []; + let sumValue = 0; + let startValue = 0; + let endValue = 0; + let legendData = []; + let legendBfb = []; + const k = 1 - internalDiameterRatio; + pieData.sort((a, b) => { + return b.value - a.value; + }); + // 为每一个饼图数据，生成一个 series-surface 配置 + for (let i = 0; i < pieData.length; i++) { + sumValue += pieData[i].value; + const seriesItem = { + name: + typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name, + type: "surface", + parametric: true, + wireframe: { + show: false, + }, + pieData: pieData[i], + pieStatus: { + selected: false, + hovered: false, + k: k, + }, + center: ["10%", "50%"], + }; + if (typeof pieData[i].itemStyle !== "undefined") { + const itemStyle = {}; + itemStyle.color = + typeof pieData[i].itemStyle.color !== "undefined" + ? pieData[i].itemStyle.color + : opacity; + itemStyle.opacity = + typeof pieData[i].itemStyle.opacity !== "undefined" + ? pieData[i].itemStyle.opacity + : opacity; + seriesItem.itemStyle = itemStyle; + } + series.push(seriesItem); + } + + // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， + // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 + legendData = []; + legendBfb = []; + for (let i = 0; i < series.length; i++) { + endValue = startValue + series[i].pieData.value; + series[i].pieData.startRatio = startValue / sumValue; + series[i].pieData.endRatio = endValue / sumValue; + series[i].parametricEquation = getParametricEquation( + series[i].pieData.startRatio, + series[i].pieData.endRatio, + false, + false, + k, + series[i].pieData.value + ); + startValue = endValue; + const bfb = fomatFloat(series[i].pieData.value / sumValue, 4); + legendData.push({ + name: series[i].name, + value: bfb, + }); + legendBfb.push({ + name: series[i].name, + value: bfb, + }); + } + const boxHeight = getHeight3D(series, pieHeight); // 通过pieHeight设定3d饼/环的高度，单位是px + // 准备待返回的配置项，把准备好的 legendData、series 传入。 + const option = { + legend: { + show: false, + data: legendData, + orient: "vertical", + left: 10, + top: 10, + itemGap: 10, + textStyle: { + color: "#A1E2FF", + }, + icon: "circle", + formatter: function (param) { + const item = legendBfb.filter((item) => item.name === param)[0]; + const bfs = fomatFloat(item.value * 100, 2) + "%"; + return `${item.name} ${bfs}`; + }, + }, + labelLine: { + show: true, + lineStyle: { + color: "#fff", + }, + }, + label: { + show: true, + position: "outside", + formatter: "{b} \n{c} {d}%", + }, + tooltip: { + backgroundColor: "#033b77", + borderColor: "#21f2c4", + textStyle: { + color: "#fff", + fontSize: 13, + }, + formatter: (params) => { + if ( + params.seriesName !== "mouseoutSeries" && + params.seriesName !== "信用评价" + ) { + // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData'); + const bfb = ( + (option.series[params.seriesIndex].pieData.endRatio - + option.series[params.seriesIndex].pieData.startRatio) * + 100 + ).toFixed(2); + return ( + `${params.seriesName}
` + + `` + + `${bfb}%` + ); + } + }, + }, + xAxis3D: { + min: -1, + max: 1, + }, + yAxis3D: { + min: -1, + max: 1, + }, + zAxis3D: { + min: -1, + max: 1, + }, + grid3D: { + show: false, + boxHeight: boxHeight, // 圆环的高度 + viewControl: { + // 3d效果可以放大、旋转等，请自己去查看官方配置 + alpha, // 角度 + distance, // 调整视角到主体的距离，类似调整zoom + rotateSensitivity: 0, // 设置为0无法旋转 + zoomSensitivity: 0, // 设置为0无法缩放 + panSensitivity: 0, // 设置为0无法平移 + autoRotate: false, // 自动旋转 + }, + }, + series: series, + }; + return option; +}; + +/** + * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation + */ +const getParametricEquation = ( + startRatio, + endRatio, + isSelected, + isHovered, + k, + h +) => { + // 计算 + const midRatio = (startRatio + endRatio) / 2; + const startRadian = startRatio * Math.PI * 2; + const endRadian = endRatio * Math.PI * 2; + const midRadian = midRatio * Math.PI * 2; + // 如果只有一个扇形，则不实现选中效果。 + if (startRatio === 0 && endRatio === 1) { + isSelected = false; + } + // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） + k = typeof k !== "undefined" ? k : 1 / 3; + // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） + const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0; + const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0; + // 计算高亮效果的放大比例（未高亮，则比例为 1） + const hoverRate = isHovered ? 1.05 : 1; + // 返回曲面参数方程 + return { + u: { + min: -Math.PI, + max: Math.PI * 3, + step: Math.PI / 32, + }, + v: { + min: 0, + max: Math.PI * 2, + step: Math.PI / 20, + }, + x: function (u, v) { + if (u < startRadian) { + return ( + offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + if (u > endRadian) { + return ( + offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate; + }, + y: function (u, v) { + if (u < startRadian) { + return ( + offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + if (u > endRadian) { + return ( + offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate + ); + } + return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate; + }, + z: function (u, v) { + if (u < -Math.PI * 0.5) { + return Math.sin(u); + } + if (u > Math.PI * 2.5) { + return Math.sin(u) * h * 0.1; + } + return Math.sin(v) > 0 ? 1 * h * 0.1 : -1; + }, + }; +}; + +/** + * 获取3d丙图的最高扇区的高度 + */ +const getHeight3D = (series, height) => { + series.sort((a, b) => { + return b.pieData.value - a.pieData.value; + }); + return (height * 25) / series[0].pieData.value; +}; + +/** + * 格式化浮点数 + */ +const fomatFloat = (num, n) => { + let f = parseFloat(num); + if (isNaN(f)) { + return false; + } + f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); // n 幂 + let s = f.toString(); + let rs = s.indexOf("."); + // 判定如果是整数，增加小数点再补0 + if (rs < 0) { + rs = s.length; + s += "."; + } + while (s.length <= rs + n) { + s += "0"; + } + return s; +}; + +export { getPie3D, getParametricEquation }; diff --git a/src/views/carbonEmission/index.vue b/src/views/carbonEmission/index.vue index 035d108..bed825a 100644 --- a/src/views/carbonEmission/index.vue +++ b/src/views/carbonEmission/index.vue @@ -1,13 +1,868 @@ - - - \ No newline at end of file +const getImageUrl = (name) => { + return new URL(name, import.meta.url).href; +}; +const overviewDate = ref([ + { + name: "年", + }, + { + name: "月", + }, +]); +//总览 +const activeDate = ref(0); +const overviewList = ref([ + { + name: "总排放量", + num: 83, + unit: "万tCO2", + }, + { + name: "碳抵消量", + num: 83, + unit: "万tCO2", + }, + { + name: "碳减排量", + num: 83, + unit: "万tCO2", + }, +]); +//总览切换时间 +function switchDate(index) { + activeDate.value = index; +} +//碳趋势切换时间 +function trandSwitchDate(index) { + trendActiveDate.value = index; +} +//碳趋势 +const trendActiveDate = ref(0); +const trendDate = ref([ + { + name: "月", + }, + { + name: "日", + }, +]); +//碳趋势图表 +function getCarbonTrends() { + let myChart = echarts.init(document.getElementById("carbonTrends")); + const option = { + // backgroundColor: "#05224d", + tooltip: {}, + grid: { + top: "18%", + left: "4%", + right: "4%", + bottom: "4%", + containLabel: true, + }, + xAxis: [ + { + type: "category", + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + // type:'dashed', + color: "#557775", + // color: "#233e64", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#DDFFFD", + margin: 40, + }, + }, + + axisTick: { show: false }, + boundaryGap: true, + data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + }, + ], + yAxis: [ + { + type: "value", + name: "单位:万tCO2", + nameTextStyle: { + color: "#DDFFFD", + // align: "right", + padding: [0, 10, 0, 0], + }, + min: 0, + max: 2000, + splitNumber: 5, + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: "rgba(1, 39, 37, 0.30)", + }, + }, + axisLine: { show: false }, + axisLabel: { + textStyle: { + color: "#DDFFFD", + }, + }, + axisTick: { show: false }, + }, + ], + series: [ + { + name: "异常流量", + type: "line", + smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + symbolSize: 0, + + lineStyle: { + color: "#5BFAF1", // 线条颜色 + }, + areaStyle: { + //区域填充样式 + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { offset: 0, color: "rgba(91, 250, 241, 0.40)" }, + { offset: 1, color: "rgba(91, 250, 241, 0)" }, + ], + false + ), + + shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 + shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + data: [200, 300, 400, 500, 600, 700, 800], + }, + ], + }; + myChart.setOption(option); +} +//碳排放强度 +function getCarbonIntensity() { + const offsetX = 10; //bar宽 + const offsetY = 5; //倾斜角度 + // 绘制左侧面 + const CubeLeft = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + }, + buildPath: function (ctx, shape) { + const xAxisPoint = shape.xAxisPoint; + const c0 = [shape.x - 7, shape.y]; + const c1 = [shape.x + 7, shape.y]; + const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; + const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]]; + ctx + .moveTo(c0[0], c0[1]) + .lineTo(c1[0], c1[1]) + .lineTo(c2[0], c2[1]) + .lineTo(c3[0], c3[1]) + .closePath(); + ctx.stroke(); + }, + }); + // 绘制右侧面 + const CubeRight = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + }, + buildPath: function (ctx, shape) { + const xAxisPoint = shape.xAxisPoint; + const c1 = [shape.x + 7, shape.y]; + const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; + const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10]; + const c4 = [shape.x + 7 + 7, shape.y - 5]; + ctx + .moveTo(c1[0], c1[1]) + .lineTo(c2[0], c2[1]) + .lineTo(c3[0], c3[1]) + .lineTo(c4[0], c4[1]) + .closePath(); + ctx.stroke(); + }, + }); + // 绘制顶面 + const CubeTop = echarts.graphic.extendShape({ + shape: { + x: 0, + y: 0, + }, + buildPath: function (ctx, shape) { + const c1 = [shape.x - 7, shape.y]; + const c2 = [shape.x + 8, shape.y]; + const c3 = [shape.x + 15, shape.y - 5]; + const c4 = [shape.x - 2, shape.y - 5]; + ctx + .moveTo(c1[0], c1[1]) + .lineTo(c2[0], c2[1]) + .lineTo(c3[0], c3[1]) + .lineTo(c4[0], c4[1]) + .closePath(); + ctx.stroke(); + }, + }); + // 注册三个面图形 + echarts.graphic.registerShape("CubeLeft", CubeLeft); + echarts.graphic.registerShape("CubeRight", CubeRight); + echarts.graphic.registerShape("CubeTop", CubeTop); + let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"]; + let seriesData = [100, 200, 400, 250, 360, 250, 340]; + // 绿色渐变 + // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]] + // 蓝色渐变 + let colorArr = [ + ["rgba(0, 170, 193, 1)"], + ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"], + ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"], + ]; + let myChart = echarts.init(document.getElementById("carbonIntensity")); + const option = { + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + formatter: function (params, ticket, callback) { + const item = params[1]; + return item.name + " : " + item.value; + }, + }, + color: "#01DDF9", + legend: { + icon: "rect", + right: "4%", + top: "3%", + itemWidth: 20, // 标签宽度为20px + itemHeight: 10, // 标签高度为10px + textStyle: { + color: "rgba(221, 255, 253, 1)", + }, + data: ["单位面积碳排放强度限值"], + }, + grid: { + left: "4%", + right: "5%", + top: "18%", + bottom: "5%", + containLabel: true, + }, + xAxis: { + type: "category", + data: xAxisData, + axisLine: { + show: true, + lineStyle: { + width: 1, + type: "solid", + color: "rgba(255, 255, 255, 0.20)", + }, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "rgba(221, 255, 253, 1)", + fontSize: 14, + interval: 0, + // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引 + // formatter: function (value) { + // const length = value.length; + // if (length > 3) { + // const start = Math.floor(length / 2); + // const str = + // value.slice(0, start) + "\n" + value.slice(start, length); + // return str; + // } + // return value; + // }, + }, + }, + yAxis: { + type: "value", + name: "单位:万tCO2/人·年", + nameTextStyle: { + color: "#DDFFFD", + padding: [0, 0, 0, 35], + }, + max:500, + min:0, + // minInterval: 1, + // y轴（竖直线） + axisLine: { + show: false, + }, + // y轴横向 标线 + splitLine: { + show: true, + lineStyle: { + type: "dashed", + color: "rgba(1, 39, 37, 0.30)", + }, + }, + // y轴刻度线 + axisTick: { + show: false, + }, + // y轴文字 + axisLabel: { + fontSize: 14, + color: "#DDFFFD", + }, + }, + series: [ + { + type: "custom", + name: "单位面积碳排放强度限值", + renderItem: (params, api) => { + const location = api.coord([api.value(0), api.value(1)]); + return { + type: "group", + children: [ + // 左侧面 + { + type: "CubeLeft", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colorArr[1][0], + }, + { + offset: 1, + color: colorArr[1][1], + }, + ]), + }, + }, + // 右侧面 + { + type: "CubeRight", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colorArr[2][0], + }, + { + offset: 1, + color: colorArr[2][1], + }, + ]), + }, + }, + // 顶部 + { + type: "CubeTop", + shape: { + api, + xValue: api.value(0), + yValue: api.value(1), + x: location[0], + y: location[1], + xAxisPoint: api.coord([api.value(0), 0]), + }, + style: { + fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: colorArr[0][0], + }, + { + offset: 1, + color: colorArr[0][0], + }, + ]), + }, + }, + ], + }; + }, + data: seriesData, + }, + { + type: "bar", + label: { + normal: { + show: false, + position: "top", + formatter: (e) => { + return e.value; + }, + fontSize: 16, + color: "#43C4F1", + offset: [0, -5], + }, + }, + itemStyle: { + color: "transparent", + }, + tooltip: {}, + data: seriesData, + markLine: { + symbol: "none", + data: [ + { + yAxis: 400, + lineStyle: { + color: "rgba(255, 221, 0, 1)", + type: "dashed", + width: 1, + }, + label: { + show: false, + position: "end", + }, + }, + ], + }, + }, + ], + }; + myChart.setOption(option); +} +//各系统碳排放量统计 +function getCarbonEmissionStatistics() { + let myChart = echarts.init( + document.getElementById("carbonEmissionStatistics") + ); + let option = { + grid: { + left: "5%", + right: "5%", + bottom: "-10%", + top: "8%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return ( + params[0].name + + "
" + + "" + + params[0].seriesName + + "" + + Number( + (params[0].value.toFixed(4) / 10000).toFixed(2) + ).toLocaleString() + + " kWh
" + ); + }, + }, + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + axisLabel: { + padding: [0, 0, 10, -10], + verticalAlign: "bottom", + inside: true, + show: true, + textStyle: { + color: "#fff", + fontSize: "14", + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"], + }, + { + type: "category", + inverse: true, + axisTick: "none", + axisLine: "none", + show: true, + axisLabel: { + padding: [0, 0, 10, -10], + verticalAlign: "bottom", + inside: true, + textStyle: {}, + formatter: function (value) { + return ( + "{a|" + (value / 10000).toLocaleString() + "}" + "{b|万tCO2}" + ); + }, + rich: { + a: { + fontSize: "16", + color: "rgba(0, 255, 240, 1)", + padding: [0, 6, 0, 0], + }, + b: { + color: "#fff", + fontSize: "12", + }, + }, + }, + data: [50000000, 22000000, 10000000, 5000000, 1], + }, + ], + series: [ + { + name: "", + type: "bar", + zlevel: 1, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgba(29, 169, 153, 1)", + }, + { + offset: 1, + color: "rgba(223, 243, 240, 1)", + }, + ]), + }, + barWidth: 8, + data: [50000000, 22000000, 10000000, 5000000, 200], + }, + { + name: "背景", + type: "bar", + barWidth: 10, + barGap: "-115%", + data: [50000000, 50000000, 50000000, 50000000, 50000000], + itemStyle: { + color: "rgba(5, 33, 31, 0.32)", + }, + }, + ], + }; + myChart.setOption(option); +} +const optionData = ref([ + { + name: "CCER", + value: 176, + }, + { + name: "绿电", + value: 288, + }, + { + name: "绿证", + value: 88, + }, +]); +const color = [ + "rgba(0, 140, 255, 1)", + "rgba(1, 225, 242, 1)", + "rgba(27, 255, 118, 1)", +]; +function setLabel() { + optionData.value.forEach((item, index) => { + item.itemStyle = { + color: color[index], + }; + item.label = { + normal: { + show: true, + color: color[index], + // position: "right", + padding: [0, -50], + // distance:-10, + offset: [0, 3], + formatter: [ + "{d|{d}%}", + // '{c|{c}}{b|台}', + "{b|{b}}", + ].join("\n"), // 用\n来换行 + rich: { + b: { + lineHeight: 30, + align: "left", + fontSize: 12, + color: "#fff", + }, + c: { + fontSize: 15, + // color: '#fff', + textShadowColor: "#1c90a6", + textShadowOffsetX: 0, + textShadowOffsetY: 2, + textShadowBlur: 5, + color: color[index], + }, + d: { + color: color[index], + fontSize: 18, + fontWeight: 600, + align: "left", + }, + }, + }, + }; + item.labelLine = { + normal: { + length2: 100, + lineStyle: { + width: 1, + color: color[index], + }, + }, + }; + }); +} +//碳中和 +function getCarbonNeutrality() { + setLabel(); + let myChart = echarts.init(document.getElementById("carbonNeutrality")); + let option = getPie3D(optionData.value, 0, 270, 26, 40, 1); + + // myChart.setOption(option); + // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption + option.series.push({ + name: "", //自己根据场景修改 + backgroundColor: "transparent", + type: "pie", + label: { + opacity: 1, + fontSize: 13, + lineHeight: 20, + }, + startAngle: -40, // 起始角度，支持范围[0, 360]。 + clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 + radius: ["20%", "60%"], + center: ["50%", "50%"], + data: optionData.value, + itemStyle: { + opacity: 0, //这里必须是0，不然2d的图会覆盖在表面 + }, + }); + myChart.setOption(option); + // bindListen(myChart); +} +//加载完dom执行 +onMounted(() => { + //碳趋势图表 + getCarbonTrends(); + //碳排放强度 + getCarbonIntensity(); + //各系统碳排放量统计 + getCarbonEmissionStatistics(); + //碳中和 + getCarbonNeutrality(); +}); + + +