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>