一、渐变
我这里是以折线图为例子
渐变还是很简单的
在series中,指定areaStyle中使用渐变函数就可以了
(1)封装渐变函数
以下是我封装的渐变函数
import echarts from 'echarts';
const getLinearColor = (color1: string, color2: string): any => {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: color1,
},
{
offset: 1,
color: color2,
},
]);
};
(2)代码中直接调用渐变函数
代码中就可以直接调用
areaStyle: {
opacity: 0.7,
color: getLinearColor(colorMap['balck','white'),
},
或者直接在代码中使用该函数
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
},
二、横坐标缩放
(1)如何设置
与Y坐标即yAxis:平级,设置datazoom
数组:
datazoom:[
{
type: 'inside',
start: 0, // 开始位置的百分比,0 - 100
end: 10 // 结束位置的百分比,0 - 100,为100时是整个横坐标
startValue: number,// 开始位置的数值
endValue: number// 结束位置的数值
}
]
这时候就会显示如下结果:
(2)设置带样式的缩放条
上面的缩放条太单一了,可以试试下面带样式的,显示结果如下
有两个圆形的button,同时也可以修改进度条的默认颜色,代码如下:
dataZoom: [
{
type: 'inside',
startValue: head(date),
endValue: last(date),
start: 0,
end: 100,
},
{
handleIcon:
'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%',
handleStyle: {
color: '#fef8f0', //button的背景颜色
shadowBlur: 3, //阴影一类
shadowColor: 'rgba(0, 0, 0, 0.6)',
shadowOffsetX: 2,
shadowOffsetY: 2,
},
},
],
(3)设置缩放条和横坐标的距离
通过grid参数bottom进行设置
grid: {
left: '3%',
right: '4%',
bottom: '15%',//设置缩放条和横坐标的距离,可以是px单位
containLabel: true,
},