如何设置 Echarts 标线(markLine)及平均值、最大最小值及颜色

A kitten
蒋川
B 端数据开发,卡拉云联合创始人
最近更新 2022年04月18日

如何设置 Echarts 标线(markLine)及平均值、最大最小值及颜色

Echarts 标线(MarkLine)包含多种可选功能,可以指定数值,直接求平均值、最大值、最小值,变换颜色、实现、虚线,标线提示位置等。

标线 markLine 放在 series 内即可显示。本文将详细讲解 Echarts 标线的所有使用方法。

卡拉云标线示例

另外推荐使用卡拉云搭建前端图表,直接粘贴本文代码,即可快速生成 Echarts 动态图表,无需搭建任何前端框架,开箱即用。

卡拉云是新一代低代码开发平台,无需掌握任何前端技术,仅需拖拽组件即可快速搭建属于你的后台管理工具。现在注册卡拉云,了解更多案例

基础:Echarts 标线标准设置

echarts-markline-basic

我们先来画出第一条线标准的 Echarts 标线,这条线是指定高度(2700)的虚线。

Echarts 完整代码,有关标线的部分在 markLine 部分。

option = {
        title: {
          text: "卡拉云新用户激活数据",
          subtext: "Demo 虚构数据",
          x: "center",
        },
        xAxis: {
          name: "月份",
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#3366CC",
            },
          },
          boundaryGap: false, //数据从 Y 轴起始
          data: [
            "1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",
          ],
        },

        yAxis: {
          name: "人次",
          type: "value",
          min: 0, 
          max: 4000,
          splitNumber: 7, 
          axisLine: {
            lineStyle: {
              color: "#3366CC",
            },
          },
        },
        series: [
          {
            data: [
              1107, 1352, 1740, 1968, 1647, 1570, 1343, 1757, 2547, 2762, 3170,
              3665,
            ],
            type: "line",
            symbol: "circle",
            smooth: 0.5, 
            itemStyle: {
              normal: {
                label: {
                  show: true,
                },
                lineStyle: {
                  width: 3, 
                  type: "solid", 
                },
              },
            },
            markLine: {
              /* symbol:"none",*/ // 是否去掉标线前后的岂止箭头
                label:{
                       position:"middle", //标线位置,start,middle,end
                       },
              data: [
                  label: {
                    formatter: "去年峰值(2700)",
                    fontSize: "10",
                  },
                  yAxis: 2700, // 标线值
                },
              ],
            },
          },
        ],

        color: ["#99CC33"], // 折线的颜色
      };

以上这段代码,只需在卡拉云里拖拽图表组件,然后粘贴进去即可生成。

kalacloud-echarts

卡拉云开箱即用,无需搭建前端框架,Echarts 即拖即用。

进阶:Echarts 双标线、颜色、平均值、最大最小值设置

echarts-markline-all

接着我们来学习一下如何设置「平均、最大、最小值标线」,更改「标线颜色」,增加「多标线」的方法。

markLine 部分的代码:

markLine: {
              /* symbol:"none",*/ // 是否去掉标线前后的岂止箭头
                label:{
                       position:"middle", //标线位置,start,middle,end
                       },
              data: [
                {
                  type: "average", //'min', 'max', 'average' 最小、最大、平均
                  label: {
                    formatter: "平均值线",
                    fontSize: "10",
                  },
                },
                {
                  type: "average",
                  lineStyle: {  //标线样式,虚线'dotted' 实线'solid' 及颜色
                    type: "dotted",
                    color: "#ff0000",
                  },
                  label: {
                    formatter: "去年峰值(2600)",
                    fontSize: "10",
                  },
                  yAxis: 2600, // 标线值
                },
                {
                  lineStyle: {
                    type: "solid",
                    color: "#3366CC",
                  },
                  label: {
                    formatter: "今年目标(3200)",
                    fontSize: "10",
                  },
                  yAxis: 3200,
                },
              ],
            }

扩展阅读:《Echarts 折线图完全配置指南

使用卡拉云生成 Echarts 图表

使用 Echarts 需要先搭前端框架再引入,对于前端技能要求较高。如果你对前端不是很熟练,又或者并不想重复造轮子,那么推荐卡拉云,卡拉云内置包括图表在内的多种常用组件,仅需鼠标拖拽即可生成,完全不用懂任何前端。

卡拉云标线示例

卡拉云是新一代低代码开发工具,免安装部署,可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流,定制开发。无需繁琐的前端开发,只需要简单拖拽,即可快速搭建企业内部工具。原来三天的开发工作量,使用卡拉云后可缩减至 1 小时,欢迎免费试用卡拉云

扩展阅读: