两个方法实现echarts散点图的高光圆点

news2024/11/17 3:28:07

一、效果图:

 二、代码

方法一:通过series的itemStyle进行设置,type为'scatter'

在 ECharts 中,要在二维散点图上实现看似 3D 的高光圆点效果,可以通过自定义散点图的 itemStyle 属性来实现。虽然无法直接创建真正的 3D 效果,但可以通过阴影和高光来模拟出类似的视觉效果。以下是如何设置这种效果的步骤:

  1. 定义散点图数据和基本配置: 首先定义散点图的基本配置,包括 xAxisyAxis 和 series

  2. 自定义散点的样式: 在 series 配置中,你可以通过 itemStyle 属性自定义每个散点的样式。使用 colorborderColorshadowColor 和 shadowBlur 等属性来模拟高光和阴影效果。

  3. 使用渐变色增强效果: 为了更好地模拟 3D 效果,可以使用径向渐变色作为散点的填充色,从而创建出中心更亮、边缘更暗的高光效果。

import * as echarts from 'echarts';

const option: echarts.EChartsOption = {
    tooltip: {},
    xAxis: {
        type: 'category',
         ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'scatter',
         [/* 数据数组 */],
        symbolSize: 20, // 设置散点大小
        itemStyle: {
            color: function (params) {
                // 使用径向渐变色
                const color = new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0,// 调整这个值来控制高光区域的大小
                    color: 'white' // 高光颜色
                }, {
                    offset: 1,
                    color: 'red' // 散点基本颜色
                }]);
                return color;
            },
            shadowBlur: 10, // 阴影大小
            shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色
        }
    }]
};

// 初始化图表
const myChart = echarts.init(document.getElementById('container') as HTMLDivElement);
myChart.setOption(option);

 方法二:通过series的renderItem进行设置,type为'custom'


series: [{
    type: 'custom',//注意type为'custom'
    renderItem: function (params, api) {
        var categoryIndex = api.value(0);
        var value = api.value(1);
        var point = api.coord([categoryIndex, value]);

        return {
            type: 'circle',
            shape: {
                cx: point[0],
                cy: point[1],
                r: 10 // 半径
            },
            style: api.style({
                fill: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                    offset: 0.2,//高光
                    color: 'white'
                }, {
                    offset: 1,
                    color: 'red'
                }]),
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            })
        };
    },
     data
}]

 注意:

选择哪种方式视情况而定,
第一种方式更为简单,当symbol为'circle'时,可以打造高光圆的效果,适用于只有高光圆或者实心圆的情况;
第二种方式当symbol为'none'或者其他自定义字符串时依旧有效,适用于符号为高光圆实心圆或者同时存在的情况,将symbol设置为'none'或者其他自定义字符串例如'lightCircle'即可

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Flume 之自定义 Source

1、简介 Flume 自带 Source 有 Avro、Thrift、Netcat、Taildir、Kafka、Http等,有些场合比如我们指定访问接口获取数据当做 Flume 的 Source,像这种定制化的 Source 需要我们自己实现,下面我将介绍如何自定义实现 Source。 2、自定义实现 Fl…

Linux中放大字体

环境:VMware17Pro,Ubuntu22.04 在显示设置外观中只看到图标放大的调整,没看到字体大小设置 不按照常规设置,点开下面的辅助功能->大号文本(没有设置具体字号的选项,但是可以放大) 效果图如下…

五、带登录窗体的demo

做了一个简单的带登录窗体的demo,有用户名和密码不能为空的验证,原理是在main.cpp的主函数入口处: 1、将默认的MainWindow主窗体注释。 2、新建一个formlogin登录窗体,在主函数中先运行登录窗体。 3、在登录窗体中引用MainWind…

Monorepo-uniapp 构建分享

Monorepo uniapp 构建灵感:刚好要做一个项目,于是想到升级一下之前自己写的一个vue3tspiniauno的模版框架,其实那个框架也不错;只是感觉还差点东西,我已经用那个小框架写了两三个项目;轻巧实用。为什么选…

线性代数——行列式按行(列)展开

