需求如下
配置项
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let total = 650;
option = {
tooltip: {
trigger: 'axis'
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['2022', '2023']
}
],
yAxis: [
{
type: 'value',
max: function (value) {
return value.max > total ? value.max : total + 20;
}
}
],
series: [
{
name: 'A',
type: 'bar',
stack: 'ad',
barWidth: 100,
emphasis: {
focus: 'series'
},
label: {
show: true,
formatter: function (value) {
return value.seriesName + ' ' + value.data;
}
},
itemStyle: {
// borderRadius: 30,
barBorderRadius: 30
},
data: [120, 140]
},
{
name: 'B',
type: 'bar',
stack: 'ad',
barWidth: 100,
emphasis: {
focus: 'series'
},
label: {
show: true,
formatter: function (value) {
return value.seriesName + ' ' + value.data;
}
},
itemStyle: {
// borderRadius: 30,
barBorderRadius: 30
},
data: [220, 180]
},
{
name: 'C',
type: 'bar',
stack: 'ad',
barWidth: 100,
emphasis: {
focus: 'series'
},
markLine: {
symbol: ['none', 'none'],
symbolOffset: ['100%', 0],
data: [
// { type: 'max', name: '实际 Total' },
[
{
name: '650',
// xAxis:0,
x: '20%', // 百分比或者数字
yAxis: 650,
symbol: 'none',
lineStyle: {
width: 2,
// dashOffset:100,
type: 'solid'
}
},
{
// symbolOffset:["100%",0],
name: '标线1终点',
// xAxis:'Jan',
x: '40%',
yAxis: 650,
symbol: 'none'
}
],
[
{
name: '450',
x: 480,
yAxis: 450,
symbol: 'none',
lineStyle: {
width: 2,
type: 'solid'
}
},
{
name: '标线2终点',
x: 680,
yAxis: 450,
symbol: 'none'
}
]
// [{
// name: '阈值',
// coord:[0, 650],
// lineStyle:{
// type:'solid',
// color:'red'
// }
// },
// {
// name: '阈值',
// coord:[1, 650],
// lineStyle:{
// type:'solid',
// color:'red'
// }
// }]
]
},
label: {
show: true,
formatter: function (value) {
return value.seriesName + ' ' + value.data;
}
},
itemStyle: {
// borderRadius: 30,
barBorderRadius: 30
},
data: [150, 190]
}
]
};
option && myChart.setOption(option);