1、需求UI图:
2、需求分析:在广州十一个区显示六个类型的站的覆盖率,鼠标移入某个柱状要显示当前区下的当前类型下的所有厂家的巡检信息(api没弄,暂自定义数据结构)
series: [
{
name: '窨井水位',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [ // 窨井在海珠区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在越秀区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在白云区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在天河区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在荔湾区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在番禺区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在增城区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在南沙区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在花都区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在从化区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在黄埔区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '内涝点水位',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 70,
manufacturerList: [
{
censusShould: '1000',
censusReal: '700'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '500'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '管网流量水质',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '河道水体水位',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '闸站',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '泵站',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
],
3、使用tooltip{formatter: function(){}}函数去自定义内容
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(64, 64, 64, 0.8)',
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
console.log(params)
let str = "";
let arr = params.data.manufacturerList;
for(let i = 1; i < arr.length; i ++ ) { // 循环厂家的数据,第一项放统计总数,所以从第二项开始循环
str += `<span style="display: flex; flex-wrap: wrap; margin-right: 10px;">${arr[i].manufacturerName}: ${arr[i].shouldNum}/${arr[i].realNum} | ${parseInt((arr[i].realNum/arr[i].shouldNum) * 100)}%</span>`
}
// 拼接上面不用循环的部分
return params.name + '巡检覆盖率统计' + '</br>' + params.seriesName + '统计: ' + params.data.manufacturerList[0].censusShould + '/' + params.data.manufacturerList[0].censusReal + ' | ' + parseInt((params.data.manufacturerList[0].censusReal)/(params.data.manufacturerList[0].censusShould) * 100 ) + '%' + '</br>' + str
}
},
4、踩坑:刚开始使用了tooltip:{trigger:“axias”},然后参数只打印出了整个数据,没有当前索引,所以改成tooltip:{trigger:“item”}, 具体数据结构鼠标移上去把params打印出来,想要啥就去拿啥
5、完整代码如下:
// 区巡检覆盖率统计
const regionInspOption = {
legend: {
data: ['窨井水位', '内涝点水位', '管网流量水质', '河道水体水位', '闸站', '泵站']
},
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(64, 64, 64, 0.8)',
textStyle: {
color: '#fff'
},
axisPointer: {
type: 'shadow'
},
formatter: function (params) {
let str = "";
let arr = params.data.manufacturerList;
for(let i = 1; i < arr.length; i ++ ) { // 循环厂家的数据,第一项放统计总数,所以从第二项开始循环
str += `<span style="display: flex; flex-wrap: wrap; margin-right: 10px;">${arr[i].manufacturerName}: ${arr[i].shouldNum}/${arr[i].realNum} | ${parseInt((arr[i].realNum/arr[i].shouldNum) * 100)}%</span>`
}
// 拼接上面不用循环的部分
return params.name + '巡检覆盖率统计' + '</br>' + params.seriesName + '统计: ' + params.data.manufacturerList[0].censusShould + '/' + params.data.manufacturerList[0].censusReal + ' | ' + parseInt((params.data.manufacturerList[0].censusReal)/(params.data.manufacturerList[0].censusShould) * 100 ) + '%' + '</br>' + str
}
},
grid: {
// 四周留白区域设置
top: 50,
right: 10,
left: 78,
bottom: 10,
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['海珠区', '越秀区', '白云区', '天河区', '荔湾区', '番禺区', '增城区', '南沙区', '花都区', '从化区', '黄埔区']
}
],
yAxis: {
type: "value",
name: "%",
axisLine: {
show: true,
lineStyle: {
// 纵轴颜色
},
},
axisLabel: {
formatter: "{value}",
},
},
series: [
{
name: '窨井水位',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [ // 窨井在海珠区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在越秀区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在白云区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在天河区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在荔湾区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在番禺区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在增城区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在南沙区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在花都区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在从化区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [ // 窨井在黄埔区关联的厂家信息
{
censusShould: '1000', // 这是统计的数据,每个类型的每个区域都放
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '内涝点水位',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 70,
manufacturerList: [
{
censusShould: '1000',
censusReal: '700'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '500'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '管网流量水质',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '河道水体水位',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '闸站',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
{
name: '泵站',
type: 'bar',
data: [
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
{
value: 80,
manufacturerList: [
{
censusShould: '1000',
censusReal: '800'
},
{
manufacturerName: '奥格',
shouldNum: '700',
realNum: '600'
},
{
manufacturerName: '南湾',
shouldNum: '300',
realNum: '200'
},
]
},
]
},
],
};
6、得到的效果如图:
7、如果图表展示的内容与鼠标移入展示的内容不一致,那就自己在data中添加属性和值,然后通过formatter方法去获取,最后字符串拼接所要展示的内容。完美!
灯火辉煌的街头,你突然奔赴而来!