echarts geo3D 设置距离左边的距离设置飞线的渐变色
时间: 2023-11-27 14:49:06 浏览: 122
要设置 echarts geo3D 中的飞线渐变色,需要使用 echarts 的 visualMap 组件。visualMap 组件是用于视觉映射的组件,可以将数据映射到视觉元素上,如颜色、大小等。在 echarts 中,visualMap 组件可以用于对地图、散点图、折线图等图表进行颜色等方面的控制。
下面是一个示例代码,展示了如何设置 echarts geo3D 中的飞线渐变色和距离左边的距离:
```javascript
option = {
geo3D: {
map: 'world',
roam: true,
itemStyle: {
color: '#ddd',
opacity: 1,
borderWidth: 0.2,
borderColor: '#444'
},
label: {
show: false
},
emphasis: {
label: {
show: false
},
itemStyle: {
color: '#aaa',
opacity: 1
}
},
light: {
main: {
intensity: 1,
shadow: true,
shadowQuality: 'high',
alpha: 30
},
ambient: {
intensity: 0.3
}
},
viewControl: {
autoRotate: true,
distance: 200,
minDistance: 40,
maxDistance: 400,
alpha: 20,
beta: 30,
minBeta: -90,
maxBeta: 90,
center: [0, 0, 0],
animationDurationUpdate: 1000,
animationEasingUpdate: 'cubicInOut',
animationDelayUpdate: function (idx) {
return idx * 10;
}
},
regions: [{
name: 'China',
itemStyle: {
areaColor: '#f00'
}
}],
postEffect: {
enable: true,
SSAO: {
enable: true,
radius: 2,
intensity: 1.5,
quality: 'high'
}
},
groundPlane: {
show: true,
color: '#aaa'
}
},
series: [
{
type: 'lines3D',
coordinateSystem: 'geo3D',
effect: {
show: true,
trailWidth: 1,
trailLength: 0.5,
trailOpacity: 1,
trailColor: '#fff',
trailBlur: 2
},
blendMode: 'lighter',
lineStyle: {
width: 0.1,
opacity: 0.6,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{ offset: 0, color: '#ff0' },
{ offset: 1, color: '#f00' }
])
},
data: [
[
{ coord: [100, 0, 0] },
{ coord: [0, 0, 0] }
],
[
{ coord: [-100, 0, 0] },
{ coord: [0, 0, 0] }
]
]
}
],
visualMap: {
show: false,
left: 'left',
min: 0,
max: 100,
inRange: {
color: ['#ff0', '#f00']
},
text: ['High', 'Low'],
calculable: true
}
};
```
在上面的代码中,我们通过 visualMap 组件设置了渐变色,具体包括以下几点:
1. 在 series 中,我们使用了 echarts 的 LinearGradient 类型来设置渐变色,其中起点坐标为 (0,0),终点坐标为 (1,0),颜色分别为黄色和红色。
2. 在 visualMap 中,我们设置了渐变色的范围和颜色,左边距离为 'left'。
你可以根据自己的需求修改上面的示例代码来实现自己的效果。
阅读全文