Echarts 折线图

功能

每月记录值，当数据大于600画红线，小于300画蓝线，其他在中间值为黑线。鼠标移动上去后，现在数据值。

option = {
  tooltip: {
    trigger: 'axis', // 触发类型：坐标轴触发
    show: true, // 显示提示框
    formatter: function (params) {
      // 自定义提示框内容格式
      return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value
    }
  },
  xAxis: {
    type: 'category',
    data: ['3月1日', '4月1日', '5月1日', '6月1日', '7月1日', '8月1日', '9月1日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [700, 120, 200, 150, 330, 400, 80, 70, 30, 110, 190],
      type: 'line',
      // 设置 smooth 为 true 来启用平滑效果
      smooth: true,
      markLine: {
        symbol: 'none',
        silent: true,
        lineStyle: {
          type: 'solid',
          width: 2
        },
        data: [
          { yAxis: 600, name: '1', lineStyle: { color: 'red' } }, // 下限
          { yAxis: 300, name: '2', lineStyle: { color: 'blue' } } // 上限
        ]
      }
    }
  ],
  visualMap: {
    show: false,
    dimension: 1,
    pieces: [
      { gt: 600, color: 'red' }, // 大于上限
      { lt: 300, color: 'blue' }, // 小于下限
      { gte: 300, lte: 600, color: 'black' } // 在范围内
    ]
  }
};

完整的代码

<el-card shadow="never">
    <el-skeleton :loading="loading" animated>
      <Echart :height="500" :options="echartsOption" />
    </el-skeleton>
  </el-card>



import { EChartsOption } from 'echarts'




const echartsOption = reactive<EChartsOption>({
  tooltip: {
    trigger: 'axis', // 触发类型：坐标轴触发
    show: true, // 显示提示框
    formatter: function (params) {
      // 自定义提示框内容格式
      return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value
    }
  },
  xAxis: {
    type: 'category',
    data: ['3月1日', '4月1日', '5月1日', '6月1日', '7月1日', '8月1日', '9月1日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [700, 120, 200, 150, 330, 400, 80, 70, 30, 110, 190],
      type: 'line',
      // 设置 smooth 为 true 来启用平滑效果
      smooth: true,
      markLine: {
        symbol: 'none',
        silent: true,
        lineStyle: {
          type: 'solid',
          width: 2
        },
        data: [
          { yAxis: 600, name: '1', lineStyle: { color: 'red' } }, // 下限
          { yAxis: 300, name: '2', lineStyle: { color: 'blue' } } // 上限
        ]
      }
    }
  ],
  visualMap: {
    show: false,
    dimension: 1,
    pieces: [
      { gt: 600, color: 'red' }, // 大于上限
      { lt: 300, color: 'blue' }, // 小于下限
      { gte: 300, lte: 600, color: 'black' } // 在范围内
    ]
  }
}) as EChartsOption