introduction:
ECharts is a JavaScript-based data visualization chart library that provides intuitive, vivid, interactive, and customizable data visualization charts. ECharts was originally open-sourced by the Baidu team, and was donated to the Apache Foundation in early 2018, becoming an ASF incubation-level project.
The things that every blog will emphasize, the most direct and effective way to learn ECharts is to visit the official website, which has everything you want, official website address: https://echarts.apache.org/en/index.html
Of course, I have written a few clumsy articles. If you are interested, you can take a look. If it is helpful, give it a thumbs up. Brother Kuan will still be very happy
| title | address |
|---|---|
| ECharts first experience | Portal |
| General configuration of ECharts | Portal |
| histogram | Portal |
| ECharts official website | Portal |
line chart
We all know that to use echarts for data display, the following five steps are required
Step 1: Import the echarts.js file
Step 2: Prepare a box for rendering the chart (this box should be given width and height)
Step 3: Initialize the echarts instance object (this script tag should be placed after the box for rendering the chart, or window.onload )
Step 4: Prepare configuration items (use ECharts to create different tables, only the configuration items will change, and other codes are fixed)
Step 5: Configure the configuration items to the echarts instance object
————————————— ————
Basic implementation
Since the basic structure of the line chart is not much different from that of the histogram, I will paste a complete case code below
The difference is that the type in the series is type, the histogram is bar, and the line chart is line
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折线图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
var mCharts = echarts.init(oDiv);
var option = {
type: 'line',
name: '销量',
xAxis:{
type: 'category',
data: xDataArr
},
yAxis:{
type: 'value'
},
series: {
name: '白象方便面销量',
type: 'line',
data: yDataArr
}
}
mCharts.setOption(option)
</script>
</body>
</html>
If you have doubts about the above code, you can read the previous articles in the portal at the beginning of the article.
The above code is run on the browser, the effect is like this
style style
Similarly, the line chart also has the corresponding maximum value, minimum value, average value and other styles, and the method is also consistent with the histogram, so I won't describe too much here.
Histograms can be viewed in data visualization—ECharts—Histograms
Here we mainly talk about the line chart, which is different from the histogram
Mark Area (markArea)
Write this code in the series, pay attention to:
- The value of markArea must be an object
- There is an attribute data in markArea, and its value is an array
- The two arrays in the array are actually marked intervals
- The two objects are equivalent to the X-axis coordinates
markArea: {
data: [
[
{
xAxis:'1月'},
{
xAxis:'2月'}
],
[
{
xAxis:'7月'},
{
xAxis:'10月'}
]
]
}
smooth curve (smooth)
Write this code in the series, this line of code is equal to markArea, markPoint, etc.
// 是否为平滑的曲线，默认为false
smooth: true,
line style (lineStyle)
Here you can set the style of the polyline, including dashed and solid lines, color, thickness, etc.;
lineStyle: {
color: 'green',
// dashed 虚线 dotted 点线 solid 实线
type: 'solid'
}
fill style (areaStyle)
Write this line of code in the series
areaStyle: {
color: 'yellow'
}
At this time in the browser is like this
Forget about these guys:
Scale, away from 0 value scale scale: true---------this should be written on the configuration of the value axis,blank strategy on both sides of the coordinate axis, false no blank
boundaryGap: false---------this should be written in category axis
code show as below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>折线图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
// yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1100,2000];
yDataArr = [2480,2496,2500,2488,2487,2480,2490,2486,2485,2482,2490,2481];
var mCharts = echarts.init(oDiv);
var option = {
xAxis:{
type: 'category',
data: xDataArr,
//坐标轴两边留白策略,false 不留白
boundaryGap: false
},
yAxis:{
type: 'value',
// boundaryGap: true
// 缩放，脱离0值比例
scale: true
},
series: {
name: '白象方便面销量',
type: 'line',
data: yDataArr,
// 最大值，最小值
markPoint: {
data: [
{
type: 'max',name: '最大值'
},
{
type: 'min',name: '最小值'
}
]
},
// 平均值
markLine: {
data: [
{
type: 'average',name: '平均值'}
]
},
// 标记区域
markArea: {
data: [
[
{
xAxis:'1月'},
{
xAxis:'2月'}
],
[
{
xAxis:'7月'},
{
xAxis:'10月'}
]
]
},
// 是否为平滑的曲线
smooth: true,
// 线的样式
lineStyle: {
color: 'green',
// dashed 虚线 dotted 点线 solid 实线
type: 'solid'
},
// 填充风格
areaStyle: {
color: 'yellow'
}
}
}
mCharts.setOption(option)
</script>
</body>
</html>
stacked chart
In fact, what we often use in our work is a chart called a stacked chart, which is actually a changed line chart
The key here is to configure the same stack value in series on the same category axis
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>堆叠图</title>
<script src="./lib/echarts.min.js"></script>
</head>
<body>
<!--
数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
-->
<div style="width: 600px;height: 400px;"></div>
<script>
var oDiv = document.querySelector('div');
var xDataArr = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
yDataArr = [2000,1000,2500,1550,1800,1300,1400,2800,1200,950,1800,2000],
yDataArr2 = [2480,1496,1500,2400,2480,2680,2490,2000,1500,1600,2000,1200];
var mCharts = echarts.init(oDiv);
var option = {
xAxis:{
type: 'category',
data: xDataArr
},
yAxis:{
type: 'value'
},
series: [
{
name: '白象方便面销量',
type: 'line',
data: yDataArr,
// 堆叠图主要是靠stack属性，series中每个对象的stack值要保持一直
stack: 'all',
areaStyle: {
}
},
{
name: '统一方便面销量',
type: 'line',
data: yDataArr2,
stack: 'all',
areaStyle: {
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
The effect is as follows
