背景
场景是一个任务的完整执行后需要展示速度和时间曲线，当时间宽度很长时，数据点其实是很多的。这个时候就需要缩放了。
我一开始以为echarts不能做，后来一看还是有api的。很方便。
代码实现
先上代码。
这是完成的一个vue组件，可以直接用的那种。
可缩放的核心是dataZoom。
<template>
<div :id="id" style="flex: 1;width: 100%;height:auto;min-height:400px" />
</template>
<script>
import { getFormatTime } from '@/utils'
export default {
props: {
id: {
type: String,
default: 'scrollLine'
},
lineData: {
type: Array,
default: () => []
}
},
data() {
return {
newData: []
}
},
watch: {
lineData(val) {
this.newData = val
this.initChart()
}
},
mounted() {
// this.initChart()
},
methods: {
initChart() {
// 基于准备好的dom，初始化echarts实例
// eslint-disable-next-line no-undef
var myChart = echarts.init(document.getElementById(this.id))
// data
const Ydata = []
const Y2data = []
const Xdata = []
for (const item of this.newData) {
Xdata.push(getFormatTime(item.reportTs))
Ydata.push(item.linearSpeedXY)
Y2data.push(item.linearAccelerationXY)
}
// // mock
// for (let i = 0; i < 1000; i++) {
// Xdata.push(i)
// Ydata.push(i)
// }
// 指定图表的配置项和数据
var option = {
title: {
text: '速度、加速度的时间变化曲线'
},
xAxis: {
type: 'category',
data: Xdata
},
yAxis: {
type: 'value'
},
legend: {
data: ['速度-时间', '加速度-时间']
},
series: [{
name: '速度-时间',
data: Ydata,
type: 'line',
showSymbol: false,
smooth: true
}, {
name: '加速度-时间',
data: Y2data,
type: 'line',
showSymbol: false,
smooth: true
}],
dataZoom: [
{
id: 'dataZoomX',
type: 'inside',
xAxisIndex: [0],
minSpan: 10
// filterMode: 'none'
}
]
}
console.log(option, '55555')
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
}
}
}
</script>
dataZoom
dataZoom的type有silder和inside两种。配置项类似。
具体可以查看echarts文档。echarts.apache.org/zh/option.h…
我结合两个例子注释一下。
inside：
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled:false, //是否停止组件的功能。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}
slider：
{
id: 'dataZoomX',
show:true, //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor:"rgba(47,69,84,0)", //组件的背景颜色
type: 'slider', //slider表示有滑动块的，inside表示内置的
dataBackground:{ //数据阴影的样式。
lineStyle:mylineStyle, //阴影的线条样式
areaStyle:myareaStyle, //阴影的填充样式
},
fillerColor:"rgba(167,183,204,0.4)", //选中范围的填充颜色。
borderColor:"#ddd", //边框颜色。
filterMode: 'filter', //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
//'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
//'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
//'none': 不过滤数据，只改变数轴范围。
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex:3, //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30, //数据窗口范围的起始百分比,表示30%
end: 70, //数据窗口范围的结束百分比,表示70%
startValue:10, //数据窗口范围的起始数值
endValue:100, //数据窗口范围的结束数值。
orient:"horizontal", //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock:false, //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle:100, //设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel:true, //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove:true, //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
},
当然，涂省事就不用配置，都采用默认选项就可以了。
数据问题
回过来。
echarts中虽然可以filterMode进行过滤，但是一开始比如就加载10000个点肯定也是会造成性能影响的。最主要的问题是我不知道是100个点还是10万个点，都有可能存在。
所以我在传入这个组件的lineData获取的时候做了处理。按最多1000个点做处理。如果大于1000个点，按一定比例进行采用。这样可以得到0~1000个点采样后的数据，可控。
nice
