标记线可在图标随意位置绘制一条刻度,方便对数据进行参照对比。 默认情况下,横轴为 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: |
相关文章
- 12-29python-用底部编辑线,状态栏和滚动历史记录实现“控制台外壳”的最佳方法?
- 12-29css 两边是线,中间文字的多种实现方法
- 12-29CSS实现自适应分隔线的N种方法
- 12-29TextView中跑马灯、删除线,抗锯齿,下划线效果的实现
- 12-29echarts、mapv、deck.gl动态轨迹可视化效果实现方案 岁月如风的博客
- 12-29Supermap/Cesium 开发心得----飞天动线的实现
- 12-29反射+自定义注解,实现获取注解标记的属性
- 12-29用ECharts绘制Prometheus图表,实现类似Grafana的自定义Dashboard
- 12-29echarts中的玫瑰图(饼图)如何取消显示指示线和指示文字(coderwhy后台管理系统优化2)
- 12-29Matplotlib中将以色彩、标记进行分组的线标记为同一组