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
Unified 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 { .l_bottom {
height: calc(100vh - 200px - 355px); height: calc(100vh - 200px - 365px);
margin-top: 20px; margin-top: 0;
} }
} }

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

@ -120,21 +120,22 @@
fontSize: 13 fontSize: 13
}, },
formatter: params => { formatter: params => {
if (
params.seriesName !== 'mouseoutSeries' && // if (
params.seriesName !== 'pie2d' // params.seriesName !== 'mouseoutSeries' &&
) { // params.seriesName !== 'pie2d'
const bfb = ( // ) {
(option.series[params.seriesIndex].pieData.endRatio - // const bfb = (
option.series[params.seriesIndex].pieData.startRatio) * // (option.series[params.seriesIndex].pieData.endRatio -
100 // option.series[params.seriesIndex].pieData.startRatio) *
).toFixed(2) // 100
return ( // ).toFixed(2)
`${params.seriesName}<br/>` + // return (
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` + // `${params.seriesName}<br/>` +
`${bfb}%` // `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
) // `${bfb}%`
} // )
// }
} }
}, },
xAxis3D: { xAxis3D: {

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

@ -1,4 +1,11 @@
import * as echarts from 'echarts' 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 () { export function lineOption () {
return { return {
@ -11,6 +18,13 @@ export function lineOption () {
} }
} }
}, },
// grid: {
// left: '5%',
// right: '5%',
// bottom: '5%',
// top: '10%',
// containLabel: true
// },
xAxis: { xAxis: {
type: 'category', type: 'category',
// boundaryGap: false, // boundaryGap: false,
@ -25,7 +39,8 @@ export function lineOption () {
lineStyle: { lineStyle: {
color: '#0c4b59' color: '#0c4b59'
} }
} },
// data: className
}, },
yAxis: { yAxis: {
nameTextStyle: { 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: [ series: [
{ {
name: '项目数', name: '',
type: 'line', type: 'bar',
smooth: true, zlevel: 1,
barWidth: 15, itemStyle: {
areaStyle: {},
itemStyle: { normal: {
color: new echarts.graphic.LinearGradient( barBorderRadius: 0,
0, 1, 0, 0, color: function (params) {
[ // 大于等于50%的是黄色 反之为蓝色
{ offset: 0, color: 'rgba(121, 55, 255, 0)' }, var colorList = [
{ offset: 1, color: '#6339FF' } ['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]
}, },
// { symbolPosition: 'end',
// data: [820, 932, 901, 934, 1290, 1330, 1320], symbolSize: [30, 30],
// type: 'line', symbolOffset: [0, -12],
// areaStyle: {} 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 }, xAxis: { data: this.lineXaxis },
series: [ series: [
{ data: this.lineSeriesData }, { data: this.lineSeriesData },
{ data: this.lineSeriesData },
] ]
}, true) }, true)
@ -792,6 +793,7 @@ export default {
let hoveredIndex = '' let hoveredIndex = ''
// 监听点击事件，实现选中效果（单选） // 监听点击事件，实现选中效果（单选）
myChart.on('click', (params) => { myChart.on('click', (params) => {
debugger
// 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
const isSelected = !this[optionName].series[params.seriesIndex].pieStatus const isSelected = !this[optionName].series[params.seriesIndex].pieStatus
.selected .selected
@ -834,107 +836,107 @@ export default {
myChart.setOption(this[optionName]) myChart.setOption(this[optionName])
}) })
// 监听 mouseover，近似实现高亮（放大）效果 // 监听 mouseover，近似实现高亮（放大）效果
// myChart.on('mouseover', (params) => { myChart.on('mouseover', (params) => {
// // 准备重新渲染扇形所需的参数 // 准备重新渲染扇形所需的参数
// let isSelected let isSelected
// let isHovered let isHovered
// let startRatio let startRatio
// let endRatio let endRatio
// let k let k
// // 如果触发 mouseover 的扇形当前已高亮，则不做操作 // 如果触发 mouseover 的扇形当前已高亮，则不做操作
// if (hoveredIndex === params.seriesIndex) { if (hoveredIndex === params.seriesIndex) {
// // 否则进行高亮及必要的取消高亮操作 // 否则进行高亮及必要的取消高亮操作
// } else { } else {
// // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新） // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
// if (hoveredIndex !== '') { if (hoveredIndex !== '') {
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
// isSelected = this[optionName].series[hoveredIndex].pieStatus.selected isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
// isHovered = false isHovered = false
// startRatio = this[optionName].series[hoveredIndex].pieData.startRatio startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
// endRatio = this[optionName].series[hoveredIndex].pieData.endRatio endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
// k = this[optionName].series[hoveredIndex].pieStatus.k k = this[optionName].series[hoveredIndex].pieStatus.k
// // 对当前点击的扇形，执行取消高亮操作（对 option 更新） // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
// this[optionName].series[ this[optionName].series[
// hoveredIndex hoveredIndex
// ].parametricEquation = getParametricEquation( ].parametricEquation = getParametricEquation(
// startRatio, startRatio,
// endRatio, endRatio,
// isSelected, isSelected,
// isHovered, isHovered,
// k, k,
// this[optionName].series[hoveredIndex].pieData.value this[optionName].series[hoveredIndex].pieData.value
// ) )
// this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
// hoveredIndex = '' hoveredIndex = ''
// } }
// // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新） // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
// if ( if (
// params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'mouseoutSeries' &&
// params.seriesName !== 'pie2d' params.seriesName !== 'pie2d'
// ) { ) {
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
// isSelected = isSelected =
// this[optionName].series[params.seriesIndex].pieStatus.selected this[optionName].series[params.seriesIndex].pieStatus.selected
// isHovered = true isHovered = true
// startRatio = startRatio =
// this[optionName].series[params.seriesIndex].pieData.startRatio this[optionName].series[params.seriesIndex].pieData.startRatio
// endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
// k = this[optionName].series[params.seriesIndex].pieStatus.k k = this[optionName].series[params.seriesIndex].pieStatus.k
// // 对当前点击的扇形，执行高亮操作（对 option 更新） // 对当前点击的扇形，执行高亮操作（对 option 更新）
// this[optionName].series[ this[optionName].series[
// params.seriesIndex params.seriesIndex
// ].parametricEquation = getParametricEquation( ].parametricEquation = getParametricEquation(
// startRatio, startRatio,
// endRatio, endRatio,
// isSelected, isSelected,
// isHovered, isHovered,
// k, k,
// this[optionName].series[params.seriesIndex].pieData.value + 60 this[optionName].series[params.seriesIndex].pieData.value + 60
// ) )
// this[optionName].series[ this[optionName].series[
// params.seriesIndex params.seriesIndex
// ].pieStatus.hovered = isHovered ].pieStatus.hovered = isHovered
// // 记录上次高亮的扇形对应的系列号 seriesIndex // 记录上次高亮的扇形对应的系列号 seriesIndex
// hoveredIndex = params.seriesIndex hoveredIndex = params.seriesIndex
// } }
// // 使用更新后的 option，渲染图表 // 使用更新后的 option，渲染图表
// myChart.setOption(this[optionName]) myChart.setOption(this[optionName])
// } }
// }) })
// // 修正取消高亮失败的 bug // 修正取消高亮失败的 bug
// myChart.on('globalout', () => { myChart.on('globalout', () => {
// // 准备重新渲染扇形所需的参数 // 准备重新渲染扇形所需的参数
// let isSelected let isSelected
// let isHovered let isHovered
// let startRatio let startRatio
// let endRatio let endRatio
// let k let k
// if (hoveredIndex !== '') { if (hoveredIndex !== '') {
// // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。 // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
// isSelected = this[optionName].series[hoveredIndex].pieStatus.selected isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
// isHovered = false isHovered = false
// k = this[optionName].series[hoveredIndex].pieStatus.k k = this[optionName].series[hoveredIndex].pieStatus.k
// startRatio = this[optionName].series[hoveredIndex].pieData.startRatio startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
// endRatio = this[optionName].series[hoveredIndex].pieData.endRatio endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
// // 对当前点击的扇形，执行取消高亮操作（对 option 更新） // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
// this[optionName].series[ this[optionName].series[
// hoveredIndex hoveredIndex
// ].parametricEquation = getParametricEquation( ].parametricEquation = getParametricEquation(
// startRatio, startRatio,
// endRatio, endRatio,
// isSelected, isSelected,
// isHovered, isHovered,
// k, k,
// this[optionName].series[hoveredIndex].pieData.value this[optionName].series[hoveredIndex].pieData.value
// ) )
// this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
// // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空 // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
// hoveredIndex = '' hoveredIndex = ''
// } }
// // 使用更新后的 option，渲染图表 // 使用更新后的 option，渲染图表
// myChart.setOption(this[optionName]) myChart.setOption(this[optionName])
// }) })
}, },

Write Preview
Loading…
Cancel
Save