一个价值 200 的 Echart 问题

我帮你弄 加我 id 同名

用 MarkLine 实现，搞不定 v 我：bGlmZWRldmVy

已解决 option = {
xAxis: [
{
type: "value",
formatter: "{value}%",
min: 0,
max: 100
}
],
yAxis: [
{
type: "category",
data: ["40 - 50 周岁", "20 - 40 周岁", "1 - 20 周岁"]
}
],
series: [
{
data: [20, 30, 50],
type: "bar",
roundCap: true,
// 添加 markLine 配置
markLine: {
// 控制线的样式
lineStyle: {
color: "red", // 线的颜色
width: 2, // 线的宽度
type: "solid" // 线的类型（实线）
},
// 控制标签（可选）
label: {
show: true, // 是否显示标签
position: "end", // 标签位置
formatter: "目标线", // 标签内容
color: "red"
},
// 控制 tooltip
tooltip: {
show: true, // 开启 tooltip
formatter: "目标线: 在 20-40 周岁 和 1-20 周岁 之间" // tooltip 内容
},
// 定义线的具体位置
data: [
{
yAxis: 1.5 // 在 Y 轴的 1.5 位置画一条水平线（即 20-40 周岁 和 1-20 周岁 之间）
}
]
}
}
]
};

@kakakakaka8889 看一下我的示意图片吗，我需要这条线在两个柱状图的中间

运行地址： https://echarts.apache.org/examples/zh/editor.html?c=bar-data-color


option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: ['Mon', 'Tue', '', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // 在 Tue 和 Wed 之间增加一个占位符
boundaryGap: true, // 允许间隔
axisTick: { show: false }, // 隐藏刻度
axisLine: { show: false } // 隐藏轴线
},
series: [
{
type: 'bar',
barWidth: 30,
data: [120, 200, 0, 150, 80, 70, 110, 130], // 在占位符上填充 0 （避免绘制柱子）
markLine: {
symbol: 'none', // 取消箭头
label: {
show: true,
position: 'middle',
formatter: '分隔',
color: '#333',
fontSize: 14,
fontWeight: 'bold'
},
lineStyle: {
type: 'dashed', // 让线变成虚线
color: '#ff0000',
width: 2
},
data: [{ yAxis: 2 }] // 让线出现在 Tue 和 Wed 之间的空白处
}
}
]
};

帮你问 GPT 吧。

实现的核心思路是：利用 ECharts 的辅助标记功能（ markLine ）来绘制这条线。由于 markLine 可以附加在系列上，我们可以采用两种方式实现：

[方案一] 在原有柱状图的系列中加 markLine
缺点是 markLine 的“数据”一般是用来标示某个值（例如平均值、最大值……），而这里我们需要的标线位置应位于两根柱的分界处； 因为类别轴默认取每个类别的中心位置，所以“1-20”对应位置下标为 0 ，“20-40”位置为 1 ，“40-80”为 2 。两根柱之间的分界位置则对应 0.5 （“1-20”和“20-40”之间）或其他小数。

[方案二] 增加一个“虚拟”系列（比如 scatter 系列，数据为空）专门绘制 markLine 。
这种方法比较灵活，不会干扰真正的业务数据。我们在该系列中用 markLine 绘制一条从图表最左边到最右边的辅助线，并在其中指定其所在的 y 坐标为 0.5 （即位于第 0 和第 1 位置之间）。同时为 markLine 配置 tooltip 和 label ，从而鼠标经过时显示“限速 40”。

这里推荐方案二，代码示例如下：
/* Javascript 示例代码 */
var myChart = echarts.init(document.getElementById('chart'));

var option = {
tooltip: {
// 主提示框可以配置成 axis 触发（也可以是 item ），但这里我们希望 markLine 自己有 tooltip
trigger: 'axis'
},
grid: {
left: '10%',
right: '10%',
bottom: '15%',
top: '10%'
},
xAxis: {
type: 'value',
name: '车辆数'
},
yAxis: {
type: 'category',
data: ['1-20', '20-40', '40-80'],
name: '区间'
},
series: [
{
name: '车辆数量',
type: 'bar',
data: [120, 200, 150] // 每个区间的车辆数
},
// 增加一个虚拟 scatter 系列，用来绘制辅助线
{
type: 'scatter',
// data 留空（或设置为 []）后只显示 markLine
data: [],
markLine: {
// 这里设置 markLine 线的样式、tooltip 和 label
tooltip: {
// marker: 图形标识符（可选），formatter 指定显示文本
formatter: '限速 40'
},
label: {
show: true,
formatter: '限速 40',
position: 'middle', // 在线上中间显示文字
color: '#f44336'
},
lineStyle: {
color: '#f44336',
width: 2,
type: 'solid'
},
// 数据格式为二维数据：数组内包含一组起始点和终止点
// 由于 y 轴为类目轴，数值型 y （如 0.5 ）会被转换为类目轴的对应位置，
// 这里 0.5 即在第一根柱和第二根柱中间（因为各类别的中心分别位于 0 、1 、2 ）
data: [
[
{ coord: [0, 0.5] },
{ coord: ['max', 0.5] }
]
]
}
}
]
};

myChart.setOption(option);

@baojunz 这个中间隔的宽了，这条线不应该改变原本 y 轴的结构

后面的朋友注意哈：
1> 这条线是在 Y 轴两个柱状图的中间，而不是某一个柱的中间
2> 不要改变原有的 Y 轴结构
3> 可以就把代码和截图发在评论区，第一个满足上面要求的加我 telegram

https://codepen.io/yangjunjun/pen/LEYBEXm
思路：
1. 使用第二个 Y 坐标轴
2. markLine

@xngiser 厉害，加我 telegram 吧。

@ibeta 我 telegram 账号限制没法加你，请加我 bGFpeWluMTY2Ng== base64 加密

是已经解决了吗？楼主

学习了

@AmberJiang 是的

@ibeta ok 学习了