Echarts 最大值，最小值，平均值，标注及位置调整

最新推荐文章于 2024-04-01 14:30:29 发布

暮暮最后的倔强

最新推荐文章于 2024-04-01 14:30:29 发布

阅读量1.8k

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_35810154/article/details/132858187

版权

import { MarkPointComponent, MarkLineComponent } from 'echarts/components'
echarts.use([MarkPointComponent, MarkLineComponent])

如果你已经引入echarts ，却无法显示平均值的线，请尝试引入上述组件

 let obj2 = {
    date: ['2023/07/31', '2023/07/31', '2023/07/31', '2023/07/31', '2023/07/31', '2023/07/31'],
    data: [7, 8, 9, 3, 2, 1]
  }
  handleOption_1_2(obj2)
function handleOption_1_2(data) {
  config.option_1_2 = {
    title: {
      text: '新增当量趋势'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: data.date,
      axisLabel: {
        interval: 0,
        rotate: 30
        // textStyle: {
        //   color: 'white' // 设置横坐标文字颜色为红色
        // }
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        show: false
      }
    },
    series: [
      {
        data: data.data,
        type: 'line',
        markLine: {
          symbol: ['none', 'none'],
          data: [
            {
              type: 'average',
              name: '平均值',
              lineStyle: {
                //标注线样式
                normal: {
                  type: 'dotted',
                  color: '#000' //标注线颜色
                }
              },
              label: {
                show: true,
                position: 'middle', // 表现内容展示的位置
                formatter: '{a|平均值 : }{b|{c}}', // 标线展示的内容
                rich: {
                  a: {
                    // fontSize: '20px'
                    backgroundColor: 'transparent'
                  },
                  b: {
                    backgroundColor: 'transparent'
                  }
                }
              }
            },

            {
              type: 'max',
              name: '最大值',
              // symbol: ['none', 'none'],
              lineStyle: {
                //标注线样式
                normal: {
                  type: 'dotted',
                  color: '#000' //标注线颜色
                }
              },
              label: {
                show: true,
                position: 'left',
                formatter: '{a|上限(UCL) : }{b|{c}}',
                rich: {
                  a: {
                    backgroundColor: 'transparent',
                    color: '#000'
                  },
                  b: {
                    backgroundColor: 'transparent',
                    color: '#000'
                  }
                },
                padding: [120, 0, 0, 60]
              }
            },
            {
              type: 'min',
              name: '最小值',
              symbol: 'none',
              lineStyle: {
                //标注线样式
                normal: {
                  type: 'dotted',
                  color: '#000' //标注线颜色
                }
              },
              label: {
                show: true,
                position: 'end',
                formatter: '{a|下限(UCL) : }{b|{c}}',
                rich: {
                  a: {
                    backgroundColor: 'transparent',
                    color: '#000'
                  },
                  b: {
                    backgroundColor: 'transparent',
                    color: '#000'
                  }
                },
                padding: [0, 0, 25, -80]
              }
            }
          ]
        }
      }
    ]
  }
}

运行后如下图所示，根据实际情况进行位置调整