echarts分享(一):折线图渐变和提示框

前言

今天要分享的是一个折线图，其包含的效果有以下几点：

• 线条下方区域颜色渐变填充
• tooltip提示框内容格式化
• 提示框线的修改

完整效果如下：

任务点

图表基础

我们可以基于上一文中的基础示例来进行改造，最终达到我们想要的效果。

对于基础示例不清楚的同学可以通过echarts分享(一):项目基础进行查看了解。

左上角文字

这里的文字效果可以用两种方式来做：坐标轴名称、图表title。

图表标题(title)

在echarts数据的title属性中进行修改。

• text title的文字内容
• textStyle title的文字样式设置

title: {
  text: "产量（公斤/亩)",
  textStyle: {
    color: "#fff",
    fontSize: 16,
    fontWeight: 200,
  },
}

坐标轴名称(name)

在echarts数据的yAxis属性中进行修改

• name 坐标轴名称的文字内容
• nameLocation 坐标轴名称显示位置：start/middle/end
• nameTextStyle 坐标轴名称的文字样式设置

yAxis:{
  name:"产量（公斤/亩)",
  nameLocation:"start",
  nameTextStyle:{
    color: "#fff",
    fontSize: 16,
    fontWeight: 200,
    padding:[0,0,20,50]  //调节显示位置(与y轴label对应关系)  上、右、下、左
  }
}

图表显示位置(grid)

在图表组件中，图表与模块的边距关系是通过grid属性来设置的。

grid: {
  top: "18%",  // 图表距组件上边距离
  right: "8%", // 图表距组件右边距离
  bottom: "16%",// 图表距组件下边距离
  left: "8%",  // 图表距组件左边距离
},

数据留白(boundaryGap)

首个数据的值与y轴相交，是设置了boundaryGap属性。

• true 坐标轴两侧留白，不与y轴相交
• false 不留白，首个数据与y轴相交

xAxis:{
  boundaryGap:false
}

轴线刻度(min/max/interval)

坐标轴的刻度(类型是数值)相关由min/max/interval三个属性控制。

• min 刻度最小值(如0)
• max 刻度最大值(如100)
• interval 刻度区间值(如10)

当不设置时，也会根据数值自动调节，但可能会不符合特定的要求，所以有时会需要设置。

坐标轴刻度线(splitLine)

图表中与y轴刻度对应的蓝色线条，是基于yAxis的splitLine属性修改的。

yAxis:{
  splitLine: {
    show: true,
    lineStyle: {
      color: "rgba(0,90,198,.2)",
      width:3
    },
  },
}

区域填充(areaStyle)

曲线下的区域填充是在series配置项下的折线图(Line)内容中的areaStyle属性中设置的。

series: [
  {
      type: "line",
      ...
      areaStyle: {
        color:"#f00"
      }
   }
]

这只是普通填充效果，渐变颜色填充需要进行特定设置。

areaStyle: {
  color: new this.$echarts.graphic.LinearGradient(
        0,0,0,1,
        [
          {
            offset: 0,
            color: "rgba(0, 174, 255, 1)",
          },
          {
            offset: 1,
            color: "rgba(0, 174, 255, 0.02)",
          },
        ],false
      ),
}

• 前4个参数分别是x0,y0,x2,y2(范围0~1)相当于图形包围盒中的百分比。
• 最后一个参数是‘true’，则该四个值是绝对像素位置。

提示框(tooltip)

这里对于提示框的修改主要是几点：

• 背景色修改
• 无边框线
• 提示框指示线
• 提示框内容格式化

tooltip: {
  trigger: "axis",
  backgroundColor: "rgb(113,200,255, 0.28)",
  borderWidth: 0,
  textStyle: {
    fontSize: 15,
    color: "#fff",
  },
  axisPointer:{  // 提示框指示线
      type:"line",
      lineStyle:{
          color:"#3371FC"
      }
  },
  formatter(params) {
    return `<div style="font-size:18px;">${params[0].axisValue}</div>
              <div style="font-size:16px;margin-top:9px;">产量：${params[0].value}公斤/亩</div>`;
  },
},

注意点：只有tooltip的内容格式化formatter函数中可以使用html标签，其他配置属性的formatter格式化中不可使用