目录 一、余子式:将行列式某元素所在行和列的元素全去掉 剩余部分所构成的行列式,称为该元素的余子式 二、代数余子式 三、行列式等于它的任一行(列)的各元素与对应代数余子式乘积之和 四、行列式某行元素(列&…

transbigdata 笔记: 官方文档示例3:车辆轨迹数据处理

1 读取数据 轨迹数据质量分析 这一部分和 transbigdata笔记:data_summary 轨迹数据质量/采样间隔分析-CSDN博客 的举例是一样的 import pandas as pd import geopandas as gpd import transbigdata as tbddata pd.read_csv(Downloads/TaxiData-Sample.csv, names…

一文解析 Copycat Dex与 Bitcat Dex的区别

Copycat Dex和 Bitcat Dex都带一个 Cat 并且都是衍生品协议,很多人都会误认为这两个是同一个项目,实际不然。它们是面向两个不同赛道、不同资产类型的衍生品项目。 Copycat Dex和 Bitcat Dex都是衍生品 DEX,它们最本质的区别主要在于&#xf…

FPGA时序分析与时序约束(四)——时序例外约束

目录 一、时序例外约束 1.1 为什么需要时序例外约束 1.2 时序例外约束分类 二、多周期约束 2.1 多周期约束语法 2.2 同频同相时钟的多周期约束 2.3 同频异相时钟的多周期约束 2.4 慢时钟域到快时钟域的多周期约束 2.5 快时钟域到慢时钟域的多周期约束 三、虚假路径约…

亚马逊店飞飞ERP系统,跟卖+铺货+物流发货模式综合一体的ERP系统

跨境电商亚马逊,目前为止电商行业比较靠前的电商平台!那么有人做电商,就会有人出单,有人出单就会有中转仓需求,代打包,代贴单!那么这一切都是有一套逻辑完善的ERP来完成!前端通过授权…

人工智能培训靠谱吗

靠谱的,因为人工智能是未来的发展趋势,因此,人工智能工程师也将成为就业爆款。人工智能工程师负责创建和开发自动化系统、算法和机器学习模型,以实现自主决策和任务执行。由于人工智能在可穿戴设备、家庭自动化、智能城市和自动驾…

信息技术安全评估准则新版标准的变化

文章目录 前言一、GB/T 18336 标准在我国的应用情况(一)以GB/T 18336 标准制定的信息技术产品国家标准(二)GB/T 18336 标准提升了国家关键信息基础设施的整体网络安全保障水平 二、新版 GB/T 18336 标准的变化及应用展望三、标准支…

C#,入门教程(66)——枚举Enum的高等用法

前言:国内码农与国外优秀程序员的最大区别是,我们的专家、教授喜欢唾沫横飞地,夸夸其谈语言特性、框架、性能,唯一目的是带私货(书籍或教程),很少能写出真有用的程序。差距在哪呢?基…

MFC CAsyncSocket类作为客户端示例

之前写过CAsyncSocket类使用的博客;进一步看一下; VS新建一个MFC 对话框工程; 添加一个类,从CAsyncSocket继承,起个自己的名字; 对话框添加几个编辑框,按钮,静态控件; 为自己的CxxxAsyncSocket类添加重写的虚函数,OnConnect、OnReceive、OnSend; 自己的CAsyncSoc…

Python数据结构——列表

目录 一、认识Python数据结构 二、列表概述 三、列表切片 (一)概述 (二)常见形式 (三)特别说明 四、列表的基本操作 (一)创建列表 (二)列表元素增加…

宿舍管理系统的设计与实现:基于Spring Boot、Java、Vue.js和MySQL的完整解决方案

✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 |…

GMP模型学习笔记:概念、流程概述、设计机制及部分场景

前言 Go是并发而生的语言,其中则通过GMP模型来进行协程的分配与调度。本篇将记录自己学习GMP模型的笔记。 进程、线程、协程分配流程概述 计算机发展之初,是只有进程的。那时候是单进程时代,多个进程顺序执行,计算机也没有并发…

sentinel熔断与限流

文章目录 一、sentinel简介Sentinel 是什么?Sentinel安装 二、sentinel整合工程新建cloudalibaba-sentinel-service8401微服务引入依赖yml配置主启动类添加EnableDiscoveryClient业务类测试 三、sentinel流控规则基本介绍流控模式直接(默认)关…

在pycharm远程连接树莓派遇到的No files or folders found to process处理办法

在PyCharm中解决"No files or folders found to process"错误的另一个方法是通过Deployment中的Configuration选项。在PyCharm中,找到Tool并选择Deployment,然后点击Configuration。 在设置路径的过程中需要注意目标目录是相对的 在中 会识…

DNS从入门到精通

DNS从入门到精通 Dns从入门到精通 DNS从入门到精通一、DNS原理二、企业高速缓存dns的搭建三、DNS相关名词解释四、权威DNS搭建编辑子配置文件(主要写我们维护的域zone)开始解析 五、权威dns中的数据记录种类及应用编辑子配置文件(主要写我们维护的域zone…

微信小程序canvas画布图片保存到相册官方授权、自定义授权、保存

关键步骤介绍 wx.getSetting可以获取授权信息。 wx.authorize首次授权时会打开弹框让用户授权,若用户已选择同意或拒绝,后续不会再显示授权弹框。 如果授权信息显示未进行相册授权,则打开自定义弹框(show_auth: true&#xff0…