## 介绍 图表是一种用图形符号表示数据或信息的工具，它可以帮助人们更好地理解数据、分析数据、记忆数据。图表的作用主要体现在以下几个方面： ### 直观地展示数据 图表可以将抽象的数据以直观易懂的方式呈现出来，帮助人们快速理解数据的整体情况和趋势。 ### 突出数据中的重点 图表可以突出数据中的重点，帮助人们快速发现数据中的关键信息。 ### 便于数据比较 图表可以将不同数据进行比较，帮助人们发现数据之间的差异和联系。 ### 辅助数据分析 图表可以辅助数据分析，帮助人们发现数据中的规律和趋势。 ### 提高工作效率 图表可以提高工作效率，例如，可以用来进行数据分析、进行决策、进行演示等。 ### 促进沟通 图表可以作为一种沟通工具，帮助人们更好地进行沟通，例如，可以用来讲解数据、汇报分析结果等。 ## 总结 总而言之，图表是一种非常实用的工具，可以应用于学习、工作和生活的各个方面。 以下是一些具体的应用示例： 如果您还没有尝试过使用图表，建议您试一试，相信您会发现它会是一个非常有用的工具。 在学习中，图表可以用来整理笔记、记忆知识点、进行复习备考。 在职场中，图表可以用来进行数据分析、进行决策、进行演示。 在企业中，图表可以用来进行数据分析、进行决策、进行流程分析。 柱状图： 显示不同类别的数据之间的比较。 饼状图： 显示一个整体中各部分所占的比例。 条形图： 显示不同类别的数据之间的比较。 散点图： 显示两个变量之间的关系。 选择合适的图表类型可以更好地展示数据并传达信息。 ## 演示 ### 折线图 显示数据在一段时间内的变化趋势 #### 单折线图 ```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: 图表的数据系列。 ```