今天来谈一个如何实现ecahrts图表的滚动条效果，
近期，由于咱们的数据量比较多，所以导致咱们的echarts图表展示的数据比较紧凑，所以展示就提出一个需求，就是要让我们的echarts图表可以通过数据量，来进行滚动效果，如果数据少于12条时，就关闭滚动条，如果大于12时就开启滚动条，且要达到以上ui效果。首先我们应该知道的就是ecahrts图表支持滚动的属性就是dataZoom:{ type: 'slider'(出现滚动条),}；默认是不出现滚动条，而是内置图表放大缩小效果。
在完成需求时，我先来说说以上需求所遇到的问题，以及难点哈。
难点1、首先我们要实现的效果，就是要达到ui那样，但是echarts图表呢，他两边的手柄并不是以上两个小圆圈，而是一个比较难看的手柄，且看下图：
可以看出他是两个白色的小方块，所以，我们首先要改变就是两边的样式，看了一下属性，
可以改变他的属性就是 handleIcon：（该属性默认支持svg，也支持imgae）,所以为了节省前端开发效率就让ui给咱们切了一个图表，当然自己也可以阿里icon去找。
以上如果中规中矩的完成相对应的css样式，其实是已经可以达到ui效果了，但是随之而来的问题又出现了
难点2：功能是实现了，但是某一天上线之后，用户抱怨说，两边的手柄，触发效果不太好，很难拉长或者缩短
所以又得下线重做，经过一个小时的思考，于是我拉了产品和ui开了一个会议，我问ui可不可以给我切一个四周透明，中间是小圆圈的的图片，ui说可以，那么就解决了，触发不好的效果了，因为他的接触面积大了，手指随便放都能触摸到，图片效果如下：
然后就又上线了，但是事情远远没有我们想象中的那么顺利，
难点3：某天，用户拥抱怨，说，虽然拉长缩短的效果，已经很灵敏了，但是拖动效果不是很好，说到底，还就是手柄中间的蓝色细条太细了，同样也是触感不好。
所以，我又得思前想后，如何解决这个问题，因为这个和手柄不一样，是可以支持图片的，而细条却不行，所以就只能从其他地方思考，后面想到了渐变色，没有错就是渐变色。因为echarts图表是支持渐变色的，所以用渐变色是再好不过了，所以就立即进行开发了，最终的关键代码如下：
fillerColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,0,0,0)',
},
{
offset: 0.44,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 0.45,
color: '#0473FF',
},
{
offset: 0.5,
color: '#0473FF',
},
{
offset: 0.55,
color: '#0473FF',
},
{
offset: 0.56,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 1,
color: 'rgba(0,0,0,0)',
},
]),
zoomLock: false,
showDataShadow: false, //是否显示数据阴影 默认auto
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,0,0,0)',
},
{
offset: 0.44,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 0.45,
color: 'rgba(4, 115, 255, 0.1)',
},
{
offset: 0.5,
color: 'rgba(4, 115, 255, 0.1)',
},
{
offset: 0.55,
color: 'rgba(4, 115, 255, 0.1)',
},
{
offset: 0.56,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 1,
color: 'rgba(0,0,0,0)',
},
]),
最终终于达到了用户的需求，至于根据数据量来是否开启滚动条，其实也就是判断数据量的多少，就行了，很简单，就不再多说了，
具体的代码如下，首先涉及到多处用到滚动条，所以肯定是需要封装的，所以我把封装的js文件放在了utils文件夹中命名为dataZoom.js，代码如下：
import circle from '@/assets/img/icon/touch1.png';
import * as echarts from 'echarts';
export default (start = 70, end = 100, bottom = -10) => {
const dataZoom = [
{
left: '3%',
xAxisIndex: [0], //这里是从X轴的0刻度开始
show: true, //是否显示滑动条，不影响使用
type: 'slider',
start, // 从头开始。
end, // 一次性展示6个
height: 32, //组件高度
bottom,
width: 300,
fillerColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,0,0,0)',
},
{
offset: 0.44,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 0.45,
color: '#0473FF',
},
{
offset: 0.5,
color: '#0473FF',
},
{
offset: 0.55,
color: '#0473FF',
},
{
offset: 0.56,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 1,
color: 'rgba(0,0,0,0)',
},
]),
zoomLock: false,
showDataShadow: false, //是否显示数据阴影 默认auto
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(0,0,0,0)',
},
{
offset: 0.44,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 0.45,
color: 'rgba(4, 115, 255, 0.1)',
},
{
offset: 0.5,
color: 'rgba(4, 115, 255, 0.1)',
},
{
offset: 0.55,
color: 'rgba(4, 115, 255, 0.1)',
},
{
offset: 0.56,
color: 'rgba(4, 115, 255, 0)',
},
{
offset: 1,
color: 'rgba(0,0,0,0)',
},
]),
borderRadius: 6,
borderColor: 'rgba(0,0,0,0)',
handleIcon: 'image://' + circle,
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
filterMode: 'filter',
handleSize: 32,
handleStyle: {
color: 'rgba(4,115,255,0)',
borderWidth: 0,
},
moveOnMouseMove: true,
moveHandleSize: 0, //该处为0则表示时间轴滚动条上面拖拽的那个高度可以与时间齐平
brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
},
];
return dataZoom;
};
/**
* 公司类型
*/
然后就是在mian.js中将该方法挂载到vue原型上，这样就可以全局使用了，代码如下：
import dataZoom from '@/utils/dataZoom';
Vue.prototype.$dataZoom = dataZoom;
最后就是在组件中如何使用，直接放在eharts数据配置中就行了代码如下：
options:{
dataZoom: this.$dataZoom(0, 30, -10),
}
好了以上就是本期需求的艰难历程，感谢各位小伙伴的关注，让我们下期再见
