1. Opening
First of all, I would like to thank my company. Because of the novel (exotic) needs of the company, I am fortunate to learn some interesting and interesting front-end technologies. The front-end technologies are fun and practical. I think I should count the front-end data. In terms of visualization, there are a dazzling array of data visualization frameworks on the market, such as: D3.js, hightcharts.js, echarts.js…………. Since the company's requirements for this project are 1. The development time is short, the use of D3.js is also limited. 2. To minimize the development cost, hightcharts.js cannot be used (hightcharts is a personal free, commercial paid framework). So after repeated comparisons, I finally chose echarts.js
Second, the advantages and overall situation of echarts.js
echarts.js is a relatively successful open source project launched by Baidu, one of the three domestic IT giants. Generally speaking, it has some advantages.
1. echarts.js is easy to use
The official documentation of echarts.js is more detailed, and the official website provides a large number of usage examples for everyone to use
2. echarts.js supports packaging on demand
The echarts.js official website provides tools for online construction. When building a project online, you can select the modules that the project needs to use, so as to reduce the size of the JS file.
3, echarts.js open source
4. Support China map function
This is not available in some other frameworks, so give this feature a thumbs up
But echarts.js also has some bad things, such as:
1. The size of echarts.js is larger
A basic echarts.js is about 400K, which is relatively large compared to D3.js and hightcharts.js
2. The customizability of echarts.js is poor
Speaking of the poor customization of echarts.js, in fact, it not only includes echarts.js, but also hightcharts.js, because this type of data visualization framework is mainly highly subpackaged, so you only need to set the configuration when you use it That's ok, but what if you want to draw a chart that is not supported in the configuration, then you can only give up and try to use other frameworks
In general: From the perspective of the general direction, echarts.js is still worth learning and using, because echarts.js has been valued by the Baidu team, and the updates on git are relatively frequent, so there will not be some Serious bugs and the like, the last point of this framework is that the configuration file of the framework is quite detailed, but although the interactive API documentation has instructions, there is still no example to prove it. This may be a shortcoming in my opinion.
Third, the application of echarts
The first thing to note is that the echarts framework has a lot of configuration content, so don't try to remember all the methods in this framework, this is unlikely. However, since this framework has many configuration file parameters, we need to learn how echarts classifies it.
1. First, the graphical presentation of echarts is mainly realized by the configuration method (setOption), then the graphic label is initialized, and finally the configuration method (setOption) is assigned to the initialization graphic. For the detailed configuration file, please click here , here Let me introduce the experience of learning configuration files. The more common configurations are roughly as follows:
The red box marked above is the basic configuration of echarts, and it is also the configuration that I think must be mastered to learn echarts. Other configurations, such as the timeline.visualMap component, etc., I think these are similar in purpose, so this part is Only add it when your business needs to use it, that is to say, I think this part of the knowledge can be sold at that time. ), let me explain the use of echarts.js. First, I download the default simplified version from the official website. The download address is as follows: http://echarts.baidu.com/builder.html, you can download it directly (recommended at Use the source code version during development to facilitate debugging)
3.1 echarts.js entry basic small project 1
HTML and JavaScript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts.js case one</title>
<script type="text/javascript" src='echarts.js'></script>
</head>
<body>
<div id="chart" style="width:400px;height:400px;"></div>
</body>
<script type="text/javascript">
// initialize the chart label
var myChart = echarts.init(document.getElementById('chart'));
var options = {
//define a title
title:{
text:'Test score'
},
legend:{
data:['Sales']
},
//X axis settings
xAxis: A
data:['60 points','70 points','80 points','90 points','100 points']
},
yAxis:{
},
The legend can only be displayed when //name=legend.data
series:[{
name:'Sales',
type:'bar',
data:['12','32','45','21','1']
}]
};
myChart.setOption(options);
</script>
</html>
The running effect is as shown below, if you need to watch online, please click here
Note: The case here is the most basic, but there is still a knowledge point in it, that is, when using echarts.js, you must configure the three parameters of xAxis, yAxis, and series. If you don't want to set it, you can also initialize it. It can be set to empty JSON, otherwise an error will be reported, and at the same time, ensure that the object before echarts.init has width and height, otherwise an error will occur.
3.2 Multiple series of echarts.js comprehensively use DEMO
Before explaining this case, first let's assume a proposition. Suppose we want to count the purchase amount and sales amount of a store for a week. The purchase amount is represented by a bar chart, and the sales amount is represented by a line chart, and then we need to mark the week. The maximum value and minimum value in the middle, and the average number of sales and purchases are also required.
This problem is actually not difficult. Think about it, it is actually a process of applying multiple series of charts to a canvas. For the sake of short article length, I will not post all the codes, but only the main ones. The key code, the code is as follows:
series:[{
name:'purchase amount',
type:'bar',
data:[200,312,431,241,175,275,369],
markPoint: {
data: [
{type: 'max', name: 'max'},
{type: 'min', name: 'minimum'}
]
},
markLine:{
data:[
{type:'average',name:'average',itemStyle:{
normal:{
color:'green'
}
}}
]
}
},{
name:'sales amount',
type:'line',
data:[321,432,543,376,286,298,400],
markPoint: {
data: [
{type: 'max', name: 'max'},
{type: 'min', name: 'minimum'}
]
},
markLine:{
data:[
{type:'average',name:'average',itemStyle:{
normal:{
color:'blue'
}
}}
]
}
}]
Realize the effect:
If you want to see the complete code, please click here and fork it yourself
3.3 echarts.js responsive implementation
The introduction of echarts responsiveness on the echarts official website is more detailed. The principle here is somewhat similar to the CSS3 media query, but the response of echarts.js not only supports the response of media query in different situations, but also supports the corresponding method according to the aspect ratio. , but there are still some flaws in the official documents, for example: one is that the responsiveness in the case does not involve processing responses other than the series, and the other is to do it according to the DEMO, and you will find that you have to refresh the page every time to appear. The result of the response, so below I will write a simple case to solve these problems, the data style is the same as the above example
Paste all the JS code here:
var echart=echarts.init(document.getElementById('main1'));
var option = {
baseOption:{
title:{
text: 'Simulate a week's sales in the store',
subtext: 'dummy data'
},
legend:{
data:['purchase amount','sale amount']
},
xAxis: A
data:['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
},
yAxis:{
},
tooltip:{
show:true,
formatter:'series name:{a}<br />category:{b}<br />value:{c}'
},
series:[{
name:'purchase amount',
type:'bar',
data:[200,312,431,241,175,275,369],
markPoint: {
data: [
{type: 'max', name: 'max'},
{type: 'min', name: 'minimum'}
]
},
markLine:{
data:[
{type:'average',name:'average',itemStyle:{
normal:{
color:'green'
}
}}
]
}
},{
name:'sales amount',
type:'line',
data:[321,432,543,376,286,298,400],
markPoint: {
data: [
{type: 'max', name: 'max'},
{type: 'min', name: 'minimum'}
]
},
markLine:{
data:[
{type:'average',name:'average',itemStyle:{
normal:{
color:'blue'
}
}}
]
}
}]
},
media:[
{
//response when small and 1000 pixels
query:{
maxWidth:1000
},
option:{
title:{
show:true,
text: 'Test it'
}
}
}
]
};
//The onresize event is triggered every time the window size changes. At this time, we assign the size of the echarts object to the size property of the window, so as to achieve the same size of the chart object and the window object.
window.onresize = echart.resize;
echart.setOption(option);
Effect display: I originally wanted to show GIF, but the lag was too serious when recording, so I could only post a comparison picture when there was no refresh.
3.4 API interaction of echarts
First, let's sort out the classification of APIs in the official documents. The general APIs can be divided into four categories:
Here we will explain that the echarts object mainly includes some destruction objects (dispose), registration maps (registerMap), initialization objects (echarts.init), associated objects (connect), which belong to the settings of global properties. The acquisition or setting of some properties in the figure, the acquisition of width and height (getWidth, getHeight), the acquisition of configuration (getOption), the setting of configuration (setOption) and other operations, actions and events, are already very clear in the above figure, so I won't explain much, the specific usage method only makes sense if it is linked with the business, so I will not provide DEMO here. I believe that everyone can understand it by looking at the documentation.
Fourth, echarts common problem solving
1. When there is too much data to be rendered on the X-axis, only a part of it will be rendered, but the data display in the chart (for example, each column in the bar chart) will automatically scale the width, so it will The problem that the X-axis does not match the information in the figure is solved by setting the property axisLabel:{ interval:0 } on the X-axis, and the Y-axis is used in the same way.
2. In order to make the echart chart change responsively with the size of the browser, you need to add window.onresize = echart.resize before setting the configuration; refer to 3.3 Example for details