const listData = {
data: [
{
qyssxl: '制造业',
qyzs: 413,
cyrs: 9111
},
{
qyssxl: '农业',
qyzs: 1251,
cyrs: 42222
},
{
qyssxl: '畜牧业',
qyzs: 1347,
cyrs: 32140
},
{
qyssxl: '服务业',
qyzs: 1454,
cyrs: 24248
},
{
qyssxl: '化工业',
qyzs: 1585,
cyrs: 35654
},
{
qyssxl: '纺织业',
qyzs: 873,
cyrs: 2345
},
{
qyssxl: '软件和信息业',
qyzs: 1223,
cyrs: 2132
},
{
qyssxl: '其他',
qyzs: 233,
cyrs: 2343
}
]
}
const dataArr = listData.data.filter((item) => {
return item.qyssxl
})
const allArr = dataArr.map((item) => {
const qyzs = item.qyzs || 0
return {
name: item.qyssxl,
originalValue: qyzs,
value: qyzs ? Math.log(qyzs) : qyzs
}
})
const personArr = dataArr.map((item) => {
const cyrs = item.cyrs || 0
return {
name: item.qyssxl,
originalValue: cyrs,
value: cyrs ? Math.log(cyrs) : cyrs
}
})
const xData = dataArr.map((item) => {
return item.qyssxl
})
const lineColor = 'rgba(255,255,255,0.2)'
const colors = [
{
borderColor: 'rgba(255, 255, 255, 1)',
start: 'rgba(40, 225, 201, 1)',
end: 'rgba(40, 225, 201, .1)'
},
{
borderColor: 'rgba(255, 255, 255, 1)',
start: 'rgba(142, 194, 31, .1)',
end: 'rgba(142, 194, 31, 1)'
}
]
let borderData = []
const scale = 0.1
borderData = xData.map((item) => {
return scale
})
option = {
backgroundColor: 'rgba(0,0,0, .6)',
tooltip: {
trigger: 'item',
formatter: (p) => {
const text =
'<div>' +
p.seriesName +
'<br/>' +
p.data.name +
'：' +
p.data.originalValue +
'</div>'
return text
},
backgroundColor: 'rgba(0, 0, 0, 0.8)',
borderColor: 'rgba(0, 0, 0, 0.8)',
textStyle: {
color: '#fff'
},
axisPointer: {
lineStyle: {
color: '#2D84FB'
}
}
},
legend: {
show: false
},
grid: [
{
show: false,
left: '8%',
top: '8%',
bottom: '8%',
width: '37%',
containLabel: true
},
{
show: false,
left: '55%',
top: '8%',
bottom: '8%',
width: '0%'
},
{
show: false,
right: '8%',
top: '8%',
bottom: '8%',
containLabel: true,
width: '31%'
}
],
xAxis: [
{
type: 'value',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
position: 'top',
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
{
gridIndex: 1,
show: false
},
{
gridIndex: 2,
axisLine: {
show: false
},
axisTick: {
show: false
},
position: 'top',
axisLabel: {
show: false
},
splitLine: {
show: false
}
}
],
yAxis: [
{
type: 'category',
inverse: true,
position: 'center',
axisLine: {
show: true,
lineStyle: {
color: lineColor
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: xData
},
{
gridIndex: 1,
type: 'category',
inverse: true,
position: 'center',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
// padding:[30,0,0,0],
textStyle: {
color: '#fff',
fontSize: 13
},
align: 'center',
formatter: (value) => {
const text =
value.length > 3 ? value.substring(0, 4) + '...' : value
return text
}
},
data: xData.map(function (value) {
return {
value: value,
textStyle: {
align: 'center'
}
}
})
},
{
gridIndex: 2,
type: 'category',
inverse: true,
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: lineColor
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
data: xData
}
],
series: [
{
name: '企业总数(家)',
type: 'bar',
barWidth: 40,
stack: '1',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: colors[0].start
},
{
offset: 1,
color: colors[0].end
}
])
}
},
label: {
normal: {
show: true,
position: 'left',
fontSize: 14,
color: '#fff',
formatter: (p) => {
return p.data.originalValue
}
}
},
data: allArr,
animationEasing: 'elasticOut'
},
{
name: '',
type: 'bar',
barWidth: 0,
stack: '1',
itemStyle: {
normal: {
color: colors[0].borderColor
}
},
data: borderData,
tooltip: {
show: false
}
},
{
name: '从业人员总数(人)',
type: 'bar',
stack: '2',
barWidth: 40,
xAxisIndex: 2,
yAxisIndex: 2,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: colors[1].start
},
{
offset: 1,
color: colors[1].end
}
])
}
},
label: {
normal: {
show: true,
position: 'right',
fontSize: 14,
color: '#fff',
formatter: (p) => {
return p.data.originalValue
}
}
},
data: personArr,
animationEasing: 'elasticOut'
},
{
name: '',
type: 'bar',
xAxisIndex: 2,
yAxisIndex: 2,
barWidth: 10,
stack: '2',
itemStyle: {
normal: {
color: colors[1].borderColor
}
},
data: borderData,
tooltip: {
show: false
}
}
]
}