• 数据可视化-ECharts Html项目实战（1）

     在之前的文章中，我们学习了如何安装Visual Studio Code并下载插件，想了解的朋友可以查看这篇文章。同时，希望我的文章能帮助到你，如果觉得我的文章写的不错，请留下你宝贵的点赞，谢谢。

    安装 Visual Studio Codehttps://blog.csdn.net/qq_49513817/article/details/136442924?spm=1001.2014.3001.5501

    今天的文章，我会从基础案例开始，带着大家在VS code中绘制ECharts里的折线图、条形图与柱形图，并实现动态触发以及最大、最小、平均值。

    目录

    一、环境准备

    二、项目实战

    1.柱形图

    2.条形图

    3.折线图

    三、动态触发、最大最小平均值

    动态触发：

    最大最小平均值：

    拓展、什么是ECharts

    1、ECharts

    2、ECharts的历史

    3、ECharts的特点

    一、环境准备

    首先我们打开VS code补充一个插件，实现实时效果预览

     点击红色箭头指示方向，实现实时预览

    安装完成后，新建一个文件夹，里面新建两个文件一个名为js，一个为css。再新建一个文本文档，名称自取，选择语言为html。

    再往js文件夹里导入js文件 （文章附件可下载）

     现在我们就可以开始进行项目实战了

    如果环境没有准备好，也是没关系的，在这里，我们也是可以进行练习的：echarts官网https://echarts.apache.org/examples/zh/editor.html?c=line-simple

    二、项目实战

     其实编写一个可视化视图，大致就分为五个步骤

      步骤1：引入echarts.js文件
      步骤2：准备一个呈现图表的盒子
      步骤3：初始化echarts实例对象
      步骤4：准备配置项
      步骤5：将配置项设置给echarts实例对象   

    在新建的HTML文档里，将代码输入到自己的文档中（标点符号不要敲错）

    我给出的代码里都有详细注释，根据注释理解每一段代码的意义。

    1.柱形图

    1. html>
    2. <html lang="en">//这两行定义了文档类型和文档的语言，这里是英文（en）
    3.  
    4. <head>
    5.   <meta charset="UTF-8">//设置文档的字符编码为UTF-8
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">//设置视口（viewport）的元信息，使页面能够响应式地适应不同设备的屏幕大小。
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">//这是一个针对Internet Explorer的兼容性设置，使页面以最高模式（edge mode）渲染。
    8.   <title>Documenttitle>//设置网页的标题
    9.   
    10.   <script src="js/echarts.min.js">script>
    11.   
    12. head>
    13.  
    14. <body>
    15.   
    16.   <div style="width: 600px;height: 400px">div>
    17.   <script>
    18.     // 步骤3：初始化echarts实例对象
    19.     // 参数, dom,决定图表最终呈现的位置
    20.     var mCharts = echarts.init(document.querySelector('div'))
    21.     // 步骤4：准备配置项
    22.     var option = {
    23.       xAxis: {
    24.         type: 'category',
    25.         data: ['小明', '小红', '小王']
    26.       },
    27.       yAxis: {
    28.         type: 'value'
    29.       },
    30.       series: [
    31.         {
    32.           name: '语文',
    33.           type: 'bar',//设置类型为柱状图
    34.           data: [70, 92, 87]
    35.         }
    36.       ]
    37.     }//定义了图表的配置项。这里配置了一个简单的条形图，其中X轴是类别轴，显示了三个名字（'小明', '小红', '小王'）；Y轴是数值轴；系列数据是一个名为'语文'的条形图，包含了三个分数。
    38.     // 步骤5：将配置项设置给echarts实例对象
    39.     mCharts.setOption(option)//将之前定义的配置项option设置给ECharts实例mCharts
    40.   script>
    41. body>

    效果：

    2.条形图

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.  
    11.     <div id="main" style="width: 800px; height: 400px">div>
    12.     <script type="text/javascript">
    13.  
    14.         var myChart = echarts.init(document.getElementById("main"));
    15.  
    16.         var option = {
    17.             title: {
    18.                 text: '3班成绩表',
    19.                 subtext: '数据来自辅导员',
    20.             },
    21.             legend: {
    22.                 data: ['计算机基础','数据可视化'],
    23.             },
    24.             calculable: true,
    25.             xAxis: [
    26.                 {
    27.                     type: 'value',  //设置柱状图
    28.                     boundaryGap: ['20%','20%'],
    29.                 },
    30.             ],//xAxis：设置X轴的类型为“value”（数值轴），并设置柱状图的间隙（boundaryGap）。
    31.             yAxis: [
    32.                 {
    33.                     type: 'category',
    34.                     data: ['明明','红红','高高'],
    35.                 },
    36.             ],//yAxis：设置Y轴的类型为“category”（类别轴），并设置其数据为“明明”、“红红”和“高高”。
    37.             series: [
    38.                 {
    39.                     name: '计算机基础',
    40.                     type: 'bar',
    41.                     data: [80,88,70],
    42.                     markPoint: { // 标记点
    43.           },
    44.  
    45.                 },
    46.                 {
    47.                     name: '数据可视化',
    48.                     type: 'bar',
    49.                     data: [60,90,80,],
    50.                     markPoint: { // 标记点
    51.           },
    52.                 },//series：设置图表的系列数据。
    53. 第一个系列：名称是“计算机基础”，类型为“bar”（柱状图），数据是[80, 88, 70]。
    54. 第二个系列：名称是“数据可视化”，类型也为“bar”，数据是[60, 90, 80]。
    55.                 
    56.             ]
    57.         };
    58.  
    59.         //使用刚指定的配置项和数据显示图表
    60.         myChart.setOption(option);
    61.     script>
    62. body>
    63.  
    64. html>

    效果：

    3.折线图

    1. html>//声明文档类型为HTML5
    2. <html>
    3.  
    4. <head>//页面的头部开始，通常包含页面的元信息、样式表和脚本链接等
    5.     <meta charset="utf-8">//设置文档的字符编码为UTF-8，支持多语言字符集。
    6.     <script src="js/echarts.js">script>//链接到ECharts库的JavaScript文件，该文件通常包含了ECharts图表库的所有功能。
    7.  
    8. head>//页面的头部结束。
    9.  
    10. <body>//页面的主体部分开始，通常包含页面可见的所有内容。
    11.     <div id="main" style="width: 800px; height: 400px">div>//创建一个div元素，用于作为图表的容器，并设置其宽度为800像素，高度为400像素。这个div的ID是main，后续将用于初始化图表。
    12.     <script type="text/javascript">//引用JavaScript代码块。
    13.         var myChart = echarts.init(document.getElementById("main"));//使用ECharts的init方法初始化一个图表实例，并将其绑定到ID为main的div元素上。
    14.         var option = {
    15.             title: {
    16.                 text: '小王成绩表',
    17.                 subtext: '成绩来源于辅导员',
    18.             },//设置图表的标题为“小王成绩表”，副标题为“成绩来源于辅导员”。
    19.             legend: {
    20.                 data: ['2023年', '2024年'],
    21.             },//设置图例，即图表中的系列名称，这里有两个系列：“2023年”和“2024年”。
    22.             calculable: true,//允许在图表中进行数据区域缩放和平移。
    23.             xAxis: [
    24.                 {
    25.                     type: 'category',  
    26.                     data:['2月','4月','6月','9月','11月','1月']
    27.                 },
    28.             ],//设置X轴的类型为“category”（类目轴），并设置其数据为几个月份。
    29.             yAxis: [
    30.                 {
    31.                     type: 'value',
    32.                     data: ['小王'],
    33.                 },
    34.             ],//设置Y轴的类型为“value”（数值轴）
    35.             series: [
    36.                 {
    37.                     name: '2023年',
    38.                     type: 'line',//设置为折线图
    39.                     data: [65,75,66,80,90,73],
    40.                 },
    41.                 {
    42.                     name: '2024年',
    43.                     type: 'line',//设置为折线图
    44.                     data: [65,88,75,40,60,72],
    45.                 },
    46.             ],
    47.         };//设置图表的系列数据。这里定义了两个系列，分别表示“2023年”和“2024年”的成绩，每个系列都有对应的数值数据
    48.  
    49.         //使用刚指定的配置项和数据显示图表
    50.         myChart.setOption(option);
    51.     script>
    52. body>
    53.  
    54. html>

    效果：

    在图标设置中，有不同的图标类型，设置不同的图标类型可以达到不同的预期效果，下面是常用的图标类型。

    柱状图Bar
    条形图Strip
    折线图Line
    饼图Pie
    散点图Scatter
    雷达图Radar/Spider Chart
    K线图Candlestick/K Line
    热力图Heatmap
    树图Tree Diagram
    地图Map

    三、动态触发、最大最小平均值

    实现动态触发，最大最小以及平均值其实非常简单，只需要添加几行代码即可搞定，重点是理解代码的意思，确保下次会使用。

    动态触发：

    1. tooltip: {
    2.                 trigger: 'axis',
    3.             },
    4. //设置提示框（tooltip）的触发方式为“axis”，即当鼠标悬停在坐标轴上时显示提示框。
    5.  
    6.  
    7.  
    8. toolbox: {  
    9.     show: true, // 是否显示工具箱组件。  
    10.     feature: {  
    11.         mark: { show: true }, // 是否显示标记辅助线或标记点。  
    12.         dataView: { show: true, readOnly: false }, // 是否显示数据视图，并且是否允许编辑数据。  
    13.         magicType: { show: true, type: ['line', 'bar'] }, // 是否显示图表切换类型按钮，并指定可以切换的图表类型。  
    14.         restore: { show: true }, // 是否显示重置图表为初始状态的按钮。  
    15.         saveAsImage: { show: true }, // 是否显示保存为图片按钮。  
    16.     },  
    17. }

    最大最小平均值：

    1. data: [
    2.               {
    3.                 type: 'max', name: '最大值'
    4.               },{
    5.                 type: 'min', name: '最小值'
    6.               }
    7.             ]
    8.           },
    9.           markLine: { // 标记线
    10.             data: [
    11.               {
    12.                 type: 'average', name: '平均值'
    13.               }
    14.             ]//markLine: 定义标记线的配置。data: 用于定义标记线的数据点。type: 'average': 表示该标记线用于展示数据的平均值。name: '平均值': 标记线的名称，通常用于在图表上显示标注。

    现在，我们把这两段添加到条形图中看看效果

    1. html>
    2. <html>
    3.  
    4. <head>
    5.     <meta charset="utf-8">
    6.     <script src="js/echarts.js">script>
    7. head>
    8.  
    9. <body>
    10.  
    11.     <div id="main" style="width: 800px; height: 400px">div>
    12.     <script type="text/javascript">
    13.  
    14.         var myChart = echarts.init(document.getElementById("main"));
    15.  
    16.         var option = {
    17.             title: {
    18.                 text: '3班成绩表',
    19.                 subtext: '数据来自辅导员',
    20.             },
    21.             tooltip: {
    22.                 trigger: 'axis',
    23.             },
    24.             legend: {
    25.                 data: ['计算机基础','数据可视化'],
    26.             },
    27.             toolbox: {
    28.                 show: true,
    29.                 feature: {
    30.                     mark: { show: true },
    31.                     dataView: { show: true, readOnly: false },
    32.                     magicType: { show: true, type: ['line', 'bar'] },
    33.                     restore: { show: true },
    34.                     saveAsImage: { show: true },
    35.                 },
    36.             },
    37.             calculable: true,
    38.             xAxis: [
    39.                 {
    40.                     type: 'value',  //设置柱状图
    41.                     boundaryGap: ['20%','20%'],
    42.                 },
    43.             ],
    44.             yAxis: [
    45.                 {
    46.                     type: 'category',
    47.                     data: ['明明','红红','高高'],
    48.                 },
    49.             ],
    50.             series: [
    51.                 {
    52.                     name: '计算机基础',
    53.                     type: 'bar',
    54.                     data: [80,88,70],
    55.                     markPoint: { // 标记点
    56.             data: [
    57.               {
    58.                 type: 'max', name: '最大值'
    59.               },{
    60.                 type: 'min', name: '最小值'
    61.               }
    62.             ]
    63.           },
    64.           markLine: { // 标记线
    65.             data: [
    66.               {
    67.                 type: 'average', name: '平均值'
    68.               }
    69.             ]
    70.           },
    71.                 },
    72.                 {
    73.                     name: '数据可视化',
    74.                     type: 'bar',
    75.                     data: [60,90,80,],
    76.                     markPoint: { // 标记点
    77.             data: [
    78.               {
    79.                 type: 'max', name: '最大值'
    80.               },{
    81.                 type: 'min', name: '最小值'
    82.               }
    83.             ]
    84.           },
    85.           markLine: { // 标记线
    86.             data: [
    87.               {
    88.                 type: 'average', name: '平均值'
    89.               }
    90.             ]
    91.           },
    92.                 },
    93.                 
    94.             ]
    95.         };
    96.  
    97.         //使用刚指定的配置项和数据显示图表
    98.         myChart.setOption(option);
    99.     script>
    100. body>
    101.  
    102. html>

    效果:

    最大值，最小值，平均数还有动态触发全实现了，其他两张表操作原理同此表，只是有稍稍改动，大家快去试试吧，完成自己的第一个项目实战！

    拓展、什么是ECharts

    1、ECharts

    ECharts，全称Enterprise Charts，是一个使用JavaScript实现的开源可视化库。它是由百度前端开发团队Baidu EFE开发的成果之一。ECharts可以在PC和移动设备上流畅运行，并兼容当前绝大部分浏览器，如IE8/9/10/11、Chrome、Firefox、Safari等。它提供了丰富的图表类型，包括折线图、柱状图、散点图、饼图、K线图、地图、热力图、线图、关系图、treemap、旭日图、平行坐标等，以及支持动画、数据筛选、数据标签等功能。此外，ECharts还提供了交互组件，如标题、详情气泡、图例、值域、数据区域、时间轴、工具箱等，支持多图表、组件的联动和混搭展现。

    2、ECharts的历史

    ECharts的开发团队利用Canvas的性能优势，特别是在处理大量数据点时的出色表现，迅速开发出了涵盖各行业图表、满足各种需求的可视化库。此外，由于早期开发者们迅速补全了大量常用图表，并且提供了中文文档，ECharts很快在国内流行起来，并逐渐成为国内最火的图表库之一。

    随着时间的推移，ECharts不断发展壮大。在2017年，陆奇加入百度后大力推广开源，这也为ECharts的发展带来了新的机遇。2018年，ECharts被捐赠给Apache基金会，并成为ASF孵化级项目。这一举措使得ECharts开始在国际上受到更多的关注。

    最终，在2021年1月26日，Apache基金会官方宣布ECharts项目正式毕业，成为Apache顶级项目。这不仅是对ECharts技术实力和发展成果的认可，也标志着ECharts在数据可视化领域的重要地位得到了进一步的巩固。随后，在2021年1月28日，ECharts 5线上发布会举行，这进一步展示了ECharts在技术和应用方面的最新进展。

    3、ECharts的特点

    Charts的主要特点包括可视化类型丰富、定制性强、支持跨平台使用，并且具有吸引眼球的特效。它采用模块化的设计，使得每个图表类型都是一个独立的模块，可以根据需要选择加载。ECharts的底层依赖轻量级的矢量图形库ZRender，因此能够提供直观、交互丰富、可高度个性化定制的数据可视化图表。

  • 相关阅读:
    概要了解postman、jmeter 、loadRunner
    原生js实现todolist案例
    山石网科国产化防火墙，打造全方位边界安全解决方案
    【深入了解Java String类】
    C++string的使用
    神经网络产品图片分析,神经网络产品图片下载
    币圈必备资讯插件
    编译可执行程序的Makefile模块
    538页21万字数字政府大数据云平台项目建设方案
    Protocol Buffer 使用
  • 原文地址：https://blog.csdn.net/qq_49513817/article/details/136665547