// 监听legend
function bindListen(myChart) {
myChart.on('legendselectchanged', (params) => {
// 只有选择林地的时候
if (!params.selected[legendData[1].name] && params.selected[legendData[0].name]) {
option.series[4].data = xBar3
option.series[2].itemStyle.normal.color = color[0]
} else {
option.series[4].data =xBar2
option.series[2].itemStyle.normal.color = color[1]
}
if (!params.selected[legendData[1].name] && !params.selected[legendData[0].name]) {
option.series[2].itemStyle.normal.color = color[2]
}
// 使用更新后的 option，渲染图表
myChart.setOption(option)
})
};
var xData = ['其他林地', '乔木林地', '橡胶园', '茶园', '竹林地', '灌木林地', '其他园地', '果园'];
var val = {
data1: ['608.123', '643.859', '185.354', '209.232', '732.714', '758.788', '198.801', '281.668'],
data2: ['1129.372', '1195.738', '344.228', '388.573', '1360.755', '1409.177', '369.202', '523.098']
};
var legendData = [
{
name: '林地',
itemStyle: {
color: 'rgba(96,255,212,0.6)'
},
textStyle: {
color: 'rgba(255,255,255,0.9)'
}
},
{
name: '林木',
itemStyle: {
color: 'rgba(0,188,255,0.6)'
},
textStyle: {
color: 'rgba(255,255,255,0.9)'
}
}];
var color = [
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(96,255,212,0.8)'
},
{
offset: 0.5,
color: 'rgba(96,255,212,0.8)'
},
{
offset: 0.5,
color: 'rgba(0,190,139,0.8)'
},
{
offset: 1,
color: 'rgba(0,190,139,0.8)'
}
]
},
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(0,188,255,0.8)'
},
{
offset: 0.5,
color: 'rgba(0,188,255,0.8)'
},
{
offset: 0.5,
color: 'rgba(0,138,186,0.8)'
},
{
offset: 1,
color: 'rgba(0,138,186,0.8)'
}
]
},
{
type: 'linear',
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: 'rgba(0,188,255,0)'
},
{
offset: 0.5,
color: 'rgba(0,188,255,0)'
},
{
offset: 0.5,
color: 'rgba(0,138,186,0)'
},
{
offset: 1,
color: 'rgba(0,138,186,0)'
}
]
}
];
var barWidth = 30;
let xBar1 = [];
let xBar2 = [];
let xBar3 = [];
for (let i = 0; i < val.data1.length; i++) {
xBar1.push(Number(val.data2[i]));
xBar2.push(Number(val.data1[i]) + Number(val.data2[i]));
xBar3.push(Number(val.data1[i]));
};
option = {
backgroundColor:"black",
//你的代码
title: {
subtext: '亿元',
left: '3%'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(0,0,0,0.5)',
borderWidth: 0,
formatter: function (params) {
var domHTml = '<span style="display:inline-block;margin-left:5px;width:10px;height:10px;"></span>'
if (params.length === 2) {
return (
params[0].axisValue +
'<br/>' +
params[1].marker +
params[1].seriesName +
domHTml +
val.data1[params[0].dataIndex] +
'亿元' +
'<br/>' +
params[0].marker +
params[0].seriesName +
domHTml +
val.data2[params[0].dataIndex] +
'亿元'
)
} else {
return params[0].axisValue + '<br/>' + params[0].marker + params[0].seriesName + domHTml + val.data1[params[0].dataIndex] + '亿元'
}
},
textStyle: {
color: 'rgba(255,255,255,0.9)'
}
},
legend: {
data: legendData
},
xAxis: [
{
axisLine: {
lineStyle: {
color: '#90979c'
}
},
axisTick: {
show: false
},
splitArea: {
show: false
},
data: xData,
axisLabel: {
interval: 0,
rotate: 0,
formatter: function (value) {
let ret = '' // 拼接加\n返回的类目项
var maxLength = 4 // 每项显示文字个数
var valLength = value.length // X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength) // 类目项需要换行的行数
if (rowN > 1) {
// 如果类目项的文字大于5,
for (let i = 0; i < rowN; i++) {
let temp = '' // 每次截取的字符串
var start = i * maxLength // 开始截取的位置
var end = start + maxLength // 结束截取的位置
// 这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
temp = `${value.substring(start, end)}${i !== rowN - 1 ? '\n' : ''}`
ret = ret + temp // 拼接最终的字符串
}
return ret
} else {
return value
}
}
}
}
],
yAxis: [{
type: 'value',
axisLabel: {
formatter: function (value, index) {
// value大于1000时除以1000并拼接k，小于1000按原格式显示
if (value >= 1000) {
value = value / 1000 + 'k'
}
return value
}
},
splitLine: {
show: false
},
axisLine: {
lineStyle: {
color: '#90979c'
}
},
splitLine: {
show: true,
lineStyle: {
type: 'dashed',
opacity: 0.2
}
},
axisTick: {
show: false
}
}],
series: [
// data2本体
{
z: 1,
name: legendData[1].name,
type: 'bar',
barWidth: barWidth,
stack: '总量',
color: color[1],
data: val.data2
},
// data1本体
{
z: 2,
name: legendData[0].name,
type: 'bar',
barWidth: barWidth,
stack: '总量',
color: color[0],
data: val.data1
},
// 底部立体
{
z: 3,
name: '底部立体',
type: 'pictorialBar',
data: xBar1,
symbol: 'diamond',
symbolOffset: ['0%', '50%'],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color[1]
}
},
tooltip: {
show: false
}
},
// data2头部
{
z: 5,
name: legendData[1].name,
type: 'pictorialBar',
symbolPosition: 'end',
itemStyle: {
normal: {
color: color[1]
}
},
data: xBar1,
symbol: 'diamond',
symbolOffset: ['0%', '-50%'],
symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth],
tooltip: {
show: false
}
},
// data1头部
{
z: 4,
name: legendData[0].name,
type: 'pictorialBar',
data: xBar2,
symbol: 'diamond',
symbolPosition: 'end',
symbolOffset: ['0%', '-50%'],
symbolSize: [barWidth, 10],
itemStyle: {
normal: {
color: color[0]
}
},
tooltip: {
show: false
}
}
],
};
bindListen(myChart)