当前位置：首页 > article >正文

echarts设置标线和最大值最小值

article 2025/6/30 12:30:15

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>