From e2db756be08eb63f8a7b7f5e5eaf51eb24a72555 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Thu, 23 Jun 2022 13:57:53 +0800 Subject: [PATCH 1/6] 11 --- .../shijianchuli/lineOption copy.js | 86 ++ .../shijianchuli/pieOption copy.js | 183 +++++ .../shijianchuli/shijianchulifenxi copy.vue | 740 ++++++++++++++++++ 3 files changed, 1009 insertions(+) create mode 100644 src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js create mode 100644 src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js create mode 100644 src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy.vue diff --git a/src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js b/src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js new file mode 100644 index 00000000..04b4f950 --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js @@ -0,0 +1,86 @@ +import * as echarts from 'echarts' +export function lineOption () { + + return { + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + label: { + backgroundColor: '#6a7985' + } + } + }, + xAxis: { + type: 'category', + // boundaryGap: false, + axisLabel: { + color: '#8ec7dc', + fontSize: 16 + }, + axisTick: { + show: false + }, + axisLine: { + lineStyle: { + color: '#0c4b59' + } + } + }, + yAxis: { + nameTextStyle: { + color: '#8ec7dc', + fontSize: 18 + }, + splitNumber: 4, + minInterval: 1, + show: true, + type: 'value', + axisLabel: { + color: '#8ec7dc', + fontSize: 18 + }, + axisTick: { + show: false + }, + splitLine: { + lineStyle: { + color: ['#145968'], + type: 'dotted' + } + }, + axisLine: { + show: true, + symbol: ['none', 'arrow'], + symbolOffset: [0, 15], + lineStyle: { + color: '#0c4b59' + } + } + }, + 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: {} + // } + ] + + } +} diff --git a/src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js b/src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js new file mode 100644 index 00000000..5eb83bad --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js @@ -0,0 +1,183 @@ + +export function pieOption (_charts) { +const center= ['50%', '170px'] + return { + title: { + text: '0', + top: 140, + left: 'center', + textStyle: { + width: '100%', + fontSize: 32, + color: '#FFFFFF', + fontWeight: 400 + }, + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 20, + color: '#fff', + fontWeight: 400 + } + }, + tooltip: { + show: false + }, + // legend: { + // top: 350, + // bottom: 0, + // itemWidth: 20, + // itemHeight: 10, + // textStyle: { + // color: '#D2E7FF', + // fontSize: 16, + // lineHeight: 20, + // }, + + // }, + series: [ + // 外侧圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + // tooltip: { + // }, + center: center, + radius: ['58%', '58.3%'], + label: { + normal: { + show: false + } + }, + labelLine: { + normal: { + show: false + } + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' + } + } + } + ] + }, + + // 突出的 + { + hoverAnimation: false, + // name: 'Access From', + type: 'pie', + center: center, + radius: ['35%', '48%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + selectedMode: 'single', + left: 'center', + width: 400, + label: { + // show: false, + position: 'outside', + alignTo: 'edge', + // formatter: '{a|{c}}\n\n{name|{b}}', + formatter: '{a|{c}%}\n{r|}\n{name|{b}}', + minMargin: 5, + edgeDistance: 1, + lineHeight: 15, + color: '#fff', + fontSize: 12, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 30, + color: '#fff', + padding: [0, 6, 6, 6] + }, + r: { + backgroundColor: 'auto', + borderRadius: 6, + width: 6, + height: 6, + // padding: [3, 3, 0, -12] + } + } + }, + labelLine: { + show: false, + smooth: 0.2, + length: 30, + length2: 0, + maxSurfaceAngle: 80 + }, + labelLayout: function (params) { + + const isLeft = params.labelRect.x < _charts.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + if (points) { + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + } + + return { + labelLinePoints: points + }; + }, + itemStyle: { + color:function(params) { + //自定义颜色 + var colorList = [ '#FAC126', '#3DDA83']; + return colorList[params.dataIndex] + } + }, + data: [], + + }, + // 中间圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + center: center, + // tooltip: { + // }, + radius: ['0%', '25%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } +} diff --git a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy.vue b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy.vue new file mode 100644 index 00000000..301a60a9 --- /dev/null +++ b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy.vue @@ -0,0 +1,740 @@ + + + + + + + + From 33b8479b1cdeb40fae1c3500cb2a3997ab3d29c2 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Thu, 23 Jun 2022 17:16:44 +0800 Subject: [PATCH 2/6] 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 3def21d3..9fcede3b 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 55aaef76..ffb46b67 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 00000000..8d19ca2d --- /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 00000000..8ec4d06f --- /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 301a60a9..a6baa08f 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 > + + From cbebffad7667b569147cc90fec6123e7aca9686a Mon Sep 17 00:00:00 2001 From: 13176889840 <13176889840@163.com> Date: Thu, 23 Jun 2022 17:18:28 +0800 Subject: [PATCH 3/6] dd --- src/views/components/resiSearch.vue | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/views/components/resiSearch.vue b/src/views/components/resiSearch.vue index ddbd29fa..78da43f1 100644 --- a/src/views/components/resiSearch.vue +++ b/src/views/components/resiSearch.vue @@ -173,6 +173,7 @@ size="small" clearable class="resi-cell-select" + :collapse-tags="n.multiSelect == 1 ? true : false" :multiple="n.multiSelect == 1 ? true : false" > Date: Fri, 24 Jun 2022 08:36:16 +0800 Subject: [PATCH 4/6] 11 --- .../modules/visual/shijianchulifenxi.scss | 40 +++++---- .../shijianchuli/shijianchulifenxi.vue | 6 +- src/views/modules/visual/cpts/tb.vue | 90 +++++++++---------- 3 files changed, 69 insertions(+), 67 deletions(-) diff --git a/src/assets/scss/modules/visual/shijianchulifenxi.scss b/src/assets/scss/modules/visual/shijianchulifenxi.scss index bd965572..01f5d738 100644 --- a/src/assets/scss/modules/visual/shijianchulifenxi.scss +++ b/src/assets/scss/modules/visual/shijianchulifenxi.scss @@ -35,25 +35,7 @@ } .l_bottom { - .bottom_label { - position: relative; - padding-left: 40px; - font-size: 16px; - font-weight: 500; - color: #fff; - } - .bottom_label::after { - content: ''; - position: absolute; - top: 50%; - left: 20px; - width: 12px; - height: 12px; - box-sizing: border-box; - margin-top: -6px; - background: #2865fa; - border-radius: 50%; - } + > span { font-size: 18px; font-family: PingFang SC; @@ -66,6 +48,26 @@ } } +.bottom_label { + position: relative; + padding-left: 40px; + font-size: 16px; + font-weight: 500; + color: #fff; +} +.bottom_label::after { + content: ''; + position: absolute; + top: 50%; + left: 20px; + width: 12px; + height: 12px; + box-sizing: border-box; + margin-top: -6px; + background: #2865fa; + border-radius: 50%; +} + .g-r { .m-tb { diff --git a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue index a6baa08f..44c35ded 100644 --- a/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue +++ b/src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue @@ -47,6 +47,8 @@
+
事件总览
- - +
+ - - - +
+ {{ item }}
+
{{ item }}
- - - + + + {{ index + 1 }}
- {{ btn }} - {{ item.name }} + {{ btn }} + {{ item.name }}
-
+
加载中
-
+
- +
@@ -131,20 +129,20 @@ export default { default: false, }, }, - data() { + data () { return {}; }, watch: {}, - mounted() {}, + mounted () { }, - created() {}, + created () { }, methods: { - handleClickBtn(index, type) { + handleClickBtn (index, type) { this.$emit("operate", index, type); }, - handleClickPeople(item) { + handleClickPeople (item) { this.$router.push({ path: `/main-shuju/visual-basicinfo-people/${item.uid}`, }); @@ -193,7 +191,7 @@ export default { box-sizing: border-box; text-align: center; border: none; - padding: 10px 5px; + padding: 20px 5px; > div { overflow: hidden; From 0b0a63a5c4115653e24b8495869057f6ce127302 Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 24 Jun 2022 09:39:16 +0800 Subject: [PATCH 5/6] =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?= =?UTF-8?q?=E5=88=86=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]) + }) }, From 58a4a04a37508867d670ff3a4936fb86378dbe3d Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 24 Jun 2022 16:13:47 +0800 Subject: [PATCH 6/6] =?UTF-8?q?=E8=BF=98=E5=8E=9F=E5=9B=BE=E8=A1=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../shijianchuli/lineOption copy.js | 86 ----- .../shijianchuli/pieOption copy.js | 183 --------- .../communityGovern/shijianchuli/pieOption.js | 311 +++++++-------- .../shijianchuli/shijianchulifenxi.vue | 358 ++---------------- 4 files changed, 183 insertions(+), 755 deletions(-) delete mode 100644 src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js delete mode 100644 src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js diff --git a/src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js b/src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js deleted file mode 100644 index 04b4f950..00000000 --- a/src/views/modules/visual/communityGovern/shijianchuli/lineOption copy.js +++ /dev/null @@ -1,86 +0,0 @@ -import * as echarts from 'echarts' -export function lineOption () { - - return { - tooltip: { - trigger: 'axis', - axisPointer: { - type: 'cross', - label: { - backgroundColor: '#6a7985' - } - } - }, - xAxis: { - type: 'category', - // boundaryGap: false, - axisLabel: { - color: '#8ec7dc', - fontSize: 16 - }, - axisTick: { - show: false - }, - axisLine: { - lineStyle: { - color: '#0c4b59' - } - } - }, - yAxis: { - nameTextStyle: { - color: '#8ec7dc', - fontSize: 18 - }, - splitNumber: 4, - minInterval: 1, - show: true, - type: 'value', - axisLabel: { - color: '#8ec7dc', - fontSize: 18 - }, - axisTick: { - show: false - }, - splitLine: { - lineStyle: { - color: ['#145968'], - type: 'dotted' - } - }, - axisLine: { - show: true, - symbol: ['none', 'arrow'], - symbolOffset: [0, 15], - lineStyle: { - color: '#0c4b59' - } - } - }, - 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: {} - // } - ] - - } -} diff --git a/src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js b/src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js deleted file mode 100644 index 5eb83bad..00000000 --- a/src/views/modules/visual/communityGovern/shijianchuli/pieOption copy.js +++ /dev/null @@ -1,183 +0,0 @@ - -export function pieOption (_charts) { -const center= ['50%', '170px'] - return { - title: { - text: '0', - top: 140, - left: 'center', - textStyle: { - width: '100%', - fontSize: 32, - color: '#FFFFFF', - fontWeight: 400 - }, - itemGap: 5, - subtext: '总数', - subtextStyle: { - fontSize: 20, - color: '#fff', - fontWeight: 400 - } - }, - tooltip: { - show: false - }, - // legend: { - // top: 350, - // bottom: 0, - // itemWidth: 20, - // itemHeight: 10, - // textStyle: { - // color: '#D2E7FF', - // fontSize: 16, - // lineHeight: 20, - // }, - - // }, - series: [ - // 外侧圆环 - { - type: 'pie', - // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 - startAngle: 0, - hoverAnimation: false, - // tooltip: { - // }, - center: center, - radius: ['58%', '58.3%'], - label: { - normal: { - show: false - } - }, - labelLine: { - normal: { - show: false - } - }, - data: [{ - value: 360, - itemStyle: { - normal: { - color: 'rgba(40, 101, 250, 0)', - width:0, - borderColor: 'rgba(40, 101, 250, 0.5)', - borderWidth: 1, - borderType: 'dotted' - } - } - } - ] - }, - - // 突出的 - { - hoverAnimation: false, - // name: 'Access From', - type: 'pie', - center: center, - radius: ['35%', '48%'], - avoidLabelOverlap: false, - // top: top + '%', - // height: '80%', - selectedMode: 'single', - left: 'center', - width: 400, - label: { - // show: false, - position: 'outside', - alignTo: 'edge', - // formatter: '{a|{c}}\n\n{name|{b}}', - formatter: '{a|{c}%}\n{r|}\n{name|{b}}', - minMargin: 5, - edgeDistance: 1, - lineHeight: 15, - color: '#fff', - fontSize: 12, - // distanceToLabelLine: -60, - rich: { - name: { - padding: [0, 6, 0, 6] - }, - a: { - fontSize: 30, - color: '#fff', - padding: [0, 6, 6, 6] - }, - r: { - backgroundColor: 'auto', - borderRadius: 6, - width: 6, - height: 6, - // padding: [3, 3, 0, -12] - } - } - }, - labelLine: { - show: false, - smooth: 0.2, - length: 30, - length2: 0, - maxSurfaceAngle: 80 - }, - labelLayout: function (params) { - - const isLeft = params.labelRect.x < _charts.getWidth() / 2; - const points = params.labelLinePoints; - // Update the end point. - if (points) { - points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; - } - - return { - labelLinePoints: points - }; - }, - itemStyle: { - color:function(params) { - //自定义颜色 - var colorList = [ '#FAC126', '#3DDA83']; - return colorList[params.dataIndex] - } - }, - data: [], - - }, - // 中间圆环 - { - type: 'pie', - // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 - startAngle: 0, - hoverAnimation: false, - center: center, - // tooltip: { - // }, - radius: ['0%', '25%'], - label: { - - show: false - - }, - labelLine: { - - show: false - - }, - data: [{ - value: 360, - itemStyle: { - normal: { - color: 'rgba(8, 37, 134, 1)', - - } - } - } - ] - }, - ] - - } -} diff --git a/src/views/modules/visual/communityGovern/shijianchuli/pieOption.js b/src/views/modules/visual/communityGovern/shijianchuli/pieOption.js index 5eb83bad..6e9b5c88 100644 --- a/src/views/modules/visual/communityGovern/shijianchuli/pieOption.js +++ b/src/views/modules/visual/communityGovern/shijianchuli/pieOption.js @@ -1,183 +1,184 @@ export function pieOption (_charts) { -const center= ['50%', '170px'] - return { - title: { - text: '0', - top: 140, - left: 'center', - textStyle: { - width: '100%', - fontSize: 32, - color: '#FFFFFF', - fontWeight: 400 - }, - itemGap: 5, - subtext: '总数', - subtextStyle: { - fontSize: 20, - color: '#fff', - fontWeight: 400 - } - }, - tooltip: { - show: false - }, - // legend: { - // top: 350, - // bottom: 0, - // itemWidth: 20, - // itemHeight: 10, - // textStyle: { - // color: '#D2E7FF', - // fontSize: 16, - // lineHeight: 20, - // }, - - // }, - series: [ - // 外侧圆环 - { - type: 'pie', - // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 - startAngle: 0, - hoverAnimation: false, - // tooltip: { - // }, - center: center, - radius: ['58%', '58.3%'], - label: { - normal: { - show: false - } - }, - labelLine: { - normal: { - show: false - } + const center= ['50%', '170px'] + return { + title: { + text: '0', + top: 140, + left: 'center', + textStyle: { + width: '100%', + fontSize: 32, + color: '#FFFFFF', + fontWeight: 400 }, - data: [{ - value: 360, - itemStyle: { - normal: { - color: 'rgba(40, 101, 250, 0)', - width:0, - borderColor: 'rgba(40, 101, 250, 0.5)', - borderWidth: 1, - borderType: 'dotted' - } - } + itemGap: 5, + subtext: '总数', + subtextStyle: { + fontSize: 20, + color: '#fff', + fontWeight: 400 } - ] }, - - // 突出的 - { - hoverAnimation: false, - // name: 'Access From', - type: 'pie', - center: center, - radius: ['35%', '48%'], - avoidLabelOverlap: false, - // top: top + '%', - // height: '80%', - selectedMode: 'single', - left: 'center', - width: 400, - label: { - // show: false, - position: 'outside', - alignTo: 'edge', - // formatter: '{a|{c}}\n\n{name|{b}}', - formatter: '{a|{c}%}\n{r|}\n{name|{b}}', - minMargin: 5, - edgeDistance: 1, - lineHeight: 15, - color: '#fff', - fontSize: 12, - // distanceToLabelLine: -60, - rich: { - name: { - padding: [0, 6, 0, 6] - }, - a: { - fontSize: 30, - color: '#fff', - padding: [0, 6, 6, 6] - }, - r: { - backgroundColor: 'auto', - borderRadius: 6, - width: 6, - height: 6, - // padding: [3, 3, 0, -12] - } - } - }, - labelLine: { - show: false, - smooth: 0.2, - length: 30, - length2: 0, - maxSurfaceAngle: 80 - }, - labelLayout: function (params) { - - const isLeft = params.labelRect.x < _charts.getWidth() / 2; - const points = params.labelLinePoints; - // Update the end point. - if (points) { - points[2][0] = isLeft - ? params.labelRect.x - : params.labelRect.x + params.labelRect.width; - } - - return { - labelLinePoints: points - }; - }, - itemStyle: { - color:function(params) { - //自定义颜色 - var colorList = [ '#FAC126', '#3DDA83']; - return colorList[params.dataIndex] - } - }, - data: [], - + tooltip: { + show: false }, - // 中间圆环 - { + // legend: { + // top: 350, + // bottom: 0, + // itemWidth: 20, + // itemHeight: 10, + // textStyle: { + // color: '#D2E7FF', + // fontSize: 16, + // lineHeight: 20, + // }, + + // }, + series: [ + // 外侧圆环 + { type: 'pie', // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 startAngle: 0, hoverAnimation: false, - center: center, // tooltip: { // }, - radius: ['0%', '25%'], + center: center, + radius: ['58%', '58.3%'], label: { - + normal: { show: false - + } }, labelLine: { - + normal: { show: false - + } }, data: [{ value: 360, itemStyle: { normal: { - color: 'rgba(8, 37, 134, 1)', - + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' } } } ] }, - ] - + + // 突出的 + { + hoverAnimation: false, + // name: 'Access From', + type: 'pie', + center: center, + radius: ['35%', '48%'], + avoidLabelOverlap: false, + // top: top + '%', + // height: '80%', + selectedMode: 'single', + left: 'center', + width: 400, + label: { + // show: false, + position: 'outside', + alignTo: 'edge', + // formatter: '{a|{c}}\n\n{name|{b}}', + formatter: '{a|{c}%}\n{r|}\n{name|{b}}', + minMargin: 5, + edgeDistance: 1, + lineHeight: 15, + color: '#fff', + fontSize: 12, + // distanceToLabelLine: -60, + rich: { + name: { + padding: [0, 6, 0, 6] + }, + a: { + fontSize: 30, + color: '#fff', + padding: [0, 6, 6, 6] + }, + r: { + backgroundColor: 'auto', + borderRadius: 6, + width: 6, + height: 6, + // padding: [3, 3, 0, -12] + } + } + }, + labelLine: { + show: false, + smooth: 0.2, + length: 30, + length2: 0, + maxSurfaceAngle: 80 + }, + labelLayout: function (params) { + + const isLeft = params.labelRect.x < _charts.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + if (points) { + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + } + + return { + labelLinePoints: points + }; + }, + itemStyle: { + color:function(params) { + //自定义颜色 + var colorList = [ '#FAC126', '#3DDA83']; + return colorList[params.dataIndex] + } + }, + data: [], + + }, + // 中间圆环 + { + type: 'pie', + // 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 + startAngle: 0, + hoverAnimation: false, + center: center, + // tooltip: { + // }, + radius: ['0%', '25%'], + label: { + + show: false + + }, + labelLine: { + + show: false + + }, + data: [{ + value: 360, + itemStyle: { + normal: { + color: 'rgba(8, 37, 134, 1)', + + } + } + } + ] + }, + ] + + } } -} + \ 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 c3a5c819..301a60a9 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,true)"> + @click.native="handleChangeDate(item.value)">
@@ -47,32 +47,26 @@
-
事件总览
-
-
- - -
-
+ ref="pieChart"> -
-
--> +
{ - - 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) => { - debugger - // 从 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) { @@ -994,7 +719,7 @@ export default { this.userId = id; }, userId () { - + // this.getApiData(); window.scrollTo(0, 0); }, }, @@ -1012,33 +737,4 @@ export default { scoped > - -