Echarts 横轴标记线的实现
Echarts 横轴标记线的实现
标记线可在图标随意位置绘制一条刻度,方便对数据进行参照对比。 默认情况下,横轴为 category 纵轴为连续的数值。所以标记线即为纵轴上对应某个值的横线。 如下来自 Echarts 官网文档中的示例展示了简单的标记线用法: option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: {}, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", markLine: { data: [{ type: "average" }], silent: true } }]} 标记线的位置上面标记线配置部分的 data 决定了标记线的值,也就是处于纵轴的哪个位置: markLine: { data: [{ type: "average" }], silent: true } 这里通过 通过指定 markLine: { data: [{ name:'标记线',+ yAxis:333 }], silent: true } 标记线的方向横轴标记线,也很简单,指定 x 值即可。 option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: {}, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", barWidth: 6, markLine: { data: [{ name:'标记线', xAxis: 'Tue' }], silent: true } }]} 需要注意的是,因为横轴是 横轴任意位置标记线如果要实现在横轴任意位置绘制标记线,就需要先创建好横轴对应的坐标点。比如星期一和星期二中间,加一个 option = { xAxis: { type: "category",- data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]+ data: ["Mon", "Noon","Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: {}, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: "line", barWidth: 6, markLine: { data: [{ name:'标记线',+ xAxis: 'Noon' }], silent: true } }] } 但横轴新增的坐标值影响了原来拆线的展示,使得 所以为了实现,
需要实现类似于 y 轴那样的标记线效果。 首先把拆线图改为柱状图,同时减小 bar 的大小方便查看: option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: {}, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320],- type: “line”,+ type: "bar",+ barWidth: 6, markLine: { data: [{ name:'标记线', yAxis:333 }], silent: true } }] } 效果: 然后把横轴由 const data = [820, 932, 901, 934, 1290, 1330, 1320].map((v, i) => [ new Date(new Date().getTime() + i * 24 * 60 * 60 * 1000) .toJSON() .substring(0, 19) .replace("T", " "), v,]);option = { xAxis: { type: "time", splitLine: { show: false, }, }, yAxis: {}, series: [ { data: data, type: "bar", barWidth: 6, markLine: { data: [ { name: "标记线", xAxis: new Date(new Date().getTime() + 1 * 12 * 60 * 60 * 1000) .toJSON() .substring(0, 19) .replace("T", " "), }, ], silent: true, }, }, ],}; 标记线的标签标记线默认展示了其所在轴对应的值。当然,可以自定义: const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; const data = [820, 932, 901, 934, 1290, 1330, 1320].map((v, i) => [ new Date(new Date().getTime() + i * 24 * 60 * 60 * 1000) .toJSON() .substring(0, 19) .replace("T", " "), v, ]); option = { xAxis: { type: "time", splitLine: { show: false, }, }, yAxis: {}, series: [ { data: data, type: "bar", barWidth: 6, markLine: {+ label: {+ formatter: "{b}{c} 999",+ }, data: [ { name: "标记线", xAxis: new Date(new Date().getTime() + 1 * 12 * 60 * 60 * 1000) .toJSON() .substring(0, 19) .replace("T", " "), }, ], silent: true, }, }, ], }; 相关资源
|
The text was updated successfully, but these errors were encountered: |
来源https://www.cnblogs.com/Wayou/p/14706171.html