background

A scenario is a complete execution of a task that needs to show the speed and time curve. When the time width is very long, the data points are actually many. This is where you need to scale. At first I thought echarts wouldn’t work, but then I saw that there was an API. It’s very convenient.

Code implementation

Code first. This is a completed vUE component that can be used directly. The core of scaling is the 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() {// based on the prepared DOM, // 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; Push (I) // ydata.push (I) // /} var option = {title: {text: 'time change curve'}, xAxis: {type: 'category', data: Xdata}, yAxis: {type: 'value'}, legend: {data: [' speed - time ', 'acceleration - time ']}, series: [{name: 'speed - time ', data: Ydata, type: 'line', showSymbol: false, smooth: true}, {name:' acceleration - time ', data: Y2data, type: 'line', showSymbol: false, smooth: true }], dataZoom: [ { id: 'dataZoomX', type: 'inside', xAxisIndex: [0], minSpan: 10 // filterMode: 'none'}]} console.log(option, '55555') // Display the chart with the configuration items and data just specified. myChart.setOption(option) } } } </script>Copy the code

dataZoom

DataZoom types are silder and Inside. The configuration items are similar. For details, see the Echarts documentation. Echarts.apache.org/zh/option.h… Let me annotate this with two examples.

Inside:

{id: 'dataZoomY', type: 'inside', filterMode: 'empty', disabled:false, // Whether to disable the component function. YAxisIndex :[0,2], // Sets the x axis controlled by the datazooom inside component. RadiusAxisIndex :3, radiusAxisIndex:3, radiusAxisIndex:3, AngleAxisIndex :[0,2] angleAxisIndex:[0,2] angleAxisIndex:[0,2] // Set the Angle axis controlled by the datazom-inside component. You can use an array to represent multiple axes. Start: 30, // Start percentage of the data window range. StartValue :10, endValue:100, // endValue of the data window range. // Orient :"horizontal", // Horizontal or horizontal. It's not just the layout, but in the case of cartesian coordinates, it also determines, by default, whether you control the horizontal or the vertical number line. Horizontal. 'vertical' : vertical. ZoomLock :false, // whether to lock the size of the selection area (or data window). If set to true, the size of the selection area is locked, that is, only panning, not scaling. Throttle :100, // Set the frequency at which view refreshes are triggered. The unit is milliseconds (ms). ZoomOnMouseWheel :true, // How to trigger zooming. The optional values are as follows: True: No function key is pressed and the mouse wheel can trigger zooming. False: the mouse wheel cannot trigger zooming. 'Shift' : Indicates that holding shift and the mouse wheel can trigger zooming. 'CTRL' : indicates that holding CTRL and the mouse wheel can trigger zooming. 'Alt' : indicates that holding Alt and the mouse wheel can trigger zooming. MoveOnMouseMove :true, // How to trigger the data window shift. True: Indicates that no function key is pressed. Moving the mouse can trigger panning of the data window. False: the mouse wheel cannot trigger zooming. 'Shift' : indicates that holding shift and moving the mouse can trigger panning of the data window. 'CTRL' : indicates that holding down CTRL and moving the mouse can trigger panning of the data window. 'Alt' : means holding down Alt and moving the mouse can trigger panning of the data window. }Copy the code

The slider:

{id: 'dataZoomX', show:true, // whether to display components. If set to false, it will not be displayed, but the data filtering function will still exist. BackgroundColor :"rgba(47,69,84,0)", // component backgroundColor type: 'slider', //slider means slider, inside means built-in dataBackground:{// data shadow style. LineStyle :mylineStyle, // shading lineStyle areaStyle:myareaStyle, // shading fill style}, fillerColor:"rgba(167,183,204,0.4)", // select the range fill color. BorderColor :"# DDD ", // borderColor. FilterMode: 'filter', //'filter' : the data outside the current data window is filtered out. That is, it will affect the data range of other axes. For each data item, as long as one dimension is outside the data window, the entire data item is filtered out. //'weakFilter' : indicates that the data outside the current data window is filtered out. That is, it will affect the data range of other axes. For each data item, only when all dimensions are outside the same side of the data window, the entire data item will be filtered out. //'empty' : the data outside the current data window is set to empty. That is, the data range of other axes will not be affected. //'none': do not filter the data, only change the range of the number line. YAxisIndex :[0,2], // Sets the x axis controlled by the datazooom inside component. RadiusAxisIndex :3, radiusAxisIndex:3, radiusAxisIndex:3, AngleAxisIndex :[0,2] angleAxisIndex:[0,2] angleAxisIndex:[0,2] // Set the Angle axis controlled by the datazom-inside component. You can use an array to represent multiple axes. Start: 30, // Start percentage of the data window range. StartValue :10, endValue:100, // endValue of the data window range. // Orient :"horizontal", // Horizontal or horizontal. It's not just the layout, but in the case of cartesian coordinates, it also determines, by default, whether you control the horizontal or the vertical number line. Horizontal. 'vertical' : vertical. ZoomLock :false, // whether to lock the size of the selection area (or data window). If set to true, the size of the selection area is locked, that is, only panning, not scaling. Throttle :100, // Set the frequency at which view refreshes are triggered. The unit is milliseconds (ms). ZoomOnMouseWheel :true, // How to trigger zooming. The optional values are as follows: True: No function key is pressed and the mouse wheel can trigger zooming. False: the mouse wheel cannot trigger zooming. 'Shift' : Indicates that holding shift and the mouse wheel can trigger zooming. 'CTRL' : indicates that holding CTRL and the mouse wheel can trigger zooming. 'Alt' : indicates that holding Alt and the mouse wheel can trigger zooming. MoveOnMouseMove :true, // How to trigger the data window shift. True: Indicates that no function key is pressed. Moving the mouse can trigger panning of the data window. False: the mouse wheel cannot trigger zooming. 'Shift' : indicates that holding shift and moving the mouse can trigger panning of the data window. 'CTRL' : indicates that holding down CTRL and moving the mouse can trigger panning of the data window. 'Alt' : means holding down Alt and moving the mouse can trigger panning of the data window. Left: "center", the distance from the left side of the container / / components, 'left' and 'center', 'right' and '20%' top: "top", / / component from the container, the distance of the upper 'top', 'middle', 'bottom' and '20%' right, "auto", / / component from the container to the right of the distance, '20%' bottom: "auto", / / component container underside, '20%'},Copy the code

Of course, to save trouble, do not configure, use the default options can be.

Data problems

Come back. In Echarts, filterMode filtering is possible, but initially loading 10,000 points, for example, has a performance impact. The main problem is I don’t know if it’s 100 points or 100,000 points, it could be there. So I did it when I passed in the lineData fetch for this component. Handle at a maximum of 1000 points. If there are more than 1000 points, use a certain proportion. In this way, the data sampled from 0~1000 points can be obtained, which is controllable. nice