const title = 'XXX'
const imgRise = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG8AAAA8CAYAAABo3+Q5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowNTI0OTg5MDM5ODUxMUVEOUJFOEQzMzFEN0QzRjU2NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowNTI0OTg5MTM5ODUxMUVEOUJFOEQzMzFEN0QzRjU2NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjA1MjQ5ODhFMzk4NTExRUQ5QkU4RDMzMUQ3RDNGNTY2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjA1MjQ5ODhGMzk4NTExRUQ5QkU4RDMzMUQ3RDNGNTY2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+W0AV6gAACmdJREFUeNrsXWeMFkUY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'
const imgFall = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHEAAABKCAYAAACMw7u+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGM0QzQkZFRjM5ODQxMUVEODk5OEY0QTYwQTk4RUU5MyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGM0QzQkZGMDM5ODQxMUVEODk5OEY0QTYwQTk4RUU5MyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYzRDNCRkVEMzk4NDExRUQ4OTk4RjRBNjBBOThFRTkzIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYzRDNCRkVFMzk4NDExRUQ4OTk4RjRBNjBBOThFRTkzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+p7dHrwAACvJJREFUeNrsnXuQHEUd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'
const color = {
bar: ['#A1CBFE', '#4397FD'],
x1: '#333',
x2: '#333',
y: '#333',
label: '#333'
}
const data = [
{
district: '福田区',
'2022': 50,
'2021': 40
},
{
district: '罗湖区',
'2022': 40,
'2021': 50
},
{
district: '盐田区',
'2022': 40,
'2021': 60
},
{
district: '南山区',
'2022': 50,
'2021': 60
},
{
district: '宝安区',
'2022': 30,
'2021': 10
},
{
district: '龙岗区',
'2022': 20,
'2021': 30
},
{
district: '龙华区',
'2022': 30,
'2021': 40
},
{
district: '坪山区',
'2022': 60,
'2021': 50
},
{
district: '光明区',
'2022': 50,
'2021': 40
},
{
district: '大鹏新区',
'2022': 40,
'2021': 40
}
]
const xAxisYear = [] // x轴1 年
const xAxisDistrict = [] // x轴2 行政区
const yearFont = [] // 前一年
const yearBack = [] // 后一年
const yearStatus = [] // 状态
const year = Object.keys(data[0]).filter(e => !isNaN(+e[0])).sort() // 获取年去掉行政区字段并排序
data.forEach((e, i) => {
xAxisYear.push(year.join(' '))
xAxisDistrict.push(e.district)
yearFont.push(e[year[0]])
yearBack.push(e[year[1]])
const s = parseFloat(+(((+e[year[1]] - e[year[0]]) / e[year[0]]) * 100).toFixed(2)) + '%' // 上升下降百分比
const m = Math.max(+e[year[0]], +e[year[1]]) // 行政区最大值 使百分比图标在当前行政区顶部
yearStatus.push({
name: e.district,
value: m,
percent: s,
label: {
normal: {
show: true,
offset: [0, -50],
color: 'rgba(25, 100, 150, 1)',
textStyle: {
fontSize: '20'
},
formatter: function (params) {
return [
`{value|${s}}`, `{icon|}`
].join('\n')
},
rich: {
value: {
fontSize: 16,
// lineHeight: 30,
color: !s.startsWith('-') ? '#1afa29' : '#d81e06',
marginTop: -50
},
icon: {
align: 'center',
backgroundColor: {
image: !s.startsWith('-') ? imgRise : imgFall
}
}
}
}
}
})
})
option = {
title: {
text: title,
left: '1%',
top: '3%'
},
tooltip: {
trigger: 'axis',
formatter: (params) => {
let res = `<h3 style="font-size:14px;line-height:14px;font-weight:400;color:#333;">${params[0].name}</h3>`
for (const item of params) {
if (item.seriesName !== 'yearStatus') {
res += '<div>' + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + item.color.colorStops[0].color + ';"></span>' + item.seriesName + ' : ' + item.value + '</div>'
}
}
return res
},
axisPointer: {
type: 'shadow',
lineStyle: {
color: '#57617B'
}
}
},
toolbox: {
show: true,
right: '20%',
top: '2%',
feature: {
dataZoom: {
yAxisIndex: 'none'
},
// dataView: {
// readOnly: false
// },
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
grid: {
top: '20%',
left: '5%',
right: '5%',
bottom: '5%'
},
legend: {
data: year,
right: '3%',
top: '3%',
textStyle: {
color: '#5195da'
}
},
xAxis: [
{
data: xAxisYear,
axisLabel: {
interval: 0
}
},
{
type: 'category',
offset: 20,
axisPointer: { type: 'none' },
axisTick: { show: false },
axisLine: { show: false },
position: 'bottom',
data: xAxisDistrict
}
],
yAxis: {
nameTextStyle: {
color: '#000'
},
type: 'value',
axisLine: {
show: true,
lineStyle: {
color: '#3585d5'
}
},
splitLine: {
show: false,
lineStyle: {
type: 'dotted',
color: '#3585d5'
}
},
axisTick: {
show: false
},
axisLabel: {
fontSize: 16,
color: '#000'
},
boundaryGap: ['20%', '20%']
},
series: [
{
name: year[0],
xAxisIndex: 1,
type: 'bar',
barGap:0 ,
smooth: true,
symbol: 'none',
showSymbol: false,
symbolSize: 8,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 12
}
},
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#00FFE3'
},
{
offset: 1,
color: '#4693EC'
}
]
}
}
},
data: yearFont
},
{
name: 'yearStatus',
data: yearStatus,
type: 'scatter',
symbol: 'circle',
symbolSize: 0.01,
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'
}
}
},
{
name: year[1],
xAxisIndex: 1,
type: 'bar',
barGap:0 ,
smooth: true,
symbol: 'none',
showSymbol: false,
symbolSize: 8,
itemStyle: {
normal: {
label: {
show: true,
position: 'top',
textStyle: {
color: 'black',
fontSize: 12
}
},
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
global: false,
colorStops: [
{
offset: 0,
color: '#28D8E8'
},
{
offset: 1,
color: '#0489F0'
}
]
}
}
},
data: yearBack
}
]
};