在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