From 0b0a63a5c4115653e24b8495869057f6ce127302 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 24 Jun 2022 09:39:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E5=88=86?= =?UTF-8?q?=E6=9E=90=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modules/visual/shijianchulifenxi.scss | 4 +- .../communityGovern/shijianchuli/chart.js | 31 +-- .../shijianchuli/lineOption.js | 108 ++++++++-- .../shijianchuli/shijianchulifenxi.vue | 204 +++++++++--------- 4 files changed, 209 insertions(+), 138 deletions(-) diff --git a/src/assets/scss/modules/visual/shijianchulifenxi.scss b/src/assets/scss/modules/visual/shijianchulifenxi.scss index 01f5d738..ca099bed 100644 --- a/src/assets/scss/modules/visual/shijianchulifenxi.scss +++ b/src/assets/scss/modules/visual/shijianchulifenxi.scss @@ -21,8 +21,8 @@ } .l_bottom { - height: calc(100vh - 200px - 355px); - margin-top: 20px; + height: calc(100vh - 200px - 365px); + margin-top: 0; } } diff --git a/src/views/modules/visual/communityGovern/shijianchuli/chart.js b/src/views/modules/visual/communityGovern/shijianchuli/chart.js index 8d19ca2d..f7c5dda5 100644 --- a/src/views/modules/visual/communityGovern/shijianchuli/chart.js +++ b/src/views/modules/visual/communityGovern/shijianchuli/chart.js @@ -120,21 +120,22 @@ 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}%` - ) - } + + // 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: { diff --git a/src/views/modules/visual/communityGovern/shijianchuli/lineOption.js b/src/views/modules/visual/communityGovern/shijianchuli/lineOption.js index 04b4f950..d02e4b20 100644 --- a/src/views/modules/visual/communityGovern/shijianchuli/lineOption.js +++ b/src/views/modules/visual/communityGovern/shijianchuli/lineOption.js @@ -1,4 +1,11 @@ import * as echarts from 'echarts' +let circleList = [ + 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFdklEQVRYhY1YTY/bRBh+/BHbiRN7l02bqst+st1dVT0gceXABYk7PfYPwIELv4IfABJ3euuBCxKCKxckBEKi2y1F6Xa3abTZT+fLHxnbaMZje+zE3Y70aiLPzPs888w778xEin/8EO9YJKGbVDEkrvhdWdSKBumGehGJReBVdVZyApsPk/roicSdi4aKb4sUEK38jeLEHIdVRQWOnsgLgORCLWsKzFUDqlmHXEvGRzMCMnEx6XmIgpCDRaU6saMnMTYfRpmMQgzIJdCiNTebqHc6kHUbMYkQBT7ikCReFBWypkNSZUS+A/f0FOOjMSdRtlgglikgypwCK8z0FQPWzgYkpQn/8grT3jFmo0ggjMxhrSWjsWqhcXcP9c4Yo5fH8AYugFDQOSVBx8apAqkzRQBXYd1bhnF7G8HVNZznV4hDhZNWuIkEQm4EkhLC3luGtrwEb9DF8MUV+560R7xmpFXMB1kCYu+1obc3MD7qY9qbAagDqHFTKwhQkBnicIbrgyEaqy6am9uQ5Fdwnp8LfaW0FpcgX3NzvcXARy/6cAchB9e5aZxEqhaEWVGiAQCftU97PuJZH617GzBdH5Njh4/JglKdi3i1XkNzbQuTNwO4A8LBjZJpXAWRAOHgnkBOgjtwoZgD5tM/ewripkHJMFMHuQr2fgehTzB+ORVmTUmYAJoAWgAsAHbJLN7W5H1z1agv6pP6LgZvYRdIkGsKVLOD64Mel1njM6fOGtxxg33rfLwNe3+DjXYOX+H0t64we0nYasnSjLrnWLq/CrnWZ3mDkygSsHdtRLMA/iXhYJqgQELAuvc+9r98BOPWeqbdnU+Ajc+PcfjdDxi+eC2Akywu/MsJ800xrp6epQTkwi5QmzYCZ8yJqYIKCYn6nTYefP1FATwt9Btto31y+TVh16jMN8UQMOWCAnKtgeDaK+SCnISGDx59CrW5PAeeLWhzmfVJ+xe3rMx8yzVTPE+KQSgpOmbD2cKMyBLTzoNK8LQkfcRkJWdKU9+SoolBKJeGS4gjlLZmbkrdupGA0rAqx+e+s1ImEPNVKR+riYX+6EYCoTeqHJ/7XkggRhwGqFk1IYqjQo4fdZ/dSGDUPRTyfij4iZlviiGQSAkkDKPZFJplCMBEyHABuo9/BZlWq0Dbuo9/yfrn4xMi1DfFEC4ossAmBpk4qC01CwdLnts9TE5Ocfjt9wicwRx44CRttE+SkHw+dpaRoL4phoCpZuDURl0HKx9tQVuiW6ac25MMd/l3F79/9Q1WP7uP1vY6l/0YvZ8PEIf07J9yc/nYRAnqU9F1XP/jiAoUCZApAZkO0Npq4+KvMz5YFRJWcuzSdXz90x8A/uTjIz5TnwOnBHIVWlu3mG+KUVoCCCQiOAd9KA0d5pohKJA6pVmSxsCQngAlG/K28ZwC1JfSMJjv/EaEVAFxq0QgLoHbfwlzfQdk2oN/4S3I7W+7D/gF01ckmOsduP3/mO/SJbW4BKkjGguKfgJ7fw3Df9/AO/OEwAxuvBGlshu3FFi7dxFcnjCf+bYsxEB6RUovCSGrr58NYO9FsHY3ob93Aee5w52rhQuHuHzi1rX3bOjtFfjnR/w6Fop3wXRceikt3/9TABX1TgOt7Q12unnnV5icjBB65fhJlkExAHOtBaO9zOQfdV/BPZ1yUlFJgUgkAIFA+V2QkLF2LRjt25BVC2HgI/LpuyCZiaTIkHUdiqYjIkP4F2dcsaiUDefeBSKBRQeIPFerpgJz3YRq1NlDhAlJIhDPxeR4AjKZm2U58BblgfTNFvPnWeHqLMQHQCYSnGd+xeM0fwNWAGbPMv42rHqelx+gVa/lcnnba1gkl5Wq53m587v8NyCOXfR7vgD4H8khvGFl000HAAAAAElFTkSuQmCC', + 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhCAYAAAC4JqlRAAAFb0lEQVRYhY1YW28bRRT+ZtbrS24mjVu3btPUDoiqFIEQ4gUh8dKX8hf4A/wT+Am88cA7b5GgrxVPFIREL0rapHHbOHGcxM7Fa3u9c9BMZrZn1+umI43W2j2Xb75z5pwZi89/JLznEExMTFGhKb+njtyUD+KCZxaILOfTnvGIAfj3z5/hmjGcnpjyLosBPtPvtB+yfsxIMBCuQWY4komnD09eRVHMoISc1R9jTH0EahcDhIisM5V6mhmugfz75t35qlgOyJTTxJQ3MCcqqIo8yhRBIcQQCmOrmYOPgvAgaYQedbCnXuPUgkhPYsBiBjjNzrGnp1hEUd7CCiTmqIsjtYsmnRllyfSMQTELKa5iQVTxsXcZp6qJJh0gAAwrbjgQWpc4gLTznKxjUSyhgR660Qu8hDLv8w5cCkBEZ4joBU4h0fNWsSjr+IQWsKm2cDQlYQ2AdJKdO2+gIi5hhV6jpXYRAijpHLIzlwXAZAMQ6gBFGziWVxGIG2hIgW21iQ6TFe7JGYhjLmuY187VS7SoYwxr5wU78xaEZ+VhaY2Mc2AEYKi/q10MxRgtHUI5wFDtoGd14qTMpTNeFOHLGupqD23qmBVp58XUzFsWOICxdT5g4AR1EFAJbW2TDvGYBnFSCs5AzIJcRZVGGKtX6AOYsasu2d8lxoafAhDalfPwmOTUtsQi5rXt6DFe8zqSTEIfnphBNdrAG+sgb1fuAMzaZ7FxG40rNaxo5fYOtjefYZOtXrCtZkKjmuh4H+E6fLQQGrbEBACvjjKFGFHXCMxaAJyB2cvXcOPre/h+dgE33SpW7wCffoXmnw/w637LrJBYWExeUBdn2rb2Ea1j3wGQiV0wgzKdmAKSs9PnIOY/QOXb7/ADd+7G3AJu6m9ahoUpz3ZNztieQZn7lJwB4WOGjg2NcS1gIPJffoN7+SIW087d0N+0jJNPbVmpbQvfMCs4A2+TUKKAU0PZREXUhipV3J3m3A0rk2N6MmZa25YGWJyEMqUvSLGkTE0/j4WLAPgFI5Opz2zHIw2AbFDSbfW8k4U4uQhAODIymfrMdiYAgsIIcyZuxDpY5MrsYRtPLwJw2MYzm/1OT8UNSNtWplglWnC8YhqjL+bNvlestrsKN3r0EA/sCqeu/tFD/OHkmb4Bom1rH/yAIhkaQh89MY+5RGN5W9sH3QPsPfwdPwd9tNPOg/75Ny1jC9LQ6oYOhLHdN/0g0Q1jBlQTPe8u6qIMSb2J2m4q3M42Nn/7BT/d/gx3KtXzetDZQ/PZv3hCyvT+vp2B1TVMaJsij0K0HgMwIBIAKMCYBmjLZVSinqlWI9Z0XHmNSGH09B/8BeBvq897QcAAxCzIZVzWtrWPLAAOhFIbaMm7qMgaimrHKPNEdeV1eEE3HHAGtC1RRDH6D+vsRAQHgG8VRQOMqY0tUcOHIsAbOjJG0rX9XeeBIZ9iEULUUFVtPNe2kTqkJkLgDOlckHm8kqtYVlvYoQMDImKrfPeJyNIuluDJOmrUxSttk23LRAjcEckdErSQUM/Rlg0or45bqowDtWkMhLy2pw+lfOvKBsryEpbUIV7a45irC/GJOM2AYB+MoFakE/TlMla8L1CmQxypFk4MuZNVVOn+J6+Z45xuWMNoG09o3yTkGMnjOTJ3AYvn252xj9NoH09lHQtiCVdyVdwifScYYYjIynqmxRSEjwKNcUxdbKkXhjGVqoYqlXMTu4BnO88LqbZwiC10RQmeuI5ZUUAJecvCGIqOEag3OKMgEefM21F6F5hh72xkr2eJozPLD1AAQc9NELIup9x4VkOCu5ZN3A3dC+6MGZt2W06Pd92G3QITY9r1PEHTe/43wHWzfk8OAP8D28XBfaJJ48oAAAAASUVORK5CYII=' +] +let className = ['1号停车场', '2号停车场', '3号停车场', '4号停车场', '5号停车场', '6号停车场', '7号停车场'] +let serviceCount = [50, 28, 17, 38, 90, 73, 39] + export function lineOption () { return { @@ -11,6 +18,13 @@ export function lineOption () { } } }, + // grid: { + // left: '5%', + // right: '5%', + // bottom: '5%', + // top: '10%', + // containLabel: true + // }, xAxis: { type: 'category', // boundaryGap: false, @@ -25,7 +39,8 @@ export function lineOption () { lineStyle: { color: '#0c4b59' } - } + }, + // data: className }, yAxis: { nameTextStyle: { @@ -58,29 +73,82 @@ export function lineOption () { } } }, + // series: [ + // { + // name: '项目数', + // type: 'line', + // smooth: true, + // barWidth: 15, + // areaStyle: {}, + // itemStyle: { + // color: new echarts.graphic.LinearGradient( + // 0, 1, 0, 0, + // [ + // { offset: 0, color: 'rgba(121, 55, 255, 0)' }, + // { offset: 1, color: '#6339FF' } + // ] + // ) + // } + // }, + // // { + // // data: [820, 932, 901, 934, 1290, 1330, 1320], + // // type: 'line', + // // areaStyle: {} + // // } + // ] series: [ { - name: '项目数', - type: 'line', - smooth: true, - barWidth: 15, - areaStyle: {}, - itemStyle: { - color: new echarts.graphic.LinearGradient( - 0, 1, 0, 0, - [ - { offset: 0, color: 'rgba(121, 55, 255, 0)' }, - { offset: 1, color: '#6339FF' } - ] - ) - } + name: '', + type: 'bar', + zlevel: 1, + itemStyle: { + + normal: { + barBorderRadius: 0, + color: function (params) { + // 大于等于50%的是黄色 反之为蓝色 + var colorList = [ + ['rgba(252, 210, 152, .2)', 'rgba(252, 210, 152, 1)'], + ['rgba(36, 253, 231, .2)', 'rgba(36, 253, 231, 1)'], + ]; + var colorItem + + colorItem = colorList[1]; + + // 设置线条渐变色 + return new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ + offset: 0, + color: colorItem[0] + }, + { + offset: 1, + color: colorItem[1] + } + ], false); + } + + }, + }, + barWidth: 4, + // data: serviceCount + }, + + { + name: 'XXX', + type: 'pictorialBar', + symbol: function (params, value) { + // 设置图片 + + return circleList[1] }, - // { - // data: [820, 932, 901, 934, 1290, 1330, 1320], - // type: 'line', - // areaStyle: {} - // } + symbolPosition: 'end', + symbolSize: [30, 30], + symbolOffset: [0, -12], + z: 20, + // data: serviceCount + } ] + } } diff --git a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue index 44c35ded..c3a5c819 100644 --- a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue +++ b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue @@ -590,6 +590,7 @@ export default { xAxis: { data: this.lineXaxis }, series: [ { data: this.lineSeriesData }, + { data: this.lineSeriesData }, ] }, true) @@ -792,6 +793,7 @@ export default { let hoveredIndex = '' // 监听点击事件，实现选中效果（单选） myChart.on('click', (params) => { + debugger // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。 const isSelected = !this[optionName].series[params.seriesIndex].pieStatus .selected @@ -834,107 +836,107 @@ export default { 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]) - // }) + 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]) + }) },