ECharts实战教程:如何生成动态水波纹效果

导语:在数据可视化领域,ECharts是一款非常强大的图表库。今天,我们将带领大家学习如何使用ECharts生成动态水波纹效果,让我们的图表更加生动有趣。

一、准备工作

首先,我们需要准备一些基础数据,如下所示:

var xData = ['一', '二', '三', '四', '五'];
var data = [55, 40, 77, 57, 20];
var percent = [21, 28, 51, 35, 15];

这里,xData代表横坐标的类别,data代表每个类别的数据值,percent代表每个数据值的百分比。

二、初始化图标数据

接下来,我们需要初始化图标数据,以便在图表中展示:

var iconData = [];
data.forEach((item, index) => {
  iconData.push({
    value: item,
    symbolPosition: 'end',
  });
});

这里,我们通过遍历data数组,为每个数据值创建一个图标数据对象,并将其添加到iconData数组中。

三、配置ECharts选项

下面是生成动态水波纹效果的核心部分,我们需要配置ECharts的选项:

var option = {
  // 省略其他配置...
  series: [
    {
      name: '动态波纹',
      type: 'effectScatter',
      rippleEffect: {
        period: 1,
        scale: 2,
        brushType: 'fill',
      },
      symbolSize: [100, 25],
      symbolOffset: [0, 10],
      z: 12,
      itemStyle: {
        normal: {
          color: '#60C0DD',
          opacity: 0.5,
        },
      },
      data: iconData,
    },
    // 省略其他系列配置...
  ],
};

这里,我们创建了一个名为“动态波纹”的effectScatter类型的系列,通过rippleEffect属性配置水波纹效果,包括周期、缩放比例和刷子类型。symbolSizesymbolOffset属性用于设置图标的大小和偏移量。

四、渲染图表

最后,我们将配置好的选项应用到ECharts实例上,即可渲染出动态水波纹效果的图表:

// 假设chart是ECharts实例
chart.setOption(option);

完整代码:

var xData = ['一', '二', '三', '四', '五'];
var data = [55, 40, 77, 57, 20];
var percent = [21, 28, 51, 35, 15];
var imgList = [];
var iconData = [];
data.forEach((item, index) => {
  iconData.push({
    value: item,
    symbolPosition: 'end',
  });
});
// console.log(iconData)
var option = {
  backgroundColor: 'rgb(8,25,34)',
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(7,55,63,0.7)',
    borderColor: 'rgba(7,55,63,0.7)',
    textStyle: {
      color: '#fff',
    },
    formatter: function (params) {
      return params[0].marker + '' + params[0].name + ': ' + params[0].value;
    },
  },
  grid: {
    bottom: '20%',
    right: 0,
    left: 0,
  },
  xAxis: {
    data: xData,
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff',
      },
    },
  },
  yAxis: {
    splitLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: false,
    },
  },
  series: [
    {
      name: '动态波纹',
      type: 'effectScatter',
      rippleEffect: {
        period: 1,
        scale: 2,
        brushType: 'fill',
      },
      symbolSize: [100, 25],
      symbolOffset: [0, 10],
      z: 12,
      itemStyle: {
        normal: {
          color: '#60C0DD',
          opacity: 0.5,
        },
      },
      data: iconData,
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [130, 30],
      symbolOffset: [0, -2],
      z: 10,
      itemStyle: {
        normal: {
          color: 'transparent',
          borderColor: '#60C0DD',
          borderType: 'solid',
          borderWidth: 5,
        },
      },
      data: iconData,
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [100, 25],
      symbolOffset: [0, -5],
      z: 10,
      itemStyle: {
        normal: {
          color: 'transparent',
          borderColor: '#60C0DD',
          borderType: 'solid',
          borderWidth: 5,
        },
      },
      data: iconData,
    },
    {
      name: '',
      type: 'pictorialBar',
      symbolSize: [50, 10],
      symbolOffset: [0, -5],
      z: 12,
      itemStyle: {
        normal: {
          color: 'rgb(9,227,255)',
        },
      },
      data: iconData,
    },
    {
      type: 'bar',
      itemStyle: {
        normal: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(24,118,158)',
              },
              {
                offset: 1,
                color: 'rgba(9,30,41,0.5)', //底部渐变颜色
              },
            ],
          },
        },
      },
      silent: true,
      barWidth: 100,
      barGap: '-100%', // Make series be overlap
      data: data,
      label: {
        show: true,
        position: 'top',
        distance: 15,
        color: '#fff',
        fontSize: 12,
        formatter: (params) => {
          // console.log(params)
          return '{a|' + params.value + '}' + '\n' + '{b|' + percent[params.dataIndex] + '%}';
        },
        rich: {
          a: {
            color: '#03adff',
            fontSize: 18,
            fontWeight: 'bold',
          },
          b: {
            color: '#fff',
            fontSize: 16,
            marginTop: 15,
          },
        },
      }
    },
  ],
};


