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

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>