ECharts散点图 各个散点颜色配置（随机颜色）

已于 2022-03-08 14:03:46 修改
阅读量1w 收藏 17
点赞数 4
文章标签： vscode
于 2022-03-08 13:57:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48415842/article/details/123351848
版权

1.散点图 :itemStyle.color属性可以设置散点颜色

当想设置每个散点颜色时 需要用到 e.dataIndex(每个散点)：附代码        

控制台打印出来结果：dataIndex代表当前散点的下标

生成随机颜色代码：rgb为随机生成的颜色 传入的dataIndex就是三点的个数，有多少个散点就生成多少个颜色 放入一个新数组中

最后将方法在itemStyle.color箭头函数中调用就可以

问题解决（有问题欢迎留言讨论）

野区被反边哭边喊
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
echarts地图如何实现散点并且散点颜色随着数据的变化而变化【visualMap散点颜色变化】
熟悉 vue2 vue3 jquery js echarts
11-22 5472
如图所示 因为在上一篇说到咋们根据多个series 让散点的判断值根据这个地图的series走 来上代码！ let visualMap = [ { //第一个series数据的散点颜色 right: "4%", bottom: "15%", show:true, type: 'piecewise', // text: ['占比'], icon:.
2020-12-30
qq_47542732的博客
12-30 1390
echarts散点图控制散点颜色 echarts中的散点图要实现不同的数据对应不同的颜色，要使用visualMap视觉映射组件，通俗点就是实现数据对应视觉效果， 下面是自己实现的散点图效果及代码： `//这里是实现效果的核心代码部分 visualMap:[// 注意同 series 是同级的 { left:null, right:20, dimesion:7, categories:[‘物理’,‘化学’,‘生物’,‘语文’],//这是每个图标里面的中的数据 inRange:{//设置散点图内部散点颜色 s
echarts 散点图修改散点图中图形形状颜色大小
最新发布
红烧咸咸鱼
05-21 343
echarts 散点图修改散点图中图形形状颜色大小
echarts散点图(象限图)设置不同的颜色
aitengteng1的博客
11-27 1740
【代码】echarts散点图(象限图)设置不同的颜色。
echarts散点地图根据不同数据显示不同颜色的标记
weixin_38999134的博客
11-15 6522
var convertData = function (data) { // console.log("convertData",data) var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = data[i].coordinate; conso
echarts 散点图 颜色跟随值渐变 、提示框自定义 、散点重合处理、散点类型对应
捡星星的博客
02-29 845
echarts 散点图 颜色跟随值渐变 、提示框自定义 、散点重合处理、散点类型对应
echarts散点图数据动态颜色大小
06-16
散点大小按数据大小渲染，不同数据不同颜色
使用echarts实现四象限散点图
09-02
最后，记得在ECharts实例中调用`setOption`方法，传入你配置好的`option`对象，这样就能生成四象限散点图了。 本示例代码可以直接在HTML文件中运行查看效果，也可以作为一个插件独立使用。如果你在使用过程中遇到...
echarts散点图及数字翻转效果demo
06-04
ECharts是一款基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及本文重点讨论的散点图。在大屏展示中，散点图经常被用于表示数据间的二维关系，尤其适用于大数据量的场景，通过...
echarts 散点图
06-11
基于echarts 的散点图，还需要引用 jquery echarts.js.
echarts-scatter:echarts散点图多点重合无法全部显示解决方案
05-02
-report注:demo.html为普通开发下的示例代码，直接打开即可看到效果，由于引用的是node_modules中的echarts.js文件，所以打开前依然需要npm intall下载所需依赖方可看到效果，否则会提示没有引入js文件的错误
【极客日常】在Vue用echarts画带不同颜色点的散点图
HiKariのTechLab
09-16 2223
在vue技术栈下做图表需求，echarts是一个非常棒的选择，提供了非常多种多样的图标示例以及非常复杂强大的API。由于笔者近期工作内容中需要分析采样点的分布情况，因此自然而然接触到了echarts的3D散点图。在笔者的需求中，需要对不同点进行分类，并按特定的颜色显示出来。经过一番踩坑，了解到了echarts在实现这方面的机制。 echarts绘图/刷新只需要通过setOption接口即可实现。在各种options中，visualMap视觉映射组件能够根据数据在特定维度上的值，指定对应点的视觉属性（比如颜色
echarts中使用散点scatter更改颜色却不生效的问题
见贤思齐焉，见不贤内自省
06-08 4439
echarts中使用散点scatter更改颜色却不生效的问题
echarts 散点图(带涟漪动画)
weixin_43294560的博客
10-15 7263
1、准备的数据必须是二维的数值数据 2、x和y轴设置 x和y都设置成数值类型 xAxis: { type:'value', scale:true 坐标轴不从0开始 }, yAxis: { type:'value', scale:true }, 3、设置数据显示和样式 series:[ { type:'scatter', data:axisData, 数据必须是二维数值数组 s
vue中使用echarts在地图上绘制散点图，并根据数值大小实现不同效果
weixin_43412413的博客
09-27 7870
1、echarts省市地图上根据数值大小给散点设置不同颜色，地图颜色不根据数值大小渲染，自己设置颜色 <script> //引入基本模板 let echarts = require('echarts/lib/echarts') // 引入组件 require('echarts/lib/chart/map') // 引入地图js文件 ...
ECharts 实现地图散点图（上）
mo911108的博客
11-05 6027
ECharts 实现地图散点图（上） 小红2016-04-28ECharts,教程,地图 ECharts 作为国内应用最广泛的前端可视化生成工具，提供了丰富的图表展现方式和便捷的图表操作。 ECharts 支持 geoJson 格式的地图，并且官网上提供了现成的 world，china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。 一、初始准备 1. 新建html 首先，新建项目目录 echartsMapDem...
matlab制作散点图及颜色调配
热门推荐
gls_nuaa的博客
08-06 4万+
  散点图也是比较常用的数据分析图，今天来聊聊用matlab如何画一个散点图出来！   在matlab中，对应散点图的函数是scatter()。参数形式为scatter(横坐标，纵坐标，颜色，RGB通道)。   下面上代码： %linespace是在0-3pi之间等距选取200个点 x = linspace(0,3*pi,200); y = cos(x) + rand(1,200); scatter(x,y);   效果图如下：   颜色依旧是默认的蓝色，下面聊聊如何修改颜色，让它看上去brautif
echarts散点图的心得
m0_37620899的博客
08-30 2894
注：因为工作需要，绘制了echart的几张图表，浅显的研究了官方的配置文件，将散点图、柱形图、跟南丁格图设计出来了。 散点图只添加了两组数据，遇到的难点有两个。 [1]geoCoordMap对象的转换 [2]提示框的设计
echarts散点图颜色设置
06-07
ECharts散点图的颜色可以通过在 series.itemStyle.normal.color 或者 series.itemStyle.emphasis.color 中设置颜色值来实现。例如： ```javascript option = { // ... 其他配置项 series: [{ type: 'scatter', data: [ [10.0, 8.04], [8.0, 6.95], [13.0, 7.58], [9.0, 8.81], [11.0, 8.33], [14.0, 9.96], [6.0, 7.24], [4.0, 4.26], [12.0, 10.84], [7.0, 4.82], [5.0, 5.68] ], itemStyle: { normal: { color: '#1a9bff' // 设置散点图的颜色 } } }] // ... 其他配置项 }; ``` 在上面的示例代码中，我们将散点图的颜色设置为 #1a9bff。注意，这里的设置方式是针对整个散点图而言的，如果需要对不同的散点设置不同的颜色，则需要在数据项中指定对应的颜色。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值