【Echarts】电池状进度条

使用象形柱状图能够实现很多有意思的效果,这里用象形柱状图实现进度条效果,实现效果如下:

前置知识

基准柱

象形柱图可以被想象为:它首先是个柱状图,但是柱状图的柱子并不显示。这些柱子我们称为『基准柱(reference bar)』,根据基准柱来定位和显示各种象形图形(包括图片)。

每个象形图形根据基准柱的定位,是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。

symbolSize

symbolSize 表示图形的大小。

可以用数组分开表示宽和高,例如 [20, 10] 表示标记宽为 20,高为 10,也可以设置成诸如 10 这样单一的数字,表示 [10, 10]。

可以设置成绝对值(如 10),也可以设置成百分比(如 '120%'、['55%', 23])。

当设置为百分比时,图形的大小是基于基准柱的尺寸计算出来的。

例如,当基准柱基于 x 轴(即柱子是纵向的),symbolSize 设置为 ['30%', '50%'],那么最终图形的尺寸是:

宽度:基准柱的宽度 _ 30%。

高度:

如果 symbolRepeat 为 false:基准柱的高度 _ 50%。

如果 symbolRepeat 为 true:基准柱的宽度 * 50%。

基准柱基于 y 轴(即柱子是横向的)的情况类似对调可得出

此属性可以被设置在系列的 根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的 每个数据项中,表示只对此数据项生效。代码示例如下:

js 复制代码
series: [{
  symbolSize: ... // 对 data 中所有数据项生效。
  data: [23, 56]
}]
或者
series: [{
  data: [{
    value: 23
    symbolSize: ... // 只对此数据项生效
    }, {
    value: 56
    symbolSize: ... // 只对此数据项生效
  }]
}]

symbolClip

symbolClip 表示是否剪裁图形,可选值如下:

false/null/undefined:图形本身表示数值大小。

true:图形被剪裁后剩余的部分表示数值大小。

symbolClip 常用在以下场景:同时表达『总值』和『当前数值』。在这种场景下,可以使用两个系列,一个系列是完整的图形,当做『背景』来表达总数值,另一个系列是使用 symbolClip 进行剪裁过的图形,表达当前数值。

『当前值系列』设置了比『背景系列』更高的 z,使得其覆盖在『背景系列』上。

此属性可以被设置在系列的 根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的 每个数据项中,表示只对此数据项生效。代码示例如下:

js 复制代码
series: [{
  symbolClip: ... // 对 data 中所有数据项生效。
  data: [23, 56]
}]
或者
series: [{
  data: [{
    value: 23
    symbolClip: ... // 只对此数据项生效
    }, {
    value: 56
    symbolClip: ... // 只对此数据项生效
  }]
}]

symbolRepeat

symbolRepeat 用来设置图形元素是否重复。值可为:

false/null/undefined:不重复,即每个数据值用一个图形元素表示。

true:使图形元素重复,即每个数据值用一组重复的图形元素表示。重复的次数依据 data 计算得到。

a number:使图形元素重复,即每个数据值用一组重复的图形元素表示。重复的次数是给定的定值。

'fixed':使图形元素重复,即每个数据值用一组重复的图形元素表示。重复的次数依据 symbolBoundingData 计算得到,即与 data 无关。这在此图形被用于做背景时有用,symbolBoundingData 没有设置时按照基准柱的值来设置。 此属性可以被设置在系列的 根部,表示对此系列中所有数据都生效;也可以被设置在 data 中的 每个数据项中,表示只对此数据项生效。代码示例如下:

js 复制代码
series: [{
    symbolRepeat: ... // 对 data 中所有数据项生效。
    data: [23, 56]
}]
或者
series: [{
    data: [{
        value: 23
        symbolRepeat: ... // 只对此数据项生效
    }, {
        value: 56
        symbolRepeat: ... // 只对此数据项生效
    }]
}]

实现

设置背景

首先设置基础参数,因为是设置背景,种类需要设置的 z 为一个相对较小的值,代码示例及效果如下:

js 复制代码
series: [
    {
        type: "pictorialBar",
        animationDuration: 0,
        symbol: "rect",
        itemStyle: {
            normal: {
                color: "#EFEFEF",
            },
        },
        label: {
            normal: {
                show: true,
                position: "right",
                offset: [0, 2],
                distance: 30,
                textStyle: {
                    color: "#409EFF",
                    fontSize: 14,
                },
                formatter: function (a) {
                    return `${a.value}%`;
                },
            },
        },
        data: [90, 70, 80],
        z: 0,
        animationEasing: "elasticOut",
    },
];

此时的柱状图的宽度是均分的,可以通过设置 symbolSize 来调整大小,这里设置为[10, 20];通过设置 symbolRepeat 来设置图形元素是否重复及重复的类型,因为效果是类似电池的进度条,所以这里需要通过 symbolMargin 设置间隔,修改后的代码及效果如下:

js 复制代码
{
  // 背景
  type: "pictorialBar",
  animationDuration: 0,
  symbolRepeat: "fixed",
  symbolMargin: 2, // 背景间隔
  symbol: "rect",
  symbolSize: [10, 20],
  itemStyle: {
    normal: {
      color: "#EFEFEF",
    },
  },
  label: {
    normal: {
      show: true,
      position: "right",
      offset: [0, 2],
      distance: 30,
      textStyle: {
        color: "#409EFF",
        fontSize: 14,
      },
      formatter: function (a) {
        return `${a.value}%`;
      },
    },
  },
  data: [90, 70, 80],
  z: 0,
  animationEasing: "elasticOut",
},

设置真实值

真实值与设置背景基本类似,这里需要多设置一个 symbolClip,根据真实值来进行裁切,如果不设置 symbolClip,则会填满整个柱状图。代码示例及效果如下:

js 复制代码
{
  type: "pictorialBar",
  itemStyle: {
    color: {
      type: "linear",
      x: 0,
      y: 0,
      x2: 1,
      y2: 0,
      colorStops: [
        {
          offset: 0,
          color: "#1577FF", // 0% 处的颜色
        },
        {
          offset: 1,
          color: "#409EFF", // 100% 处的颜色
        },
      ],
    },
  },
  symbolRepeat: "fixed",
  symbolMargin: 2, // 背景间隔
  symbol: "rect",
  symbolSize: [10, 20],
  symbolClip: true,
  data: [90, 70, 80],
  z: 2,
  animationEasing: "elasticOut",
},

至此,电池进度柱状图完成。

代码地址:

stackblitz.com/edit/vitejs...

相关推荐
前端拾光者11 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_1817901448029 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome