echarts设置标线和最大值最小值
基本ECharts图表初始化配置
设置动态的y轴范围(min/max值)
通过markPoint标记最大值和最小值点
使用markLine添加水平参考线
配置双y轴图表
自定义标记点和线的样式(颜色、符号等)
响应式调整图表大小
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
// 创建一个echarts实例
var myChart = echarts.init(dom, null, {
renderer: 'canvas', // 渲染模式,支持'canvas'或者'svg'
});
var app = {};
var option;
let max = 1300; // 动态y轴最大值
let min = 0; // 动态轴最小值
let yVal = 400; // 标记线数据
option = {
legend: {
show: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisLabel: {
interval: 'auto' //坐标轴刻度标签的显示间隔
}
},
tooltip: {
trigger: 'axis'
},
// 配置双y轴图表
yAxis: [
{
type: 'value'
},
{
name: '%',
min: min,
max: max
}
],
series: [
{
name: '测试1',
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
// 标记最大最小值
markPoint: {
data: [
{
type: 'max',
name: '最大值'
},
{
type: 'min',
name: '最大值'
}
],
symbol: 'pin',
symbolSize: 50,
label: {
// color: 'white', // 标签颜色
formatter: '{c}' // 显示名称和值({b}=name, {c}=value)
}
}
},
{
data: [720, 832, 801, 834, 1190, 1230, 1220],
name: '测试2',
type: 'line',
// 使用y轴的第二个数据
yAxisIndex: 1,
// 设置图表标线
markLine: {
symbol: ['none', 'none'], //去掉两端箭头
data: [
{
lineStyle: {
//标注线样式
normal: {
type: 'solid',
color: 'red' //标注线颜色
}
},
yAxis: yVal,
type: 'average' //标线的数据类型
}
]
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>