echarts+vue：实现折线图堆叠面积渐变色效果，且拐点标志的小圆点也为渐变色

小蹦跶儿
2,464 阅读4分钟

前言：

最近做了一个关于echarts折线图的需求，项目是vue的，设计稿要求折线图中的每条线颜色不同，且堆叠面积中的背景色是渐变色，另外折线拐点标志的小圆点要求实心且为渐变色。

现将我的实现方案分享如下。

一、需要实现的效果图

image.png

二、背景

在ECharts中，有折线图堆叠的示例，我这边需要的是平滑折线图，所有的修改也是基于平滑折线图做的修改。

本文主要介绍：

  • 如何让每条折线颜色不同；
  • 每条线的堆叠面积如何为渐变色；
  • 折线拐点标志如何设置为渐变色；
  • 图例的圆点大小和横线长度如何设置。

三、实现思路

由于这是一个集多数据的折线图，且每条折线颜色不同、堆叠面积渐变色不同，要设置的颜色数值比较多，所以考虑到代码的整洁性和复用性，可以将每条折线的设置对象写成公共方法，经过传值来完成。

四、为每条线设置不同颜色、堆叠面积渐变色、折线拐点渐变色

这些是在series中进行设置的，series是个数组，我们有三条线表示三种数据，每条线对应数组中的一个对象，即series数组中包含了三个对象：

image.png

series: [
    getLineSeriesData('enterCount'),
    getLineSeriesData('telEnterCount'),
    getLineSeriesData('telAnsweredCount'),
]

说明：

为了提高代码的可读性和可拓展性，减少冗余代码，此处将数组中的对象提取成一个公共方法，根据参数不同，显示不同数据。

由于设置的颜色数据比较多，数组中的对象主要包括各种颜色。

  1. 首先将每条线的配置对象写成公共方法：

image.png

上图是该公共方法的代码内容截图，主要是将折线名称(name)和数据(data)、堆叠面积渐变色的色值(areaStyle中的color)、折线拐点的渐变色（itemStyle中的color和borderColor）写成变量。

附上代码：

function getLineSeriesData(target: keyof typeof propDict): SeriesOption {
  return {
    name: propDict[target].name,
    data: incomingCallData.data.data[target],
    type: 'line',
    symbol: 'circle',
    smooth: true,
    lineStyle: {
      width: 2,
    },
    tooltip: {
      trigger: 'axis'
    },
    areaStyle: {
      color: {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 0.95,
        colorStops: [
          {
            offset: 0,
            color: propDict[target].colorStart, // 0% 处的颜色
          },
          {
            offset: 1,
            color: propDict[target].colorStop, // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
    },
    itemStyle: { // 折线拐点标志的样式
      color: propDict[target].color, // 圆点的颜色
      borderColor: propDict[target].borderColor, // 描边颜色
      borderWidth: 6, // 描边线宽
    }
  }
}

备注：所有的问题都在上面这些代码设置中。下面是解读：

  • smooth: true,：是否平滑曲线显示。
  • areaStyle：区域填充样式，即堆叠面积渐变色的设置。
  • itemStyle：折线拐点标志的样式。圆点的渐变色设置，可以采取设置描边颜色和宽度来实现，将圆点中心的颜色和描边颜色分别设置即可，就可以实现了。
  1. 将渐变色的颜色、线条名称(name)进行自定义：

image.png

const propDict = {
  enterCount: {
    name: '来电数量',
    index: 0,
    color: 'rgba(61, 103, 255, 1)',
    borderColor: 'rgba(61, 103, 255, 0.45)',
    colorStart: 'rgba(61, 103, 255, 0.27)',
    colorStop: 'rgba(61, 103, 255, 0.07)'
  },
  telEnterCount: {
    name: '进入队列数量',
    index: 1,
    color: 'rgba(252, 137, 4, 1)',
    borderColor: 'rgba(252, 137, 3, 0.45)',
    colorStart: 'rgba(252, 137, 4, 0.27)',
    colorStop: 'rgba(252, 137, 4, 0.07)'
  },
  telAnsweredCount: {
    name: '坐席接通数量',
    index: 2,
    color: 'rgba(19, 251, 157, 1)',
    borderColor: 'rgba(19, 251, 157, 0.45)',
    colorStart: 'rgba(19, 251, 157, 0.27)',
    colorStop: 'rgba(19, 251, 157, 0.07)'
  }
}
  1. 最后，在series中进行调用即可。

在series数组中的三个对象，就解决了多数值线条的问题。

  1. 图例的样式设置，包括圆点的大小和横线的长度：

image.png

legend: {
    type: 'scroll',
    bottom: 10,
    left: 'center',
    itemHeight: 5, // 圆点大小
    itemWidth: 16, // 线的长度
    textStyle: {
      color: 'rgba(255, 255, 255, 0.7)',
      fontSize: 10
    }
},

五、总结

其实Echarts是很强大的，能满足的个性化定制风格很灵活。只要仔细阅读文档，对照示例，综合研究，大多数需求都能满足，特别是样式上，示例只是给我们展示了最基础的东西，有些配置项不明确的话，大不了代入看效果。

以上，希望对大家有帮助！

avatar
文章
阅读
粉丝