Case Analysis of ECharts data Chart

This article mainly introduces "ECharts data chart case analysis". In daily operation, I believe many people have doubts about ECharts data chart case analysis. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "ECharts data chart case analysis". Next, please follow the editor to study!

ECharts acronym comes from Enterprise Charts, commercial data chart, a pure Javascript chart library, can run smoothly on PC and mobile devices, compatible with most current browsers (IE6/7/8/9/10/11,chrome,firefox,Safari, etc.), the underlying rely on lightweight Canvas class library ZRender, to provide intuitive, vivid, interactive, highly customizable data visualization charts. Innovative features such as drag-and-drop heavy computing, data view, range roaming and so on greatly enhance the user experience and give users the ability to mine and integrate data.

DataZoom

The dataZoom component can scroll through the mouse wheel to zoom in and out of the chart. By default, dataZoom controls the x-axis, that is, zooming and panning the data window on the x-axis.

Example

Option = {xAxis: {type: 'value'}, yAxis: {type:' value'}, dataZoom: [{/ / this dataZoom component, which controls the x axis by default. Type: 'slider', / / this dataZoom component is a slider dataZoom component start: 10, / / left at 10%. End: 60 / / the right side is 60%. }], series: [{type: 'scatter', / / this is a "scatter chart" itemStyle: {opacity: 0.8}, symbolSize: function (val) {return val [2] * 40 }, data: ["14.616", "7.241", "0.896"], ["3.958", "5.701", "0.955"], ["2.768", "8.971", "0.669"], ["9.051", "8.971", "0.669"], ["12.295", "1.429" "0.962"], ["4.417", "8.167", "0.113"], ["0.492", "4.771", "0.785"], ["7.632", "2.605", "0.645"]}}

The above example can only drag the dataZoom component to zoom out or enlarge the chart. If you want to drag in the coordinate system and zoom with the mouse wheel (or move two fingers on the touchscreen), you need to add an inside-type dataZoom component. Based on the above example, we add the configuration information of type:

Example

Option = {..., dataZoom: [{/ / this dataZoom component controls the x-axis by default. Type: 'slider', / / this dataZoom component is a slider dataZoom component start: 10, / / left at 10%. End: 60 / / the right side is 60%. }, {/ / this dataZoom component also controls the x-axis. Type: 'inside', / / this dataZoom component is an inside dataZoom component start: 10, / / left at 10%. End: 60 / / the right side is 60%. }],...}

Of course, we can specify which axis or axes are controlled by dataZoom through dataZoom.xAxisIndex or dataZoom.yAxisIndex.

Example

Var data1 = []; var data2 = []; var data3 = []; var random = function (max) {return (Math.random () * max) .tofixed (3);}; for (var I = 0) I false, legend: {data: ['scatter',' scatter2', 'scatter3']}, tooltip: {}, xAxis: {type:' value', min: 'dataMin', max:' dataMax', splitLine: {show: true}}, yAxis: {type: 'value', min:' dataMin' Max: 'dataMax', splitLine: {show: true}}, dataZoom: [{type:' slider', show: true, xAxisIndex: [0], start: 1, end: 35}, {type: 'slider', show: true YAxisIndex: [0], left:'93% salary, start: 29, end: 36}, {type: 'inside', xAxisIndex: [0], start: 1, end: 35}, {type:' inside', yAxisIndex: [0] Start: 29, end: 36}], series: [{name: 'scatter', type:' scatter', itemStyle: {normal: {opacity: 0.8}} SymbolSize: function (val) {return val [2] * 40 }, data: data1}, {name: 'scatter2', type:' scatter', itemStyle: {normal: {opacity: 0.8}}, symbolSize: function (val) {return val [2] * 40 }, data: data2}, {name: 'scatter3', type:' scatter', itemStyle: {normal: {opacity: 0.8,}}, symbolSize: function (val) {return val [2] * 40 }, data: data3}]} at this point, the study on "instance Analysis of ECharts data Chart" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!