elink-star
/
epmet-oper-gov
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

事件处理分析图表

dev-烟台0301
jiangyy 3 years ago
parent
b49546325b
commit
04d7db2ddd
3 changed files with 326 additions and 242 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/views/modules/visual/communityGovern/shijianchuli/chart.js
  2. 2
      src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy.vue
  3. 558
      src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue

6
src/views/modules/visual/communityGovern/shijianchuli/chart.js
View File

@ -7,7 +7,8 @@
* @param pieHeight 立体的高度
* @param opacity 饼或者环的透明度
*/
const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1) => {
const getPie3D = (pieData, internalDiameterRatio, distance, alpha, pieHeight, opacity = 1,beta) => {
const series = []
let sumValue = 0
let startValue = 0
@ -156,7 +157,7 @@
viewControl: {
// 3d效果可以放大、旋转等，请自己去查看官方配置
alpha, // 角度
beta: -40,
beta,
distance, // 调整视角到主体的距离，类似调整zoom
rotateSensitivity: 0, // 设置为0无法旋转
zoomSensitivity: 0, // 设置为0无法缩放
@ -245,6 +246,7 @@ const getParametricEquation = (startRatio, endRatio, isSelected, isHovered, k, h
* 获取3d丙图的最高扇区的高度
*/
const getHeight3D = (series, height) => {
series.sort((a, b) => {
return b.pieData.value - a.pieData.value
})

2
src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi copy.vue
View File

@ -637,8 +637,6 @@ export default {
};
// element.selected = !element.selected
} else {
element.selected = false
element.label = {
show: false,

558
src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue
View File

@ -190,6 +190,16 @@ export default {
value: 72
}
],
optionDataLine: [
{
name: '处理中',
value: 50
},
{
name: '已完成',
value: 50
}
],
statusChart: null,
option: {},
@ -300,6 +310,9 @@ export default {
showProject: false,
eventId: '',
beta: 20,
selectedIndex: ''
};
},
// mixins: [animate]
@ -360,7 +373,7 @@ export default {
}
if (index !== '0' && isRefresh) {
await this.getApiData()
// this.assignPieChart()
}
@ -368,7 +381,7 @@ export default {
assignData () {
this.initChart()
// this.getPie()
this.getLine()
},
@ -444,16 +457,68 @@ export default {
url: require('@/assets/img/shuju/measure/lv@2x.png')
}
]
let dataClosed = Math.floor(data.closedRatio * 10000) / 100
let dataPro = Math.floor(data.processingRatio * 10000) / 100
if (data.closedRatio === 0 && data.processingRatio === 0) {
dataClosed = 50
dataPro = 50
}
let dataClosedLine = Math.floor(data.closedRatio * 10000) / 100
let dataProLine = Math.floor(data.processingRatio * 10000) / 100
// dataClosed = 5
// dataPro = 95
// dataClosed = 10
// dataPro = 90
// dataClosed = 20
// dataPro = 80
// dataClosed = 30
// dataPro = 70
// dataClosed = 40
// dataPro = 60
// dataClosed = 50
// dataPro = 50
if (Math.abs(dataClosed - dataPro) > 80) {
this.beta = 70
} else if (Math.abs(dataClosed - dataPro) > 70) {
this.beta = 60
} else if (Math.abs(dataClosed - dataPro) > 50) {
this.beta = 20
} else if (Math.abs(dataClosed - dataPro) > 30) {
this.beta = -20
} else if (Math.abs(dataClosed - dataPro) > 10) {
this.beta = -30
} else {
this.beta = -60
}
this.optionData = [
{
name: "已完成",
value: dataClosed
},
{
name: "处理中",
value: dataPro
},
]
this.optionDataLine = [
{
name: "已完成",
value: Math.floor(data.closedRatio * 10000) / 100
value: dataClosedLine
},
{
name: "处理中",
value: Math.floor(data.processingRatio * 10000) / 100
value: dataProLine
},
]
this.setLabel()
@ -596,101 +661,68 @@ export default {
}, true)
},
getPie () {
if (this.pieInitState) {
this.assignPieChart()
} else {
setTimeout(() => {
this.getPie()
}, 500)
}
},
// 获取饼状图
async assignPieChart () {
let maxIndex = 0
const _that = this
// 获取pieChart配置
this.pieOption = pieOption(this.pieChartS)
this.pieData[0].selected = false
this.pieData[1].selected = false
this.pieOption.title.text = this.projectTotal
this.clickPie()
let fun = function (params) {
_that.clickPie(params)
}
this.$refs.pieChart.handleClick(fun)
},
clickPie (params) {
setLabel () {
this.optionDataLine.forEach((item, index) => {
let dataIndex = params ? params.dataIndex : null
let componentIndex = params ? params.componentIndex : null
if (componentIndex === 1) {//点击数据
if (dataIndex === 0) {
this.processStatus = 'closed_case'
} else if (dataIndex === 1) {
this.processStatus = 'processing'
item.itemStyle = {
color: color[index]
}
} else if (componentIndex === 2) {//点击中心
this.processStatus = ''
dataIndex = 3
}
if (dataIndex === 3) {
this.$refs.pieChart.clear()
}
this.pieData.forEach((element, index) => {
if (index === dataIndex) {
element.selected = true
element.label = {
show: true,
};
element.labelLine = {
item.label = {
normal: {
show: true,
lineStyle: {
opacity: 1,
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 = {
};
// element.selected = !element.selected
} else {
element.selected = false
element.label = {
show: false,
};
element.labelLine = {
show: false,
normal: {
show: true,
length: 30,
length2: 80,
lineStyle: {
opacity: 0,
color: 'rgba(255,255,255,0)'
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
};
element.selected = false
}
});
this.pieOption.series[1].data = this.pieData
this.demand.pageNo = 1
this.getTable()
// this.$refs.pieChart.hideLoading()
this.$refs.pieChart.setOption(this.pieOption)
},
setLabel () {
})
this.optionData.forEach((item, index) => {
item.itemStyle = {
@ -703,8 +735,6 @@ export default {
formatter: [
'{d|{d}%}',
'{b|{b}}'
].join('\n'), // 用\n来换行
rich: {
b: {
@ -731,7 +761,9 @@ export default {
}
}
item.labelLine = {
normal: {
show: true,
length: 30,
length2: 80,
lineStyle: {
@ -760,7 +792,8 @@ export default {
// 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.option = getPie3D(this.optionData, 0.8, 300, 28, 22, 0.4, this.beta)
console.log(this.option)
this.statusChart.setOption(this.option)
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
this.option.series.push({
@ -772,14 +805,15 @@ export default {
fontSize: 13,
lineHeight: 20
},
startAngle: 40, // 起始角度，支持范围[0, 360]。
startAngle: -this.beta, // 起始角度，支持范围[0, 360]。
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ['30%', '35%'],
center: ['50%', '50%'],
data: this.optionData,
data: this.optionDataLine,
itemStyle: {
opacity: 0 //这里必须是0，不然2d的图会覆盖在表面
}
},
})
this.statusChart.setOption(this.option)
this.bindListen(this.statusChart)
@ -789,155 +823,205 @@ export default {
// 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
// optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
bindListen (myChart, optionName = 'option') {
let selectedIndex = ''
// 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 = ''
let dataIndex = null
console.log('params', params)
console.log('params.seriesIndex', params.seriesIndex)
console.log('this[optionName].series', this[optionName].series)
console.log('this[optionName].series[params.seriesIndex]', this[optionName].series[params.seriesIndex])
if (params.componentSubType === 'pie') {//点击指引线
dataIndex = params.dataIndex
this.click3DPie(myChart, 'option', dataIndex)
if (dataIndex === 0) {//序列1 已完成
this.processStatus = 'closed_case'
} else if (dataIndex === 1) {//序列2 处理中
this.processStatus = 'processing'
} else {
this.processStatus = ''
}
// 如果触发 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
if (!this.selectedIndex) {
this.processStatus = ''
}
// 使用更新后的 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 = ''
} else {//点击环形
dataIndex = params.seriesIndex
this.click3DPie(myChart, 'option', dataIndex)
//刷新右侧table
if (this.selectedIndex || this.selectedIndex === 0) {
if (this.selectedIndex === 0) {
this.processStatus = 'closed_case'
} else if (this.selectedIndex === 1) {
this.processStatus = 'processing'
}
} else {
this.processStatus = ''
}
}
// 使用更新后的 option，渲染图表
myChart.setOption(this[optionName])
this.getTable()
})
// 监听 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])
// })
},
click3DPie (myChart, optionName, seriesIndex) {
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
const isSelected = !this[optionName].series[seriesIndex].pieStatus.selected
const isHovered = this[optionName].series[seriesIndex].pieStatus.hovered
const k = this[optionName].series[seriesIndex].pieStatus.k
const startRatio = this[optionName].series[seriesIndex].pieData.startRatio
const endRatio = this[optionName].series[seriesIndex].pieData.endRatio
// 如果之前选中过其他扇形，将其取消选中（对 option 更新）
if (this.selectedIndex !== '' && this.selectedIndex !== null && this.selectedIndex !== seriesIndex) {
this[optionName].series[
this.selectedIndex
].parametricEquation = getParametricEquation(
this[optionName].series[this.selectedIndex].pieData.startRatio,
this[optionName].series[this.selectedIndex].pieData.endRatio,
false,
false,
k,
this[optionName].series[this.selectedIndex].pieData.value
)
this[optionName].series[this.selectedIndex].pieStatus.selected = false
}
// 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
this[optionName].series[
seriesIndex
].parametricEquation = getParametricEquation(
startRatio,
endRatio,
isSelected,
isHovered,
k,
this[optionName].series[seriesIndex].pieData.value
)
this[optionName].series[seriesIndex].pieStatus.selected = isSelected
// 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
this.selectedIndex = isSelected ? seriesIndex : null
// 使用更新后的 option，渲染图表
myChart.setOption(this[optionName])
},
handleChangeAgency () {

Write Preview
Loading…
Cancel
Save