【echarts】пример использования markPoint

1. Откалибровать максимальное и минимальное значения.

Вставьте сюда описание изображения

option = {
    
    
  title: {
    
    
    text: 'Temperature Change in the Coming Week'
  },
  tooltip: {
    
    
    trigger: 'axis'
  },
  legend: {
    
    },
  xAxis: {
    
    
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    
    
    type: 'value',
    axisLabel: {
    
    
      formatter: '{value} °C'
    }
  },
  series: [
    {
    
    
      name: 'Highest',
      type: 'line',
      data: [10, 11, 13, 11, 12, 12, 9],
      markPoint: {
    
     // 标定最大最小值
        data: [
          {
    
     type: 'max', name: 'Max' },
          {
    
     type: 'min', name: 'Min' }
        ]
      },
      markLine: {
    
     // 标定平均值参考线
        data: [{
    
     type: 'average', name: 'Avg' }]
      }
    }
  ]
};

2. Калибровка определенных точек

Вставьте сюда описание изображения
Как показано на рисунке выше, вы хотите отметить точку по оси Y со значением 1,5 во второй точке и отобразить значение «-100», соответствующее оси x: 1 // Отметьте положение точки по горизонтальной оси
, с индексом 1, обозначающим вторую точку (начиная с 0, это первая точка)
yAxis: -1.5 // Значение ординаты
точки маркера: -100 // Отображаемое содержимое точки маркера

markPoint: {
    
    
        data: [{
    
     name: '周最低', value: -100, xAxis: 1, yAxis: -1.5 }]
      },

3. Установите размер и цвет точки отметки.

Вставьте сюда описание изображения

option = {
    
    
  xAxis: {
    
    
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    
    
    type: 'value'
  },
  series: [
    {
    
    
      data: [150, 230, 224, 218, 135, 147, 260],
      markPoint: {
    
    
                itemStyle: {
    
     // 标记点颜色
                    color: "green"
                },
                symbolSize: 50, // 标记点大小
                data: [{
    
     name: '当前链', value:'当前链',xAxis: 2, yAxis: 0 }]
            },
      type: 'line'
    }
  ]
};

Guess you like

Origin blog.csdn.net/weixin_43361722/article/details/130381817