图表
最新修改于 2024-03-13 10:10
## 介绍
图表是一种用图形符号表示数据或信息的工具，它可以帮助人们更好地理解数据、分析数据、记忆数据。图表的作用主要体现在以下几个方面：
### 直观地展示数据
图表可以将抽象的数据以直观易懂的方式呈现出来，帮助人们快速理解数据的整体情况和趋势。
### 突出数据中的重点
图表可以突出数据中的重点，帮助人们快速发现数据中的关键信息。
### 便于数据比较
图表可以将不同数据进行比较，帮助人们发现数据之间的差异和联系。
### 辅助数据分析
图表可以辅助数据分析，帮助人们发现数据中的规律和趋势。
### 提高工作效率
图表可以提高工作效率，例如，可以用来进行数据分析、进行决策、进行演示等。
### 促进沟通
图表可以作为一种沟通工具，帮助人们更好地进行沟通，例如，可以用来讲解数据、汇报分析结果等。
## 总结
总而言之，图表是一种非常实用的工具，可以应用于学习、工作和生活的各个方面。
以下是一些具体的应用示例：
如果您还没有尝试过使用图表，建议您试一试，相信您会发现它会是一个非常有用的工具。
在学习中，图表可以用来整理笔记、记忆知识点、进行复习备考。
在职场中，图表可以用来进行数据分析、进行决策、进行演示。
在企业中，图表可以用来进行数据分析、进行决策、进行流程分析。
柱状图： 显示不同类别的数据之间的比较。
饼状图： 显示一个整体中各部分所占的比例。
条形图： 显示不同类别的数据之间的比较。
散点图： 显示两个变量之间的关系。
选择合适的图表类型可以更好地展示数据并传达信息。
## 演示
### 折线图
显示数据在一段时间内的变化趋势
#### 单折线图
```echarts
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [{
"data": [150, 230, 224, 218, 135, 147, 260],
"type": "line"
}]
}
```
#### 多折线图
```echarts
{
"title": {
"text": "Stacked Line"
},
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"]
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"toolbox": {
"feature": {
"saveAsImage": {}
}
},
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [{
"name": "Email",
"type": "line",
"stack": "Total",
"data": [120, 132, 101, 134, 90, 230, 210]
}, {
"name": "Union Ads",
"type": "line",
"stack": "Total",
"data": [220, 182, 191, 234, 290, 330, 310]
}, {
"name": "Video Ads",
"type": "line",
"stack": "Total",
"data": [150, 232, 201, 154, 190, 330, 410]
}, {
"name": "Direct",
"type": "line",
"stack": "Total",
"data": [320, 332, 301, 334, 390, 330, 320]
}, {
"name": "Search Engine",
"type": "line",
"stack": "Total",
"data": [820, 932, 901, 934, 1290, 1330, 1320]
}]
}
```
### 柱状图
显示不同类别的数据之间的比较。
#### 基础柱状图
```echarts
{
"xAxis": {
"type": "category",
"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
},
"yAxis": {
"type": "value"
},
"series": [{
"data": [120, 200, 150, 80, 70, 110, 130],
"type": "bar"
}]
}
```
#### 极坐标柱状图
```echarts
{
"title": [{
"text": "Radial Polar Bar Label Position (middle)"
}],
"polar": {
"radius": [30, "80%"]
},
"radiusAxis": {
"max": 4
},
"angleAxis": {
"type": "category",
"data": ["a", "b", "c", "d"],
"startAngle": 75
},
"tooltip": {},
"series": {
"type": "bar",
"data": [2, 1.2, 2.4, 3.6],
"coordinateSystem": "polar",
"label": {
"show": true,
"position": "middle",
"formatter": "{b}: {c}"
}
},
"animation": false
}
```
#### 条形柱状图
```echarts
{
"title": {
"text": "World Population"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"xAxis": {
"type": "value",
"boundaryGap": [0, 0.01]
},
"yAxis": {
"type": "category",
"data": ["Brazil", "Indonesia", "USA", "India", "China", "World"]
},
"series": [{
"name": "2011",
"type": "bar",
"data": [18203, 23489, 29034, 104970, 131744, 630230]
}, {
"name": "2012",
"type": "bar",
"data": [19325, 23438, 31000, 121594, 134141, 681807]
}]
}
```
### 饼状图
显示一个整体中各部分所占的比例
#### 基础饼状图
```echarts
{
"title": {
"text": "Referer of a Website",
"subtext": "Fake Data",
"left": "center"
},
"tooltip": {
"trigger": "item"
},
"legend": {
"orient": "vertical",
"left": "left"
},
"series": [{
"name": "Access From",
"type": "pie",
"radius": "50%",
"data": [{
"value": 1048,
"name": "Search Engine"
}, {
"value": 735,
"name": "Direct"
}, {
"value": 580,
"name": "Email"
}, {
"value": 484,
"name": "Union Ads"
}, {
"value": 300,
"name": "Video Ads"
}],
"emphasis": {
"itemStyle": {
"shadowBlur": 10,
"shadowOffsetX": 0,
"shadowColor": "rgba(0, 0, 0, 0.5)"
}
}
}]
}
```
#### 环角圆形图
```echarts
{
"tooltip": {
"trigger": "item"
},
"legend": {
"top": "5%",
"left": "center"
},
"series": [{
"name": "Access From",
"type": "pie",
"radius": ["40%", "70%"],
"avoidLabelOverlap": false,
"itemStyle": {
"borderRadius": 10,
"borderColor": "#fff",
"borderWidth": 2
},
"label": {
"show": false,
"position": "center"
},
"emphasis": {
"label": {
"show": true,
"fontSize": 40,
"fontWeight": "bold"
}
},
"labelLine": {
"show": false
},
"data": [{
"value": 1048,
"name": "Search Engine"
}, {
"value": 735,
"name": "Direct"
}, {
"value": 580,
"name": "Email"
}, {
"value": 484,
"name": "Union Ads"
}, {
"value": 300,
"name": "Video Ads"
}]
}]
}
```
#### 环形图
```echarts
{
"tooltip": {
"trigger": "item"
},
"legend": {
"top": "5%",
"left": "center"
},
"series": [{
"name": "Access From",
"type": "pie",
"radius": ["40%", "70%"],
"avoidLabelOverlap": false,
"label": {
"show": false,
"position": "center"
},
"emphasis": {
"label": {
"show": true,
"fontSize": 40,
"fontWeight": "bold"
}
},
"labelLine": {
"show": false
},
"data": [{
"value": 1048,
"name": "Search Engine"
}, {
"value": 735,
"name": "Direct"
}, {
"value": 580,
"name": "Email"
}, {
"value": 484,
"name": "Union Ads"
}, {
"value": 300,
"name": "Video Ads"
}]
}]
}
```
#### 玫瑰图
```echarts
{
"legend": {
"top": "bottom"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"series": [{
"name": "Nightingale Chart",
"type": "pie",
"radius": [50, 250],
"center": ["50%", "50%"],
"roseType": "area",
"itemStyle": {
"borderRadius": 8
},
"data": [{
"value": 40,
"name": "rose 1"
}, {
"value": 38,
"name": "rose 2"
}, {
"value": 32,
"name": "rose 3"
}, {
"value": 30,
"name": "rose 4"
}, {
"value": 28,
"name": "rose 5"
}, {
"value": 26,
"name": "rose 6"
}, {
"value": 22,
"name": "rose 7"
}, {
"value": 18,
"name": "rose 8"
}]
}]
}
```
### 散点图
显示两个变量之间的关系
#### 基础散点图
```echarts
{
"xAxis": {},
"yAxis": {},
"series": [{
"symbolSize": 20,
"data": [
[10, 8.04],
[8.07, 6.95],
[13, 7.58],
[9.05, 8.81],
[11, 8.33],
[14, 7.66],
[13.4, 6.81],
[10, 6.33],
[14, 8.96],
[12.5, 6.82],
[9.15, 7.2],
[11.5, 7.2],
[3.03, 4.23],
[12.2, 7.83],
[2.02, 4.47],
[1.05, 3.33],
[4.05, 4.96],
[6.03, 7.24],
[12, 6.26],
[12, 8.84],
[7.08, 5.82],
[5.02, 5.68]
],
"type": "scatter"
}]
}
```
#### 打卡气泡图
```echarts
{
"title": {
"text": "Punch Card of Github"
},
"legend": {
"data": ["Punch Card"],
"left": "right"
},
"polar": {},
"tooltip": {},
"angleAxis": {
"type": "category",
"data": ["12a", "1a", "2a", "3a", "4a", "5a", "6a", "7a", "8a", "9a", "10a", "11a", "12p", "1p", "2p", "3p", "4p", "5p", "6p", "7p", "8p", "9p", "10p", "11p"],
"boundaryGap": false,
"splitLine": {
"show": true
},
"axisLine": {
"show": false
}
},
"radiusAxis": {
"type": "category",
"data": ["Saturday", "Friday", "Thursday", "Wednesday", "Tuesday", "Monday", "Sunday"],
"axisLine": {
"show": false
},
"axisLabel": {
"rotate": 45
}
},
"series": [{
"name": "Punch Card",
"type": "scatter",
"coordinateSystem": "polar",
"data": [
[0, 0, 5],
[0, 1, 1],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[0, 11, 2],
[0, 12, 4],
[0, 13, 1],
[0, 14, 1],
[0, 15, 3],
[0, 16, 4],
[0, 17, 6],
[0, 18, 4],
[0, 19, 4],
[0, 20, 3],
[0, 21, 3],
[0, 22, 2],
[0, 23, 5],
[1, 0, 7],
[1, 1, 0],
[1, 2, 0],
[1, 3, 0],
[1, 4, 0],
[1, 5, 0],
[1, 6, 0],
[1, 7, 0],
[1, 8, 0],
[1, 9, 0],
[1, 10, 5],
[1, 11, 2],
[1, 12, 2],
[1, 13, 6],
[1, 14, 9],
[1, 15, 11],
[1, 16, 6],
[1, 17, 7],
[1, 18, 8],
[1, 19, 12],
[1, 20, 5],
[1, 21, 5],
[1, 22, 7],
[1, 23, 2],
[2, 0, 1],
[2, 1, 1],
[2, 2, 0],
[2, 3, 0],
[2, 4, 0],
[2, 5, 0],
[2, 6, 0],
[2, 7, 0],
[2, 8, 0],
[2, 9, 0],
[2, 10, 3],
[2, 11, 2],
[2, 12, 1],
[2, 13, 9],
[2, 14, 8],
[2, 15, 10],
[2, 16, 6],
[2, 17, 5],
[2, 18, 5],
[2, 19, 5],
[2, 20, 7],
[2, 21, 4],
[2, 22, 2],
[2, 23, 4],
[3, 0, 7],
[3, 1, 3],
[3, 2, 0],
[3, 3, 0],
[3, 4, 0],
[3, 5, 0],
[3, 6, 0],
[3, 7, 0],
[3, 8, 1],
[3, 9, 0],
[3, 10, 5],
[3, 11, 4],
[3, 12, 7],
[3, 13, 14],
[3, 14, 13],
[3, 15, 12],
[3, 16, 9],
[3, 17, 5],
[3, 18, 5],
[3, 19, 10],
[3, 20, 6],
[3, 21, 4],
[3, 22, 4],
[3, 23, 1],
[4, 0, 1],
[4, 1, 3],
[4, 2, 0],
[4, 3, 0],
[4, 4, 0],
[4, 5, 1],
[4, 6, 0],
[4, 7, 0],
[4, 8, 0],
[4, 9, 2],
[4, 10, 4],
[4, 11, 4],
[4, 12, 2],
[4, 13, 4],
[4, 14, 4],
[4, 15, 14],
[4, 16, 12],
[4, 17, 1],
[4, 18, 8],
[4, 19, 5],
[4, 20, 3],
[4, 21, 7],
[4, 22, 3],
[4, 23, 0],
[5, 0, 2],
[5, 1, 1],
[5, 2, 0],
[5, 3, 3],
[5, 4, 0],
[5, 5, 0],
[5, 6, 0],
[5, 7, 0],
[5, 8, 2],
[5, 9, 0],
[5, 10, 4],
[5, 11, 1],
[5, 12, 5],
[5, 13, 10],
[5, 14, 5],
[5, 15, 7],
[5, 16, 11],
[5, 17, 6],
[5, 18, 0],
[5, 19, 5],
[5, 20, 3],
[5, 21, 4],
[5, 22, 2],
[5, 23, 0],
[6, 0, 1],
[6, 1, 0],
[6, 2, 0],
[6, 3, 0],
[6, 4, 0],
[6, 5, 0],
[6, 6, 0],
[6, 7, 0],
[6, 8, 0],
[6, 9, 0],
[6, 10, 1],
[6, 11, 0],
[6, 12, 2],
[6, 13, 1],
[6, 14, 3],
[6, 15, 4],
[6, 16, 0],
[6, 17, 0],
[6, 18, 0],
[6, 19, 0],
[6, 20, 1],
[6, 21, 2],
[6, 22, 2],
[6, 23, 6]
]
}]
}
```
## 拓展参数
### 添加阴影
```
{
...
series: [{
...
areaStyle: {
shadowBlur: 10
}
}]
}
```
### 带平滑曲线
```
{
...
series: [{
...
smooth: true
}]
}
```
### 多数据系列
```
{
...
series: [{
name: '销量',
data: [120, 132, 101, 134, 90, 230, 210]
}, {
name: '利润',
data: [80, 70, 60, 50, 40, 30, 20]
}]
}
```
### 添加组件
```
var option = {
// 其他图表配置项...
// 添加 graphic 组件
"graphic": {
"elements": [
{
"type": "image",
"style": {
"image": "https://echarts.apache.org/examples/data/asset/geo/Beef_cuts_France.svg", // SVG 图片的 URL
"width": 200,
"height": 200
},
"left": "center",
"top": "center"
}
]
}
};
```
## 参数说明
```
title: 图表的标题。
tooltip: 鼠标悬停在图表上的提示框。
legend: 图表的图例。
grid: 图表的网格。
xAxis: 图表的横轴。
yAxis: 图表的纵轴。
series: 图表的数据系列。
```