Detailed description of parameters of the Echarts dataZoom scaling function:, echartsdatazoom
DataZoom = [// area scaling {id: 'datazoomx ', show: true, // whether to display components. If it is set to false, it is not displayed, but the data filtering function still exists. BackgroundColor: "rgba (,)", // the background color type of the component: 'slider', // slider indicates that there is a sliding block, and inside indicates the built-in dataBackground: {// data shadow style. LineStyle: mylineStyle, // Shadow Line Style areaStyle: myareaStyle, // shadow filling style}, fillerColor: "rgba (167,183,204, 0.4 )", // fill color of the selected range. BorderColor: "# ddd", // border color. FilterMode: 'filter', // 'filter': data outside the current data window, filtered out. The data range of other axes is affected. Each data item, as long as there is a dimension outside the data window, the entire data item will be filtered out. XAxisIndex: 0, // set the X axis controlled by the dataZoom-inside component. You can use an array to represent Multiple Axes. yAxisIndex: [], // set the Y axis controlled by the dataZoom-inside component, you can use an array to represent Multiple Axes. radiusAxisIndex: 3, // set the radius axis controlled by the dataZoom-inside component. You can use an array to represent Multiple Axes. angleAxisIndex: [0, 2], // set the angle axis controlled by the dataZoom-inside component. An array can be used to indicate the start percentage of Multiple Axes in the start: 30. // The start percentage of the data window range, indicating 30% end: 70, // The end percentage of the data window range, indicating 70% startValue: 10, // The start value of the data window range endValue: 100, // The end value of the data window range. Orient: "horizontal", // whether the layout is horizontal or vertical. It is not only the layout method, but also the Cartesian coordinate system. By default, the horizontal and vertical axes are controlled. 'Horizontal ': horizontal. 'Signature': vertical. ZoomLock: false, // whether to lock the size of the selected area (or data window. If it is set to true, the size of the selected area is locked. That is to say, the selected area can only be translated and cannot be scaled. Throttle: 100, // set the frequency of triggering view refresh. Unit: milliseconds (MS ). ZoomOnMouseWheel: true, // how to trigger scaling. Value Options: true, indicating that scaling can be triggered without pressing any function key. False: the scroll wheel cannot be scaled. 'Shift ': indicates that shift and scroll wheel can trigger scaling. 'Ctrl ': Hold down ctrl and scroll wheel to trigger scaling. 'Alt': indicates that alt and scroll wheel can trigger scaling. MoveOnMouseMove: true, // how to trigger data window translation. True: if you do not press any function key, mouse movement triggers data window translation. False: the scroll wheel cannot be scaled. 'Shift ': shift and mouse movement can trigger data window translation. 'Ctrl ': press ctrl and move the mouse to trigger the data window translation. 'Alt': Hold down alt and move the mouse to trigger the data window translation. Left: "center", // distance from the left side of the container, 'left', 'center', 'right', '000000' top: "top ", // The distance from the component to the upper side of the container, 'top', 'middle', 'bottom ', '000000' right: "auto", // The distance from the component to the right of the container, '200' bottom: "auto", // The distance from the lower side of the container, '200'}, {id: 'datazoomy', type: 'inside ', filterMode: 'empty', disabled: false, // whether to stop the component function. XAxisIndex: 0, // set the X axis controlled by the dataZoom-inside component. You can use an array to represent Multiple Axes. yAxisIndex: [], // set the Y axis controlled by the dataZoom-inside component, you can use an array to represent Multiple Axes. radiusAxisIndex: 3, // set the radius axis controlled by the dataZoom-inside component. You can use an array to represent Multiple Axes. angleAxisIndex: [0, 2], // set the angle axis controlled by the dataZoom-inside component. An array can be used to indicate the start percentage of Multiple Axes in the start: 30. // The start percentage of the data window range, indicating 30% end: 70, // The end percentage of the data window range, indicating 70% startValue: 10, // The start value of the data window range endValue: 100, // The end value of the data window range. Orient: "horizontal", // whether the layout is horizontal or vertical. It is not only the layout method, but also the Cartesian coordinate system. By default, the horizontal and vertical axes are controlled. 'Horizontal ': horizontal. 'Signature': vertical. ZoomLock: false, // whether to lock the size of the selected area (or data window. If it is set to true, the size of the selected area is locked. That is to say, the selected area can only be translated and cannot be scaled. Throttle: 100, // set the frequency of triggering view refresh. Unit: milliseconds (MS ). ZoomOnMouseWheel: true, // how to trigger scaling. Value Options: true, indicating that scaling can be triggered without pressing any function key. False: the scroll wheel cannot be scaled. 'Shift ': indicates that shift and scroll wheel can trigger scaling. 'Ctrl ': Hold down ctrl and scroll wheel to trigger scaling. 'Alt': indicates that alt and scroll wheel can trigger scaling. MoveOnMouseMove: true, // how to trigger data window translation. True: if you do not press any function key, mouse movement triggers data window translation. False: the scroll wheel cannot be scaled. 'Shift ': shift and mouse movement can trigger data window translation. 'Ctrl ': press ctrl and move the mouse to trigger the data window translation. 'Alt': Hold down alt and move the mouse to trigger the data window translation. }];
Detailed description of Echarts data visualization dataZoom scaling Parameters
Statement: Reproduced in http://blog.csdn.net/luanpeng825485697/article/details/76739026