Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to use Echarts to achieve data visualization", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use Echarts to achieve data visualization" bar!

There are many ways to visualize data, the simplest of which is to use some lightweight charting frameworks, such as echarts. Let's talk about how to use echarts to achieve static visualization of data.

Steps:

1. Download echarts

2. Write web page code

1. Download echarts

To achieve simple visualization for echarts, all you need to do is download its js package, log in to the official website, and click on the instance:

We can see that there are many examples, a variety of, we can choose examples according to our own needs.

Click on different examples, we can see that the page is divided into two parts, one is the core code of the example, the other is the effect of the example. Changes to the code can be fed back to the effect interface in real time. So we can first debug on this interface to see if the icon can meet our functional requirements.

We want to download the echarts component, which can be downloaded directly from the official website, including a lot of complex plug-ins.

Of course, to keep it simple, we only need to download the javascript document echart.js. This document is applied to any example interface of the official website here. So in any instance interface, press F12 and switch to browser interface debugging mode.

As shown in the figure above, we can see that this interface uses echarts.min.js. The difference between this file and echarts.js is that min represents a compressed one, which is much smaller and inconvenient to read. If you want to read more regular code, you can find echarts.js to read.

Double-click the src path above, copy the path to the js, and then copy it to the browser's address bar.

Some browsers will directly open this js file. As shown in the following figure, if this is the case, you can select all the interfaces of the browser's contents, copy and paste them into a new js document.

However, the above copy and paste method will give rise to a problem of incorrect coding format. It is recommended that the browser has the download function, create a new download link, and then copy the address. Or through IE,IE, the default is download.

This avoids the problem of incorrect coding format in the process of copying and pasting.

When saving, save to a non-Chinese and non-space path to avoid problems with system recognition.

2. Program coding

We need to display echarts components in the browser, there are two must pay attention to, one is that you need to provide div in advance in the browser, this div is to show the various components of echarts. The other is to use javascript or jquery to create an echarts object, then set up the data source, and then bind the data source to the echarts object.

So let's create a new html document in web and write the following code in the document:

The first ECharts instance / / initializes the echarts instance based on the prepared dom, and obtains the div object var myChart = echarts.init (document.getElementById ('main')) in the html through id. / / configure the data source for the echarts component Specify the configuration items and data for the chart var option = {title: {text: 'first ECharts instance'}, tooltip: {}, legend: {data: ['sales volume']}, xAxis: {data: ["shirt" "cardigan", "chiffon shirt", "pants", "high heels", "socks"]}, yAxis: {}, series: [{name: 'sales', type: 'bar', data: [5, 20, 36, 10, 10, 20]}]} / / display the chart using the configuration items and data you just specified. MyChart.setOption (option): thank you for reading, the above is the content of "how to use Echarts to achieve data visualization". After the study of this article, I believe you have a deeper understanding of how to use Echarts to achieve data visualization, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.