【Echarts】markLine自定义位置及样式

效果：

1、markLine标记均值

markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }

2、自定义markLine

 markLine: {
              symbol: ['none', 'arrow'], // none为标线两端的样式为无，可更改
              data: [
                {
                  silent: false,
                  yAxis: 50,  // 警戒线位置，这个赋值为纵轴50
                  label: {
                    position: 'end', // 文字位置
                    formatter: '标准供给时长',  //文字
                    color: 'green'  // 文字颜色
                  },
                  lineStyle: { type: 'solid', color: 'pink', width: 3 } // 样式： 线型、颜色、线宽
                }
              ]
            }
    }

完整代码：

  series: [
    {
      name: 'Rainfall',
      type: 'bar',
      data: [
        2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
      ],
      markPoint: {
        data: [
          { type: 'max', name: 'Max' },
          { type: 'min', name: 'Min' }
        ]
      },
      markLine: {
        data: [{ type: 'average', name: 'Avg' }]
      }
    },
    {
      name: 'Evaporation',
      type: 'bar',
      data: [
        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
      ],
      markPoint: {
        data: [
          { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
          { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
        ]
      },
      markLine: {
              symbol: ['none', 'arrow'], // none为标线两端的样式为无，可更改
              data: [
                {
                  silent: false,
                  yAxis: 50,  // 警戒线位置，这个赋值为纵轴50
                  label: {
                    position: 'end', // 文字位置
                    formatter: '标准供给时长',  //文字
                    color: 'green'  // 文字颜色
                  },
                  lineStyle: { type: 'solid', color: 'pink', width: 3 } // 样式： 线型、颜色、线宽
                }
              ]
            }
    }
  ]

试一试：https://echarts.apache.org/examples/zh/editor.html?c=bar1

代码007普通

打赏 收藏 海报 链接