chart.setOption(option)

 

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/933508.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

详解:HTTP/HTTPS协议

HTTP协议 一.HTTP是什么 HTTP,全称超文本传输协议,是一种用于分布式、协作式、超媒体信息系统的应用层协议。HTTP往往是基于传输层TCP协议实现的,采用的一问一答的模式,即发一个请求,返回一个响应。 Q:什…

(0基础保姆教程)-JavaEE开课啦!--13课程(Interception拦截器)-完结

一、Interception(拦截器)是什么? 拦截器(Interceptor)是一种用于在请求到达目标方法之前或之后执行特定逻辑的机制。它是基于Java反射机制,属于面向切面编程(AOP)的一种应用。拦截器可以用于多种应用场景&…

vue 封装全局过滤器

1.找到utils下创建fifilter.js 一些常用的过滤方法 export const filters {//url解码urlCode: value > {if (!value) return let v decodeURIComponent(value)let bigIndex v.lastIndexOf(/)let endIndex v.lastIndexOf(.)let url v.substring(bigIndex 1, endIndex)…

Flask返回中文Unicode编码(乱码)解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

VMware:安装centos网络信息不可用

我们今天要处理的就是在vmware中安装centos出现网络不可用,导致无法安装系统的问题直接上图,我们在主机直接 cmdipconfig 发现IPV4地址都不一样,导致我们无法ping通虚拟机 那我们如何解决呢~~~~ 打开自己VM【编辑】【虚拟网络编辑器】【更…

MperReduce学习笔记下

自定义InputFormat合并小文件 案例需求 无论hdfs还是mapreduce,对于小文件都有损效率,实践中,又难免面临处理大量小文件的场景,此时,就需要有相应解决方案。 案例分析 小文件的优化无非以下几种方式: …

【MySQL 探索者日志 】第二弹 —— 数据库基础

MySQL系列学习笔记: MySQL探索者日志__Zwy的博客-CSDN博客 各位于晏,亦菲们,请点赞关注! 我的个人主页: _Zwy-CSDN博客 目录 1、MySQL服务器,数据库,表关系 2、MySQL登录连接服务器 3、MyS…

flink终止提交给yarn的任务

接上文:一文说清flink从编码到部署上线 1.查看正在执行的flink 访问地址(参考):http://10.86.97.191:8099/cluster/apps 2.终止任务 yarn application -kill appID 本文为: yarn application -kill application_17…

CentOS虚拟机开机出现问题

CentOS虚拟机断电或强制关机,再开机出现问题 错误原因: failed to mount /sysroot.(无法挂载/ sysroot。) Dependency failed for Initrd root File System.(Initrd根文件系统的依赖关系失败。) Dependency…

可靠的人形探测,未完待续(I)

HI,there!从紧张的项目中出来冒个泡! 刚好想要验证一下mmWave在有人检测方面的应用,就看到了这个活动 - 瞌睡了有枕头属于是,活动策划好评! 朋友曾关注汽车相关的技术领域,跟我吐槽过&#xff0…

web斗地主游戏实现指北

前后端通信 作为一个即时多人游戏,不论是即时聊天还是更新玩家状态,都需要服务端有主动推送功能,或者客户端轮询。轮询的时间间隔可能导致游玩体验差,因为不即时更新,而且请求数量太多可能会打崩服务器。 建议在cs间…

基于Qt的文字处理软件(二)

这期文章我们进行主窗口的一些函数的定义,同时导入一些文字处理软件的状态栏会用到的图标。下面图片是图标导入到项目后的一个示例,图标可以到阿里矢量图标库里面找到。 一、导入图标资源: 1.首先在项目目录的位置创建一个images的文件,然后将收集好的图…

Halcon_数据类型_ROI_仿射变换_投影变换

文章目录 算子快捷键一、Halcon数据类型Iconic (图标)Control (控制)Tuple (数组) 二、ROI(区域)1.代码创建ROI2.手动创建ROI 三、图形预处理1.图像的变换与矫正平移 -hom_mat2d_translate旋转缩放-HomMat2D:输入的仿射…

C语言(指针基础练习)

删除数组中的元素 数组的元素在内存地址中是连续的&#xff0c;不能单独删除数组中的某个元素&#xff0c;只能覆盖。 #include <stdio.h> #include <stdbool.h>// 函数声明 int deleteElement(int arr[], int size, int element);int main() {int arr[] {1, 2, 3…

甘肃美食之选:食家巷方形饼

甘肃食家巷方形饼&#xff0c;顾名思义&#xff0c;其形状呈规整的方形。这种独特的外形并非偶然&#xff0c;而是源于当地传统的制作工艺。制作方形饼的师傅们&#xff0c;精心挑选优质的面粉&#xff0c;加入适量的水和其他配料&#xff0c;揉成光滑的面团。经过一段时间的发…

共享GitLab中CICD自动生成的软件包

0 Preface/Foreword 1 分享软件包地址 为了方便给接收对象方便下载固件&#xff0c;在下载固件时候&#xff0c;而无需打开网页&#xff0c;直接输入地址&#xff0c;弹出的对话框是将固件另存为。 或者进入CICD页面&#xff0c;找到job&#xff0c;在Download的标签上单击右键…

区块链钱包开发:全面功能设计方案解析

区块链钱包是连接用户与区块链世界的核心工具&#xff0c;为用户提供了存储、管理和交易加密资产的便捷途径。随着区块链应用的广泛普及&#xff0c;钱包的功能需求和技术复杂度也在不断增加。如何设计和开发一款功能全面、安全可靠的区块链钱包&#xff0c;成为区块链项目成功…

计算机网络-IPSec VPN工作原理

一、IPSec VPN工作原理 昨天我们大致了解了IPSec是什么&#xff0c;今天来学习下它的工作原理。 IPsec的基本工作流程如下&#xff1a; 通过IKE协商第一阶段协商出IKE SA。 使用IKE SA加密IKE协商第二阶段的报文&#xff0c;即IPsec SA。 使用IPsec SA加密数据。 IPsec基本工作…

“切片赋值”创建列表批量操作“新”方法(Python)

[start:end]切片赋值&#xff0c;扩展了list批量增减元素的操作能力。 (笔记模板由python脚本于2024年12月06日 15:07:56创建&#xff0c;本篇笔记适合研python基础的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Free&#xff1a;…

电脑无法识别usb设备怎么办?电脑无法识别usb解决方法

usb设备是我们常解除的外部操作以及存储设备&#xff0c;它可以方便用户数据传输以及操作输入。但在使用过程中&#xff0c;大家基本都碰到过电脑无法识别usb设备这种情况。这种情况下&#xff0c;我们应该怎么办呢&#xff1f;下面将为你介绍几种可能的原因和解决方法&#xf…