Article directory
introduction
Data visualization, to put it bluntly, is to present data in a more intuitive way. So what method is more intuitive? It is a chart.
What are ECharts?
ECharts (full name "EchoCharts") is an open source, pure JavaScript chart library, maintained and developed by the Baidu front-end team (EFE) and community contributors. It provides a rich set of chart types, including line charts, bar charts, pie charts, radar charts, scatter plots, maps, heat maps, box plots, etc., for various data visualization needs.
1. Basic use of ECharts
1.1 Quick start with ECharts
- Step 1: Import the echarts.js file
echarts is a js library, so you must first introduce this library file
<script src="js/echarts.min.js"></script>
- Step 2: Prepare a box to display the chart.
This box is usually the familiar div. This div determines where the chart is displayed.
<div id="main" style="width: 600px;height:400px;"></div>
- Step 3: Initialize the echarts instance object.
In this step, you need to specify the DOM element where the chart will eventually be displayed.
var myChart = echarts.init(document.getElementById('main'))
- Step 4: Prepare configuration items.
This step is very critical. Our final effect, whether to display a pie chart or a line chart, is basically determined by the configuration items.
var option = {
xAxis: {
type: 'category',
data: ['小明', '小红', '小王'] },
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [70, 92, 87],
}
]
}
- Step 5: Set the configuration items to the echarts instance object
myChart.setOption(option)
What a chart will look like in the end depends entirely on this configuration item. So for different charts, except for the configuration items that will change, the other codes are fixed.
1.2 Related configuration explanation
The x-axis in the xAxis rectangular coordinate system. If the value of the type attribute is category, then data data needs to be configured, which represents the presentation on the x-axis.
- yAxis
is the y-axis in the rectangular coordinate system. If the type attribute is configured as value, then there is no need to configure data. At this time, the y-axis will automatically go to the series to find data for chart drawing.
- series
list. Each series determines its own chart type through type, and data sets the data for each series.
Configuration items exist in the form of key-value pairs, and there are many configuration items. Most of the learning in ECharts is focused on these configuration items. For learning configuration items, you don’t need to memorize them by rote. Check the official website when needed. Documentation is sufficient. URL: https://echarts.apache.org/zh/option.html
2. Commonly used charts in ECharts
2.1 Chart 1 Bar chart
2.1.1 Implementation steps of histogram
- Step 1 The most basic code structure of ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time option is an empty object
- Step 2 Prepare x-axis data
var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
- Step 3 Prepare data for y-axis
var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
- Step 4 Prepare option and set the value of type in series to: bar
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data:yDataArr
}
]
}
Note: In the configuration of the coordinate axis xAxis or yAxis, there are two main types of values: category and value. If the value of the type attribute is category, then data data needs to be configured to represent the presentation on the x-axis. If the type attribute is configured as value , then there is no need to configure data. At this time, the y-axis will automatically go to the series to find data to draw the chart.
The final effect is as follows:
2.1.2 Common effects of bar charts
- mark:
-
- Maximum\minimum markPoint
series: [
{
......
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
}
}
]
-
- averagemarkLine
series: [
{
......
markLine: {
data: [
{
type: 'average', name: '平均值'
}
]
}
}
]
- show
-
- Numeric display label
series: [
{
......
label: {
show: true, // 是否可见
rotate: 60 // 旋转角度
}
}
]
-
- Bar width barWidth
series: [
{
......
barWidth: '30%' // 柱的宽度
}
]
-
- Horizontal Bar Chart
The so-called horizontal bar chart only needs to interchange the roles of the x-axis and the y-axis. Set the type of xAxis to value, the type of yAxis to category, and set data.
- Horizontal Bar Chart
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'category',
data: xDataArr
},
series: [
{
type: 'bar',
data: yDataArr
}
]
}
2.1.3 Characteristics of histogram
The histogram describes categorical data and presents "How many are there in each category?" 』, the meaning expressed by the chart lies in the ranking\comparison of different categories of data
2.1.4 Common arrangement
Charts drawn using ECharts are inherently equipped with some functions. These functions are possessed by every chart. We can set these functions through configuration.
- title: title
var option = {
title: {
text: "成绩", // 标题文字
textStyle: {
color: 'red' // 文字颜色
},
borderWidth: 5, // 标题边框 b
orderColor: 'green', // 标题边框颜色
borderRadius: 5, // 标题边框圆角
left: 20, // 标题的位置
top: 20 // 标题的位置
}
}
-
Prompt box: tooltip
tooltip refers to the prompt box displayed when the mouse moves into the chart or clicks on the chart. -
- Trigger type: trigger
Optional values include item\axis
-
- Trigger time: triggerOn
Optional values include mouseOver\click
-
- Formatted display: formatter
-
-
- String template
-
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: '{b}:{c}'
}
}
//这个{b} 和 {c} 所代表的含义不需要去记, 在官方文档中有详细的描述
-
-
- Callback
-
var option = {
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: function (arg) {
return arg.name + ':' + arg.data
}
}
}
- Tool button: toolbox
toolbox is a toolbar provided by ECharts. It has five built-in tools: export pictures, data view, reset, data area zoom, and dynamic type switching.
The toolbar buttons are configured under the feature node
var option = {
toolbox: {
feature: {
saveAsImage: {
}, // 将图表保存为图片
dataView: {
}, // 是否显示出原始数据
restore: {
}, // 还原图表
dataZoom: {
}, // 数据缩放
magicType: {
// 将图表在不同类型之间切换,图表的转换需要数据的支持
type: ['bar', 'line']
}
}
}
}
- Legend: legend
legend is a legend, used to filter categories, and needs to be used in conjunction with series -
- data in legend is an array
-
- The value of data in the legend needs to be consistent with the name value of a certain set of data in the series array.
var option = {
legend: {
data: ['语文', '数学']
},
xAxis: {
type: 'category',
data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
},
yAxis: {
type: 'value'
},
series: [
{
name: '语文',
type: 'bar',
data: [88, 92, 63, 77, 94, 80, 72, 86]
}, {
name: '数学',
type: 'bar',
data: [93, 60, 61, 82, 95, 70, 71, 86]
}
]
}
2.2 Chart 2 Line chart
2.2.1 Implementation steps of line chart
- Step 1 The most basic code structure of ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time option is an empty object
- Step 2 Prepare x-axis data
var xDataArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
- Step 3 Prepare data for y-axis
var yDataArr = [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600]
- Step 4 Prepare option and set the value of type in series to: line
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data:yDataArr
}
]
}
The final effect is as follows:
2.2.2 Common effects of line charts
- mark
-
- Maximum\minimum markPoint
var option = {
series: [
{
......
markPoint: {
data: [
{
type: 'max',
name: '最大值'
}, {
type: 'min',
name: '最小值'
}
]
}
}
]
}
-
- averagemarkLine
var option = {
series: [
{
......
markLine: {
data: [
{
type: 'average',
name: '平均值'
}
]
}
}
]
}
-
- Mark interval markArea
var option = {
series: [
{
......
markArea: {
data: [
[
{
xAxis: '1月'
}, {
xAxis: '2月'
}
],
[
{
xAxis: '7月'
}, {
xAxis: '8月'
}
]
]
}
}
]
}
- Line control
-
- smooth lines smooth
var option = {
series: [
{
......
smooth: true
}
]
}
-
- line style lineStyle
var option = {
series: [
{
......
smooth: true,
lineStyle: {
color: 'green',
type: 'dashed' // 可选值还有 dotted solid
}
}
]
}
- Fill style areaStyle
var option = {
series: [
{
type: 'line',
data: yDataArr,
areaStyle: {
color: 'pink'
}
}
]
}
- Next to the edge boundaryGap
boundaryGap is set to the x-axis, so that the starting point starts from the 0 coordinate of the x-axis
var option = {
xAxis: {
type: 'category',
data: xDataArr,
boundaryGap: false
}
}
- Put, get out of 0 value ratio
-
- If the difference between each set of data is small and much larger than 0, then this may happen.
var yDataArr = [3005, 3003, 3001, 3002, 3009, 3007, 3003, 3001, 3005, 3004, 3001, 3009] // 此时y轴的数据都在3000附近, 每个数之间相差不多
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'line',
data: yDataArr
}
]
}
The effect is as follows:
This is obviously not the effect we want, so we can configure scale to get rid of the 0 value ratio
-
- scale configuration
scale should be configured for the y-axis
- scale configuration
var option = {
yAxis: {
type: 'value',
scale: true
}
}
- Stacked chart
Stacked chart means that after the series on the same category axis are configured with the same stack value, the value of the latter series will be added to the value of the previous series.
If there are two or more line charts in one chart , when stacking configuration is not used, the effect is as follows:
<script>
var mCharts = echarts.init(document.querySelector("div")) var xDataArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
var yDataArr1 = [120, 132, 101, 134, 90, 230, 210]
var yDataArr2 = [20, 82, 191, 94, 290, 330, 310]
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value',
scale: true
},
series: [{
type: 'line',
data: yDataArr1
}, {
type: 'line',
data: yDataArr2
}]
}
mCharts.setOption(option)
</script>
After using the stacked chart:
var option = {
series: [{
type: 'line',
data: yDataArr1,
stack: 'all' ,// series中的每一个对象配置相同的stack值, 这个all可以任意写
},
{
type: 'line',
data: yDataArr2,
stack: 'all' ,// series中的每一个对象配置相同的stack值, 这个all可以任意 写
} ,
] ,
}
The starting point of the y-axis of the blue line is no longer the y-axis, but the point corresponding to the red line. So it is equivalent to drawing the blue line on the basis of the red line. Stacking is based on the previous chart
2.2.3 Characteristics of line chart
Line charts are more commonly used to present the "trend" of data over time.
2.3 Chart 3 Scatter plot
2.3.1 Implementation steps of scatter plot
- Step 1 The most basic code structure of ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time option is an empty object
- Step 2 Prepare data for x-axis and y-axis
var data = [{
"gender": "female",
"height": 161.2,
"weight": 51.6
}, {
"gender": "female",
"height": 167.5,
"weight": 59
}, {
"gender": "female",
"height": 159.5,
"weight": 49.2
}, {
"gender": "female",
"height": 157,
"weight": 63
}, {
"gender": "female",
"height": 155.8,
"weight": 53.6
}, {
"gender": "female",
"height": 170,
"weight": 59
}, {
"gender": "female",
"height": 159.1,
"weight": 47.6
}, {
"gender": "female",
"height": 166,
"weight": 69.8
}, {
"gender": "female",
"height": 176.2,
"weight": 66.8
}, {
"gender": "female",
"height": 160.2,
"weight": 75.2
}, {
"gender": "female",
"height": 172.5,
"weight": 55.2
}, {
"gender": "female",
"height": 170.9,
"weight": 54.2
}, {
"gender": "female",
"height": 172.9,
"weight": 62.5
}, {
"gender": "female",
"height": 153.4,
"weight": 42
}, {
"gender": "female",
"height": 160,
"weight": 50
}, {
"gender": "female",
"height": 147.2,
"weight": 49.8
}, ...此处省略...]
Assume that this data is obtained from the server. Each element in the array contains three dimensions of data: gender, height, and weight. The data required for the scatter plot is a two-dimensional array, so we need to obtain it from the server. This part of the data is obtained, and the data needed to generate the scatter plot is generated through code.
var axisData = []
for (var i = 0; i < data.length; i++) {
var height = data[i].height
var weight = data[i].weight
var itemArr = [height, weight] axisData.push(itemArr)
}
axisData is a two-dimensional array. Each element in the array is still an array. There are two elements in the innermost array, one representing height and one representing weight.
- Step 3 Prepare configuration items
-
- The type of xAxis and yAxis must be set to value
-
- Set type:scatter under series
var option = {
xAxis: {
type: 'value'
},
yAxis: {
type: 'value'
},
series: [{
type: 'scatter',
data: axisData
}]
}
- Step 4 Adjust the configuration items to get rid of the 0 value scale.
Configure the scale value of xAxis and yAxis to true.
var option = {
xAxis: {
type: 'value',
scale: true
},
yAxis: {
type: 'value',
scale: true
},
series: [{
type: 'scatter',
data: axisData,
}]
}
2.3.2 Common effects of scatter plots
- Bubble chart effect
To achieve the effect of a bubble chart, it is actually to make the size of each scatter point different and the color of each scatter point different. -
- symbolSize controls the size of scatter points
-
- itemStyle.color controls the color of scatter points
Both configuration items support the writing of fixed values and the writing of callback functions.
The writing of fixed values is as follows:
var option = {
series: [{
type: 'scatter',
data: axisData,
symbolSize: 25,
itemStyle: {
color: 'green',
}
}]
}
The callback function is written as follows:
var option = {
series: [{
type: 'scatter',
data: axisData,
symbolSize: function(arg) {
var weight = arg[1]
var height = arg[0] / 100
// BMI > 28 则代表肥胖, 肥胖的人用大的散点标识, 正常的人用小散点标识
// BMI: 体重/ 身高*身高 kg m
var bmi = weight / (height * height) if (bmi > 28) {
return 20
}
return 5
},
itemStyle: {
color: function(arg) {
var weight = arg.data[1]
var height = arg.data[0] / 100
var bmi = weight / (height * height) if (bmi > 28) {
return 'red'
}
return 'green'
}
}
}]
}
- Ripple animation effect
-
- type:effectScatter
Set the value of type from scatter to effectScatter to produce the effect of ripple animation
- type:effectScatter
-
- rippleEffect
rippleEffect can configure the size of the ripple animation
- rippleEffect
var option = {
series: [{
type: 'effectScatter',
rippleEffect: {
scale: 3
}
}]
}
-
- showEffectOn
showEffectOn can control when the ripple animation is generated. It has two optional values: render and emphasis. render means that the ripple animation will start when the interface rendering is completed.
emphasis means that when the mouse moves over a certain scatter point, the scatter point will start the ripple animation.
- showEffectOn
var option = {
series: [{
type: 'effectScatter',
showEffectOn: 'emphasis',
rippleEffect: {
scale: 3
}
}]
}
2.3.3 Characteristics of scatter plots
Scatter plots can help us infer the correlation between data of different dimensions. For example, in the above example, it can be seen that height and weight are positively correlated. The higher the height, the heavier the weight.
Scatter plots are also often used in map annotation.
2.3.4 Common configurations of Cartesian coordinate systems
Charts in the rectangular coordinate system refer to charts with x-axis and y-axis. Common charts in the rectangular coordinate system include: Bar chart Line chart Scatter chart There are some common configurations for charts in the rectangular coordinate system
- Configuration 1: Grid
grid is used to control the layout and size of the rectangular coordinate system. The x-axis and y-axis are drawn based on the grid. -
- show grid
show: true
- show grid
-
- grid border
borderWidth: 10
- grid border
-
- The position and size of the grid
left top right bottom
width height
- The position and size of the grid
var option = {
grid: {
show: true, // 显示grid
borderWidth: 10, // grid的边框宽度
borderColor: 'red', // grid的边框颜色
left: 100, // grid的位置
top: 100,
width: 300, // grid的大小
height: 150 ,
} ,
}
- Configuration 2: The coordinate axis axis
is divided into x axis and y axis. There are at most two positions of x axis and y axis in a grid. -
- Coordinate axis type type
value: numerical axis, data will be read automatically from the target data
category: category axis, this type must set category data through data
- Coordinate axis type type
-
- Coordinate axis position
xAxis: The possible value is top or bottom
yAxis: The possible value is left or right
- Coordinate axis position
var option = {
xAxis: {
type: 'category',
data: xDataArr,
position: 'top'
},
yAxis: {
type: 'value',
position: 'right'
}
}
- Configuration 3: Regional zoom dataZoom
dataZoom is used for regional zoom, filtering the data range, and can have both x-axis and y-axis. dataZoom is an array, which means multiple regional zoomers can be configured -
- Area zoom type type
slider: slider
inside: built-in, rely on mouse wheel or two-finger zoom
- Area zoom type type
-
- The axis that produces the effect
xAxisIndex: Sets which x-axis the zoom component controls. Generally, just write 0.
yAxisIndex: Sets which y-axis the zoom component controls. Generally, just write 0.
- The axis that produces the effect
-
- Indicates the scaling of the initial state
start: the starting percentage of the data window range
end: the end percentage of the data window range
- Indicates the scaling of the initial state
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
dataZoom: [{
type: 'slider',
xAxisIndex: 0
}, {
type: 'slider',
yAxisIndex: 0,
start: 0,
end: 80
}]
}
It should be noted that for non-cartesian coordinate system charts, such as pie charts, etc., the above three configurations may not take effect.
2.4. Chart 4 Pie Chart
2.4.1 Implementation steps of pie chart
- Step 1 The most basic code structure of ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time option is an empty object
- Step 2 Prepare data
var pieData = [{
value: 11231,
name: "淘宝",
}, {
value: 22673,
name: "京东"
}, {
value: 6123,
name: "唯品会"
}, {
value: 8989,
name: "1号店"
}, {
value: 6700,
name: "聚美优品"
}]
- Step 3 Prepare configuration items to set type:pie under series
var option = {
series: [{
type: 'pie',
data: pieData
Notice:
-
- The data of the pie chart is an array formed by a dictionary composed of name and value.
-
- Pie chart does not need to configure xAxis and yAxis
2.4.2 Common effects of pie charts
- Display value
-
- label.show : display text
-
- label.formatter: Format text
var option = {
series: [{
type: 'pie',
data: pieData,
label: {
show: true,
formatter: function(arg) {
return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
}
}
}]
}
- Nightingale Chart
Nightingale Chart means that the radius of each sector varies with the size of the data. The larger the numerical proportion, the larger the radius of the sector. -
- roseType:'radius'
var option = {
series: [{
type: 'pie',
data: pieData,
label: {
show: true,
formatter: function(arg) {
return arg.data.name + '平台' + arg.data.value + '元\n' + arg.percent + '%'
}
},
roseType: 'radius'
}]
}
- Selected effect
-
- selectedMode: 'multiple'
selection mode, indicating whether multiple selections are supported. It is turned off by default. It supports Boolean values and strings. The string value can be 'single' or 'multiple', indicating single selection or multiple selection respectively.
- selectedMode: 'multiple'
-
- selectedOffset: 30
offset distance of selected sector
- selectedOffset: 30
var option = {
series: [
{
type: 'pie',
data: pieData,
selectedMode: 'multiple', // selectedOffset: 30
} ,
] ,
}
- ring
-
- radius The radius
of the pie chart. It can be of the following types:
number: directly specify the outer radius value. string: For example, '20%' means that the outer radius is 20% of the size of the visual area (the smaller of the height and width of the container). Array.: The first item of the array is the inner radius, and the second item is the outer radius. Through Array, the pie chart can be set to a donut chart.
- radius The radius
var option = {
series: [{
type: 'pie',
data: pieData,
radius: ['50%', '70%']
}]
}
2.4.3 Characteristics of pie charts
Pie charts can help users quickly understand the proportion of data in different categories.
2.5 Chart 5 Map
2.5.1 How to use map charts
Baidu Map API: Using Baidu Map's API, it can display maps online. Baidu Map needs to apply for ak
vector map: it can display maps offline, and developers need to prepare vector map data. The
next implementation is achieved through vector graphics.
2.5.2 Implementation steps of vector map
- Step 1 The most basic code structure of ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time option is an empty object
- Step 2 Prepare China’s vector json file and place it in the json/map/ directory
- Step 3 Use Ajax to obtain china.json
$.get('json/map/china.json', function (chinaJson) {
})
- Step 4 In the Ajax callback function, register the json data of the map to the echarts global object
echarts.registerMap('chinaMap', chinaJson)
$.get('json/map/china.json', function (chinaJson) {
echarts.registerMap('chinaMap', chinaJson) })
- Step 5 After obtaining the data, you need to configure the geo node, setOption type again
: 'map'
map: 'chinaMap'
var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
echarts.registerMap('chinaMap', chinaJson) var option = {
geo: {
type: 'map', // map是一个固定的值
map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致
}
};
mCharts.setOption(option)
})
Note: It should be noted that since Ajax is used in the code, the opening of this file cannot be opened with the file protocol. It should be placed under the HTTP service to display the map normally.
2.5.3 Common configurations of maps
- Zoom drag: roam
var option = {
geo: {
type: 'map', // map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true, // 运行使用鼠标进行拖动和缩放
} ,
}
- Name display: label
var option = {
geo: {
type: 'map', // map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true,
label: {
show: true ,
} ,
} ,
}
- Initial zoom ratio: zoom
- Map center point: center
var option = {
geo: {
type: 'map', // map是一个固定的值
map: 'chinaMap',//chinaMap需要和registerMap中的第一个参数保持一致,
roam: true,
label: {
show: true ,
},
zoom: 0.8, // 地图的缩放比例, 大于1代表放大, 小于1代表缩小
center: [87.617733, 43.792818] ,// 当前视角的中心点，用经纬度表示
} ,
}
2.5.4 Common effects of maps
- show an area
-
- Preparing vector map data for Anhui Province
- Preparing vector map data for Anhui Province
-
- Load vector data of Anhui Province map
$.get('json/map/anhui.json', function (anhuiJson) {
})
-
- Register map vector data in the Ajax callback function
echarts.registerMap('anhui', anhuiJson)
- Register map vector data in the Ajax callback function
-
- Configure geo type:'map', map:'anhui'
-
- Adjust the zoom ratio via zoom
-
- Adjust the center point through center
< script >
var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/anhui.json', function(anhuiJson) {
console.log(anhuiJson) echarts.registerMap('anhui', anhuiJson) var option = {
geo: {
type: 'map',
map: 'anhui',
label: {
show: true
},
zoom: 1.2,
center: [116.507676, 31.752889]
}
};
mCharts.setOption(option)
}) < /script>
- Different cities have different colors
-
- 1.Show basic China map
<!DOCTYPE html>
<html lang="en">
<body>
<div style="width: 600px;height:400px;border:1px solid red"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function(chinaJson) {
echarts.registerMap('chinaMap', chinaJson) var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
}
}
mCharts.setOption(option)
})
</script>
</body>
</html>
-
- 2. Prepare urban air quality data and set the data to series
var airData = [{
name: '北京',
value: 39.92
}, {
name: '天津',
value: 39.13
}, {
name: '上海',
value: 31.22
}, {
name: '重庆',
value: 66
}, {
name: '河北',
value: 147
}, {
name: '河南',
value: 113
}, {
name: '云南',
value: 25.04
}, {
name: '辽宁',
value: 50
}, {
name: '黑龙江',
value: 114
}, {
name: '湖南',
value: 175
}, {
name: '安徽',
value: 117
}, {
name: '山 东',
value: 92
}, {
name: '新疆',
value: 84
}, {
name: '江苏',
value: 67
}, {
name: '浙江',
value: 84
}, {
name: '江西',
value: 96
}, {
name: '湖北',
value: 273
}, {
name: '广西',
value: 59
}, {
name: '甘肃',
value: 99
}, {
name: '山西',
value: 39
}, {
name: '内蒙古',
value: 58
}, {
name: '陕西',
value: 61
}, {
name: '吉林',
value: 51
}, {
name: '福建',
value: 29
}, {
name: '贵州',
value: 71
}, {
name: '广东',
value: 38
}, {
name: '青海',
value: 57
}, {
name: '西藏',
value: 24
}, {
name: '四川',
value: 58
}, {
name: '宁夏',
value: 52
}, {
name: '海南',
value: 54
}, {
name: '台湾',
value: 88
}, {
name: '香港',
value: 66
}, {
name: '澳门',
value: 77
}, {
name: '南海诸岛',
value: 55
}]......
var option = {
......series: [{
data: airData
}]
}
-
- 3. Associate the data under series with geo
geoIndex: 0
type: 'map'
- 3. Associate the data under series with geo
var option = {
series: [{
data: airData,
geoIndex: 0,
type: 'map'
}]
}
-
- 4. Use it with visualMap.
VisualMap is a visual mapping component. It is very similar to the previous area zoom dataZoom and can filter data. However, dataZoom is mainly used in charts in the rectangular coordinate system, while visualMap is mainly used in maps or pie charts.
- 4. Use it with visualMap.
var option = {
geo: {
type: 'map',
map: 'chinaMap',
roam: true,
label: {
show: true
}
},
series: [{
data: airData,
geoIndex: 0,
type: 'map'
}],
visualMap: {
min: 0, // 最小值
max: 300, // 最大值
inRange: {
color: ['white', 'red'] ,// 颜色的范围
},
calculable: true ,// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
} ,
}
- Combining maps and scatter plots
-
- 1. Add new objects to the series array
-
- 2. Prepare scatter data and set the data for the new object
var scatterData = [{
value: [117.283042, 31.86119] ,// 散点的坐标, 使用的是经纬度
} ,
]
-
- 3. Configure the
type of the new object type:effectScatter
- 3. Configure the
-
- Make the scatterplot use the map coordinate system
coordinateSystem: 'geo'
- Make the scatterplot use the map coordinate system
-
- Make the ripple effect more obvious
rippleEffect: { scale: 10 }
- Make the ripple effect more obvious
var option = {
series: [{
data: airData,
geoIndex: 0,
type: 'map'
}, {
data: scatterData,
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
scale: 10
}
}]
}
2.6 Chart 6 Radar Chart
- Step 1 The most basic code structure of ECharts
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div")) var option = {
}
mCharts.setOption(option)
</script>
</body>
</html>
At this time option is an empty object
- Step 2 Define the maximum value of each dimension
var dataMax = [{
name: '易用性',
max: 100
}, {
name: '功能',
max: 100
}, {
name: '拍照',
max: 100
}, {
name: '跑分',
max: 100
}, {
name: '续航',
max: 100
}]
- Step 3 Prepare product-specific data
var hwScore = [80, 90, 80, 82, 90]
var zxScore = [70, 82, 75, 70, 78]
- Step 4 Set type:radar under series
var option = {
radar: {
indicator: dataMax
},
series: [{
type: 'radar',
data: [{
name: '华为手机1',
value: hwScore
}, {
name: '中兴手机1',
value: zxScore
}]
}]
3.6 .2.雷达图的常见效果
显示数值 label
}
2.6.1 Common effects of radar charts
- Display numerical label
var option = {
series: [{
type: 'radar',
label: {
show: true
},
data: [{
name: '华为手机1',
value: hwScore
}, {
name: '中兴手机1',
value: zxScore
}]
}]
}
- Area area areaStyle
var option = {
series: [{
type: 'radar',
label: {
show: true
},
areaStyle: {
},
data: [{
name: '华为手机1',
value: hwScore
}, {
name: '中兴手机1',
value: zxScore
}]
}]
}
- Drawing type shape
radar chart drawing type, supports 'polygon' and 'circle'
'polygon': polygon
'circle' circle
var option = {
radar: {
indicator: dataMax,
shape: 'circle'
},
series: [{
type: 'radar',
label: {
show: true
},
data: [{
name: '华为手机1',
value: hwScore
}, {
name: '中兴手机1',
value: zxScore
}]
}]
}
3. Summary of configuration items
3.1 Bar chart bar
3.2 Line chart line
3.3 Scatter plot scatter
3.4 Pie chart pie
3.5 map map
3.6 radar chart radar
3.7 Cartesian coordinate system configuration
3.8 Common arrangement
