From 58a4a04a37508867d670ff3a4936fb86378dbe3d Mon Sep 17 00:00:00 2001 From: jiangyy Date: Fri, 24 Jun 2022 16:13:47 +0800 Subject: [PATCH] =?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 > - -