From 33b8479b1cdeb40fae1c3500cb2a3997ab3d29c2 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Thu, 23 Jun 2022 17:16:44 +0800 Subject: [PATCH] echart3d --- package.json | 1 + src/assets/img/shuju/3d-pid-bg.png | Bin 0 -> 19139 bytes src/assets/scss/modules/visual/search_1.scss | 1 + .../communityGovern/shijianchuli/chart.js | 275 ++++++++++++++ .../shijianchuli/shijianchulifenxi copy 2.vue | 328 ++++++++++++++++ .../shijianchuli/shijianchulifenxi.vue | 352 ++++++++++++++++-- 6 files changed, 931 insertions(+), 26 deletions(-) create mode 100644 src/assets/img/shuju/3d-pid-bg.png create mode 100644 src/views/modules/visual/communityGovern/shijianchuli/chart.js create mode 100644 src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy 2.vue diff --git a/package.json b/package.json index 3def21d39..9fcede3be 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "babel-eslint": "^8.0.1", "babel-plugin-component": "^1.1.1", "echarts": "^5.2.2", + "echarts-gl": "^2.0.9", "element-theme": "^2.0.1", "element-ui": "^2.13.0", "file-saver": "^2.0.5", diff --git a/src/assets/img/shuju/3d-pid-bg.png b/src/assets/img/shuju/3d-pid-bg.png new file mode 100644 index 0000000000000000000000000000000000000000..4519b38e8527cfdb031a82cbfe87870d9cd4d495 GIT binary patch literal 19139 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%0AJ*L;1C@Bk59=L)iUv^(L0d3Fh<>;wIqAMV;jTaA zem~xG$a;3Znpl6G?jLvbXULSB_*b||vCsX;g9h*ExyUo1Q*13t6zD{dbZL%4;t64; zJ;D*H5&iP1MYzP-u!IpJ5CBtnkXsFj0aKr_^pYO!a-R)^BD@g% z!qNKSOZ6PoOAOe65iYT5ThuOP37u*r0ZvF4Q5!4~B&W2;7POF%VaZI9u-6emJBUntnJ%Ml; zURe4$0+vdhRpu|&Ky4~w0D(rjz6jI{>u3EJYK+22+X;)%P%X){5hX4v2p|+2O`LVt zakck8+JX}wM;z8bH50-ow0_j)rpPg#%?jP1S8oS5XEu$U=SwD8z?WX9GU zs$|3M-VkTP?N}s`*_p+mz;tVm>R^F`YShsHfdvLpOlcc3!fKVCvs4fSWI0!G(mms} zqY-Xw=u{!P2pmCighP=>0GoEZ`&0q2=EMZ{U@{uGF^dOm zMzK5$1|gDwgvZig_zTN7G9&_qZ--*V{gH!+bMBrzWAz1hZoz$@E6yoqi>T7T!us@C zClu?i-V&PYA5~Y56>&%NP=YGCJLCqp!180<5s7ifQRHC-^JAj;6gS42f7jgbYO+sY z#(Eq~30#~k2httx`1!Zxz$AOQ|EtwES8ls|+C3*Haf?4E0QoNOzKgb8opSJS(cQOL leD?lZTo((TKCk~TzyJy&Ab$uE&i?=a002ovPDHLkV1lJ?Mk)XR literal 0 HcmV?d00001 diff --git a/src/assets/scss/modules/visual/search_1.scss b/src/assets/scss/modules/visual/search_1.scss index 55aaef76f..ffb46b67f 100644 --- a/src/assets/scss/modules/visual/search_1.scss +++ b/src/assets/scss/modules/visual/search_1.scss @@ -24,6 +24,7 @@ display: flex; align-items: center; margin-left:40px; + z-index: 10; .second-select { diff --git a/src/views/modules/visual/communityGovern/shijianchuli/chart.js b/src/views/modules/visual/communityGovern/shijianchuli/chart.js new file mode 100644 index 000000000..8d19ca2d2 --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianchuli/chart.js @@ -0,0 +1,275 @@ +/** + * 绘制3d图 + * @param pieData 总数据 + * @param internalDiameterRatio:透明的空心占比 + * @param distance 视角到主体的距离 + * @param alpha 旋转角度 + * @param pieHeight 立体的高度 + * @param opacity 饼或者环的透明度 + */ + const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) => { + const series = [] + let sumValue = 0 + let startValue = 0 + let endValue = 0 + let legendData = [] + let legendBfb = [] + const k = 1 - internalDiameterRatio + pieData.sort((a, b) => { + return b.value - a.value + }) + // 为每一个饼图数据，生成一个 series-surface 配置 + for (let i = 0; i < pieData.length; i++) { + sumValue += pieData[i].value + const seriesItem = { + name: + typeof pieData[i].name === 'undefined' + ? `series${i}` + : pieData[i].name, + type: 'surface', + parametric: true, + wireframe: { + show: false + }, + pieData: pieData[i], + pieStatus: { + selected: false, + hovered: false, + k: k + }, + center: ['10%', '50%'] + } + if (typeof pieData[i].itemStyle !== 'undefined') { + const itemStyle = {} + itemStyle.color = + typeof pieData[i].itemStyle.color !== 'undefined' + ? pieData[i].itemStyle.color + : opacity + itemStyle.opacity = + typeof pieData[i].itemStyle.opacity !== 'undefined' + ? pieData[i].itemStyle.opacity + : opacity + seriesItem.itemStyle = itemStyle + } + series.push(seriesItem) + } + + // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数， + // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。 + legendData = [] + legendBfb = [] + for (let i = 0; i < series.length; i++) { + endValue = startValue + series[i].pieData.value + series[i].pieData.startRatio = startValue / sumValue + series[i].pieData.endRatio = endValue / sumValue + series[i].parametricEquation = getParametricEquation( + series[i].pieData.startRatio, + series[i].pieData.endRatio, + false, + false, + k, + series[i].pieData.value + ) + startValue = endValue + const bfb = fomatFloat(series[i].pieData.value / sumValue, 4) + legendData.push({ + name: series[i].name, + value: bfb + }) + legendBfb.push({ + name: series[i].name, + value: bfb + }) + } + const boxHeight = getHeight3D(series, pieHeight) // 通过pieHeight设定3d饼/环的高度，单位是px + // 准备待返回的配置项，把准备好的 legendData、series 传入。 + const option = { + legend: { + show: false, + data: legendData, + orient: 'vertical', + left: 10, + top: 10, + itemGap: 10, + textStyle: { + color: '#A1E2FF' + }, + icon: 'circle', + formatter: function (param) { + const item = legendBfb.filter(item => item.name === param)[0] + const bfs = fomatFloat(item.value * 100, 2) + '%' + return `${item.name} ${bfs}` + } + }, + labelLine: { + show: true, + lineStyle: { + color: '#fff' + } + }, + label: { + show: true, + position: 'outside', + formatter: '{b} \n{c} {d}%' + }, + tooltip: { + backgroundColor: '#033b77', + borderColor: '#21f2c4', + textStyle: { + color: '#fff', + fontSize: 13 + }, + formatter: params => { + if ( + params.seriesName !== 'mouseoutSeries' && + params.seriesName !== 'pie2d' + ) { + const bfb = ( + (option.series[params.seriesIndex].pieData.endRatio - + option.series[params.seriesIndex].pieData.startRatio) * + 100 + ).toFixed(2) + return ( + `${params.seriesName}
` + + `` + + `${bfb}%` + ) + } + } + }, + xAxis3D: { + min: -1, + max: 1 + }, + yAxis3D: { + min: -1, + max: 1 + }, + zAxis3D: { + min: -1, + max: 1 + }, + grid3D: { + show: false, + boxHeight: boxHeight, // 圆环的高度 + viewControl: { + // 3d效果可以放大、旋转等，请自己去查看官方配置 + alpha, // 角度 + beta: -40, + distance, // 调整视角到主体的距离，类似调整zoom + rotateSensitivity: 0, // 设置为0无法旋转 + zoomSensitivity: 0, // 设置为0无法缩放 + panSensitivity: 0, // 设置为0无法平移 + autoRotate: false // 自动旋转 + } + }, + series: series + } + return option +} + +/** + * 生成扇形的曲面参数方程，用于 series-surface.parametricEquation + */ +const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h) => { + // 计算 + const midRatio = (startRatio + endRatio) / 2 + const startRadian = startRatio * Math.PI * 2 + const endRadian = endRatio * Math.PI * 2 + const midRadian = midRatio * Math.PI * 2 + // 如果只有一个扇形，则不实现选中效果。 + if (startRatio === 0 && endRatio === 1) { + isSelected = false + } + // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3） + k = typeof k !== 'undefined' ? k : 1 / 3 + // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0） + const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0 + const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0 + // 计算高亮效果的放大比例（未高亮，则比例为 1） + const hoverRate = isHovered ? 1.05 : 1 + // 返回曲面参数方程 + return { + u: { + min: -Math.PI, + max: Math.PI * 3, + step: Math.PI / 32 + }, + v: { + min: 0, + max: Math.PI * 2, + step: Math.PI / 20 + }, + x: function (u, v) { + if (u < startRadian) { + return ( + offsetX + + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate + ) + } + if (u > endRadian) { + return ( + offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate + ) + } + return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate + }, + y: function (u, v) { + if (u < startRadian) { + return ( + offsetY + + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate + ) + } + if (u > endRadian) { + return ( + offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate + ) + } + return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate + }, + z: function (u, v) { + if (u < -Math.PI * 0.5) { + return Math.sin(u) + } + if (u > Math.PI * 2.5) { + return Math.sin(u) * h * 0.1 + } + return Math.sin(v) > 0 ? 1 * h * 0.1 : -1 + } + } +} + +/** + * 获取3d丙图的最高扇区的高度 + */ +const getHeight3D = (series, height) => { + series.sort((a, b) => { + return b.pieData.value - a.pieData.value + }) + return (height * 25) / series[0].pieData.value +} + +/** + * 格式化浮点数 + */ +const fomatFloat = (num, n) => { + let f = parseFloat(num) + if (isNaN(f)) { + return false + } + f = Math.round(num * Math.pow(10, n)) / Math.pow(10, n) // n 幂 + let s = f.toString() + let rs = s.indexOf('.') + // 判定如果是整数，增加小数点再补0 + if (rs < 0) { + rs = s.length + s += '.' + } + while (s.length <= rs + n) { + s += '0' + } + return s +} + +export { getPie3D, getParametricEquation } \ No newline at end of file diff --git a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy 2.vue b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy 2.vue new file mode 100644 index 000000000..8ec4d06f2 --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy 2.vue @@ -0,0 +1,328 @@ + + + + + \ No newline at end of file diff --git a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue index 301a60a96..a6baa08f1 100644 --- a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue +++ b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue @@ -23,7 +23,7 @@ :key="item.value" :label="item.label" :value="item.value" - @click.native="handleChangeDate(item.value)"> + @click.native="handleChangeDate(item.value,true)"> @@ -51,22 +51,26 @@
- +
+ + +
+
-
+ +
- + --> { + + item.itemStyle = { + color: color[index] + } + item.label = { + normal: { + show: true, + color: color[index], + formatter: [ + '{d|{d}%}', + '{b|{b}}' + + + ].join('\n'), // 用\n来换行 + rich: { + b: { + color: '#fff', + lineHeight: 25, + align: 'left', + fontSize: 13, + marginTop: 20 + }, + c: { + fontSize: 22, + color: '#fff', + textShadowColor: '#1c90a6', + textShadowOffsetX: 0, + textShadowOffsetY: 2, + textShadowBlur: 5 + }, + d: { + color: color[index], + fontSize: 22, + align: 'left' + } + } + } + } + item.labelLine = { + normal: { + length: 30, + length2: 80, + lineStyle: { + width: 1, + color: 'rgba(255,255,255,0.7)' + } + } + } + item.labelLayout = function (params) { + const isLeft = params.labelRect.x < myChart.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + return { + labelLinePoints: points + }; + } + }) + }, + + // 图表初始化 + initChart () { + this.$nextTick(() => { + // let statusChart = echarts.init(document.getElementById('cityGreenLand-charts')); + this.statusChart = echarts.init(document.getElementById('cityGreenLand')); + // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细 + this.option = getPie3D(this.optionData, 0.8, 300, 28, 22, 0.4) + this.statusChart.setOption(this.option) + // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption + this.option.series.push({ + name: '', //自己根据场景修改 + backgroundColor: 'transparent', + type: 'pie', + label: { + opacity: 1, + fontSize: 13, + lineHeight: 20 + }, + startAngle: 40, // 起始角度，支持范围[0, 360]。 + clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式 + radius: ['30%', '35%'], + center: ['50%', '50%'], + data: this.optionData, + itemStyle: { + opacity: 0 //这里必须是0，不然2d的图会覆盖在表面 + } + }) + this.statusChart.setOption(this.option) + this.bindListen(this.statusChart) + }) + + }, + // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。 + // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton + bindListen (myChart, optionName = 'option') { + let selectedIndex = '' + let hoveredIndex = '' + // 监听点击事件，实现选中效果（单选） + myChart.on('click', (params) => { + // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。 + const isSelected = !this[optionName].series[params.seriesIndex].pieStatus + .selected + const isHovered = + this[optionName].series[params.seriesIndex].pieStatus.hovered + const k = this[optionName].series[params.seriesIndex].pieStatus.k + const startRatio = + this[optionName].series[params.seriesIndex].pieData.startRatio + const endRatio = + this[optionName].series[params.seriesIndex].pieData.endRatio + // 如果之前选中过其他扇形，将其取消选中（对 option 更新） + if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) { + this[optionName].series[ + selectedIndex + ].parametricEquation = getParametricEquation( + this[optionName].series[selectedIndex].pieData.startRatio, + this[optionName].series[selectedIndex].pieData.endRatio, + false, + false, + k, + this[optionName].series[selectedIndex].pieData.value + ) + this[optionName].series[selectedIndex].pieStatus.selected = false + } + // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新） + this[optionName].series[ + params.seriesIndex + ].parametricEquation = getParametricEquation( + startRatio, + endRatio, + isSelected, + isHovered, + k, + this[optionName].series[params.seriesIndex].pieData.value + ) + this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected + // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex + selectedIndex = isSelected ? params.seriesIndex : null + // 使用更新后的 option，渲染图表 + myChart.setOption(this[optionName]) + }) + // 监听 mouseover，近似实现高亮（放大）效果 + // myChart.on('mouseover', (params) => { + // // 准备重新渲染扇形所需的参数 + // let isSelected + // let isHovered + // let startRatio + // let endRatio + // let k + // // 如果触发 mouseover 的扇形当前已高亮，则不做操作 + // if (hoveredIndex === params.seriesIndex) { + // // 否则进行高亮及必要的取消高亮操作 + // } else { + // // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新） + // if (hoveredIndex !== '') { + // // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。 + // isSelected = this[optionName].series[hoveredIndex].pieStatus.selected + // isHovered = false + // startRatio = this[optionName].series[hoveredIndex].pieData.startRatio + // endRatio = this[optionName].series[hoveredIndex].pieData.endRatio + // k = this[optionName].series[hoveredIndex].pieStatus.k + // // 对当前点击的扇形，执行取消高亮操作（对 option 更新） + // this[optionName].series[ + // hoveredIndex + // ].parametricEquation = getParametricEquation( + // startRatio, + // endRatio, + // isSelected, + // isHovered, + // k, + // this[optionName].series[hoveredIndex].pieData.value + // ) + // this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered + // // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 + // hoveredIndex = '' + // } + // // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新） + // if ( + // params.seriesName !== 'mouseoutSeries' && + // params.seriesName !== 'pie2d' + // ) { + // // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 + // isSelected = + // this[optionName].series[params.seriesIndex].pieStatus.selected + // isHovered = true + // startRatio = + // this[optionName].series[params.seriesIndex].pieData.startRatio + // endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio + // k = this[optionName].series[params.seriesIndex].pieStatus.k + // // 对当前点击的扇形，执行高亮操作（对 option 更新） + // this[optionName].series[ + // params.seriesIndex + // ].parametricEquation = getParametricEquation( + // startRatio, + // endRatio, + // isSelected, + // isHovered, + // k, + // this[optionName].series[params.seriesIndex].pieData.value + 60 + // ) + // this[optionName].series[ + // params.seriesIndex + // ].pieStatus.hovered = isHovered + // // 记录上次高亮的扇形对应的系列号 seriesIndex + // hoveredIndex = params.seriesIndex + // } + // // 使用更新后的 option，渲染图表 + // myChart.setOption(this[optionName]) + // } + // }) + // // 修正取消高亮失败的 bug + // myChart.on('globalout', () => { + // // 准备重新渲染扇形所需的参数 + // let isSelected + // let isHovered + // let startRatio + // let endRatio + // let k + // if (hoveredIndex !== '') { + // // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 + // isSelected = this[optionName].series[hoveredIndex].pieStatus.selected + // isHovered = false + // k = this[optionName].series[hoveredIndex].pieStatus.k + // startRatio = this[optionName].series[hoveredIndex].pieData.startRatio + // endRatio = this[optionName].series[hoveredIndex].pieData.endRatio + // // 对当前点击的扇形，执行取消高亮操作（对 option 更新） + // this[optionName].series[ + // hoveredIndex + // ].parametricEquation = getParametricEquation( + // startRatio, + // endRatio, + // isSelected, + // isHovered, + // k, + // this[optionName].series[hoveredIndex].pieData.value + // ) + // this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered + // // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 + // hoveredIndex = '' + // } + // // 使用更新后的 option，渲染图表 + // myChart.setOption(this[optionName]) + // }) + + }, + handleChangeAgency () { let obj = this.$refs["myCascader"].getCheckedNodes()[0].data if (obj) { @@ -719,7 +990,7 @@ export default { this.userId = id; }, userId () { - // this.getApiData(); + window.scrollTo(0, 0); }, }, @@ -737,4 +1008,33 @@ export default { scoped > + +