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>