echarts教程（六）：折线图的最高点，最低点，平均值的标注
echarts教程（六）：折线图的最高点，最低点，平均值的标注
拿我格子衫来
发布于 2022-01-24 11:38:52
发布于 2022-01-24 11:38:52
折线图 设置最高点，最低点， 平均线
在这里插入图片描述
核心代码
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}https://echarts.apache.org/zh/option.html#series-line.markPoint
series-line.markPoint. data Array
标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。
通过x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。
用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置'min', 'max', 'average'。
直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。
当多个属性同时存在时，优先级按上述的顺序。
完整代码
option = {
title: {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {readOnly: false},
magicType: {type: ['line', 'bar']},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} °C'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: [10, 11, 13, 11, 12, 12, 9],
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
]
},
markLine: {
data: [
{type: 'average', name: '平均值'},
[{
symbol: 'none',
x: '90%',
yAxis: 'max'
}, {
symbol: 'circle',
label: {
position: 'start',
formatter: '最大值'
},
type: 'max',
name: '最高点'
}]
]
}
}
]
};本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
