首页 > 其他分享 > echarts设置散点图颜色渐变

echarts设置散点图颜色渐变

时间:2023-06-19 16:56:36浏览次数:42  
标签:repeat 颜色 color 渐变 散点图 设置 echarts

在echarts散点图中,可以使用系统默认的图例颜色设置散点图,也可以设置具体的颜色设置,还可以添加单个散点颜色渐变,也可以设置整个echarts散点颜色渐变

1. 不设置颜色

在不设置颜色的情况下,echarts会使用自带的调色盘进行颜色选择默认如下。

['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']

2. 设置调色盘

echarts可以通过setOption设置自定义的调色盘,具体如下

myChart.setOption({
	color:[]
})

3. 使用渐变色

// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置
{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}
// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变
{
  type: 'radial',
  x: 0.5,
  y: 0.5,
  r: 0.5,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}
// 纹理填充
{
  image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串
  repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'
}

4. 使用visualMap设置整个系列渐变

 visualMap: {
      // min: 200,
      // max: 900,
      dimension: 2, // 维度 默认最后
      seriesIndex: 0, // 取数据得哪一个系列
      left: 'right',
      top: 'top',
      text: ['HIGH', 'LOW'], // 文本,默认为数值文本
      calculable: true,
      itemWidth: 18,
      itemHeight: 200,
      textStyle: {
        color: '#3259B8',
        height: 56,
        fontSize: 11,
        lineHeight: 60
      },
      inRange: {
        color: ['#9aceff', '#016bcd']  //渐变起始值
      },
      orient: 'horizontal'
    },

标签:repeat,颜色,color,渐变,散点图,设置,echarts
From: https://www.cnblogs.com/Cxymds/p/17491543.html

相关文章

  • Android自定义View实现渐变色进度条
    在网上看到一个进度条效果图,非常美观,如下:进行效果分解:渐变色,看起来颜色变化并不复杂,使用LinearGradient应该可以实现。圆头,无非是画两个圆,外圆使用渐变色的颜色,内圆固定为白色。灰底,还没有走到的进度部分为灰色。进度值,使用文本来显示;弧形的头部,考虑使用直线进行连接,或者使用曲线,例......
  • 点击echarts图。获取点击事件
         自动跳转复用代码:letdataIndex=param.dataIndexthis.$nextTick(()=>{this.$refs.multipleTable0.bodyWrapper.scrollTop=(this.$refs.multipleTable0.bodyWrapper.scrollHeight*(this.tableList.len......
  • 使用Echarts时报 Implementation of registerMap doesn't exists 错误解决办法
    最新的echarts在使用时,如果使用按需加载的方式引入依赖。在使用registerMap函数时会报错如果出现这两个错误:ImplementationofregisterMapdoesn'texists.或者Mapxxxnotexists.TheGeoJSONofthemapmustbeprovided.那么大概率是因为echarts升级后导致的不兼......
  • Java彩虹渐变算法
    彩虹渐变算法前言​ 最近有一个需求是需要一直去改变字体的颜色,然后我就想到了使用彩虹颜色作为字体颜色,使颜色按照彩虹颜色的顺序进行变化。​ 然后查了一下彩虹的颜色可以分为6种(对,不是七种),用RGB来表示分别是#FF00FF,#FFFF00,#00FF00,#00FFFF,#0000FF,#FF00FF,因此我们只需要......
  • echarts柱状图不同颜色设置
    可以通过设置每人柱子的颜色来实现echarts在状图每人柱颜色不一样的效果。具体方法是在series中设置itemtyle属性,然后在itemStvle中设置color属性,将每个柱子的颜色设置为不同的值即可。series:[{type:'bar'data:[10,20].itemStyle:(color:function(par......
  • Echarts
    Echarts国内同步镜像网站:https://www.isqqw.com/echarts-doc/zh/tutorial.html一、引用main.js 创建全局变量import*asechartsfrom'echarts'Vue.prototype.$echarts=echarts二、使用 ......
  • echarts飞行航线图学习
    第一次接触这个理解可能不一定正确后面如果我发现有问题会更正1.npm安装echarts npminstallecharts--saveimport*asechartsfrom'echarts'//这里我在data里定义了一个也可不定义根据使用方法灵活调整this.myChart=echarts.init(this.$refs......
  • echarts的饼图的数据都为0,展示饼图的样式以及方法
    series:[{name:'概况',type:'pie',label:{ formatter:'{b}({d}%)', color:'#555555'},radius:['30%','50%&#......
  • canvas扇形径向渐变和角度渐变
    径向渐变varcanvas=document.getElementById('canvas');varcontext=canvas.getContext('2d');varcenterX=canvas.width/2;//扇形中心点的X坐标varcenterY=canvas.height/2;//扇形中心点的Y坐标varradius=100;//扇形的半径varstartAngle=0;//......
  • Python+matplotlib绘制散点图模拟心型图案
                    第1章 Python开发环境搭建与编码规范    本章学习目标    1.1 Python开发环境搭建与使用        1.1.1 IDLE        1.1.2 Anaconda3        1.1.3 安装扩展库    1.2 Python编码规范    1.3......