let list = [
{ name: "2022年", value: 593.92 },
{ name: "2023年", value: 759.34 }
]
option = {
// backgroundColor: '#dbf1fd',
grid: {
left: '20%',
top: '25%',
bottom: '30%',
right: '10%',
},
xAxis: {
show: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: list.map(val => {
return val.name
})
},
yAxis: [{
name: '单位：亿元',
nameTextStyle: {
// color: '#707070',
fontSize:28,
padding: [0, 0, 0, 20],
},
show: true,
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
textStyle: {
fontSize: 28,
// color: '#707070'
},
},
splitLine: {
show: true,
}
}],
series: [{
type: 'pictorialBar',
barCategoryGap: '0%',
symbol: 'path://M0,10 L10,10 C5.5,10 6.5,5 5,5 C3.5,5 4.5,10 0,10 z',
label: {
show: true,
position: 'top',
distance: 10,
color: '#000',
fontWeight: 'bolder',
fontSize: 12,
},
itemStyle: {
normal: {
color: params => {
const colorList = [
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#3bfafe',
},
{
offset: 1,
color: '#507bb5',
},
]
},
{
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#7CE7C8',
},
{
offset: 1,
color: '#53afa4',
},
]
},
];
return colorList[params.dataIndex];
},
opacity: 0.7
},
},
data: list.map(v => {
return v.value
})
// data: [123, 60, 25]
},],
};
myChart.getZr().on('click', params => {
console.log(params)
if (params.topTarget) {
alert(params.topTarget.style.text)
}
})