elink-star
/
ShibeiWorkPlatform_Frontend
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

事件处理分析图表

shibei_master
jiangyy 3 years ago
parent
44cc7645bf
commit
0b0a63a5c4
4 changed files with 209 additions and 138 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. 4
      src/assets/scss/modules/visual/shijianchulifenxi.scss
  2. 31
      src/views/modules/visual/communityGovern/shijianchuli/chart.js
  3. 108
      src/views/modules/visual/communityGovern/shijianchuli/lineOption.js
  4. 204
      src/views/modules/visual/communityGovern/shijianchuli/shijianchulifenxi.vue

4
src/assets/scss/modules/visual/shijianchulifenxi.scss
View File

@ -21,8 +21,8 @@
}
.l_bottom {
height: calc(100vh - 200px - 355px);
margin-top: 20px;
height: calc(100vh - 200px - 365px);
margin-top: 0;
}
}

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

@ -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}<br/>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${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}<br/>` +
// `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
// `${bfb}%`
// )
// }
}
},
xAxis3D: {

108
src/views/modules/visual/communityGovern/shijianchuli/lineOption.js
View File

@ -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
}
]
}
}

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

@ -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])
})
},

Write Preview
Loading…
Cancel
Save