|
|
|
|
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 {
|
|
|
|
|
tooltip: {
|
|
|
|
|
trigger: 'axis',
|
|
|
|
|
axisPointer: {
|
|
|
|
|
type: 'cross',
|
|
|
|
|
label: {
|
|
|
|
|
backgroundColor: '#6a7985'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// grid: {
|
|
|
|
|
// left: '5%',
|
|
|
|
|
// right: '5%',
|
|
|
|
|
// bottom: '5%',
|
|
|
|
|
// top: '10%',
|
|
|
|
|
// containLabel: true
|
|
|
|
|
// },
|
|
|
|
|
xAxis: {
|
|
|
|
|
type: 'category',
|
|
|
|
|
// boundaryGap: false,
|
|
|
|
|
axisLabel: {
|
|
|
|
|
color: '#8ec7dc',
|
|
|
|
|
fontSize: 16
|
|
|
|
|
},
|
|
|
|
|
axisTick: {
|
|
|
|
|
show: false
|
|
|
|
|
},
|
|
|
|
|
axisLine: {
|
|
|
|
|
lineStyle: {
|
|
|
|
|
color: '#0c4b59'
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// data: className
|
|
|
|
|
},
|
|
|
|
|
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: {}
|
|
|
|
|
// // }
|
|
|
|
|
// ]
|
|
|
|
|
series: [
|
|
|
|
|
{
|
|
|
|
|
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: 6,
|
|
|
|
|
// data: serviceCount
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
name: 'XXX',
|
|
|
|
|
type: 'pictorialBar',
|
|
|
|
|
symbol: function (params, value) {
|
|
|
|
|
// 设置图片
|
|
|
|
|
|
|
|
|
|
return circleList[1]
|
|
|
|
|
},
|
|
|
|
|
symbolPosition: 'end',
|
|
|
|
|
symbolSize: [30, 30],
|
|
|
|
|
symbolOffset: [0, -12],
|
|
|
|
|
z: 20,
|
|
|
|
|
// data: serviceCount
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
