echart 柱状图加短线
let data=[51, 58, 63, 57, 63, 40, 124,108, 63, 63]
let max=Math.max.apply(null,data)*0.03
let linedata=Array(data.length).fill(max)
this.options = {
grid: {
left: 20,
right: 20,
bottom: "10",
top: "18%",
containLabel: true,
},
tooltip: {},
xAxis: [
/*横坐标*/
{
axisTick: {show: false},
type: 'category',
axisLine: {
show: true,
lineStyle: {
color: "white",
},
},
data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
axisPointer: {
type: 'shadow'
}
},
/*隐藏一个不显示的横坐标,用作横线的位置*/
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: ["内超", "锡超", "乌超", "呼和浩特", "包头", "乌兰察布", "锡林郭勒",'乌海','阿拉善','薛家湾'],
},
],
yAxis: [
{
axisTick: {
show: false
},
splitLine: {
lineStyle:{
type:'dashed'//虚线
},
show: true //隐藏
},
type: "value",
name: '次',
// interval: 25,
splitNumber: 4, // 坐标轴的分割段数
axisLine: {
show: false,
lineStyle: {
color: "white",
},
},
}
],
series: [
{
type: 'bar',
barWidth:'30%',
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top',
// formatter: '{c}%',
textStyle: { //数值样式
color: "#FFFFFF",
// fontSize: 16,
// fontWeight: 600
}
},
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#1595fb'
}, {
offset: 1,
color: '#21346c'
}]),
// barBorderRadius:15
}
},
data: data,
},
{
/* 这个bar是撑起横线的高度,并设置透明*/
// name: "盈亏平衡点",
stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
type: 'bar',
xAxisIndex: 1,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)'/* 设置bar为隐藏,撑起下面横线*/
}
},
data: data,
},
{
/* 这个bar是横线的显示*/
// name: "盈亏平衡点",
stack: 'breakevenEleGroup', /* 盈亏点数据组,需要设置才能将两个bar堆积在一起*/
type: 'bar',
barWidth:'30%',
xAxisIndex: 1,
barGap: '0',
itemStyle: {
normal: {
color: '#159aff'
}
},
data:linedata
}
]
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探