头歌实训--数据可视化--Echarts开源库实现绘图

最新推荐文章于 2024-07-16 17:52:49 发布
最新推荐文章于 2024-07-16 17:52:49 发布
阅读量943 收藏 21
点赞数 19
文章标签： 信息可视化 echarts 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/randyAT/article/details/139701859
版权

第一关 Echarts 的下载与使用

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.simple.min.js -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        <!-- Begin 1 -->

var myChart = echarts.init(document.getElementById('main'));

        <!-- End 1 -->

        // 指定图表的配置项和数据

        <!-- Begin 2 -->

        var option = {

            title: {

                text: 'Educoder 实训统计'

            },

            tooltip: {},

            legend: {

                data:['实训数量']

            },

            xAxis: {

                data: ["Java","Python","Linux","数据库","HTML","Web"]

            },

            yAxis: {},

            series: [{

                name: '实训数量',

                type: 'bar',

                data: [300,280,386,180,210,50]

            }]

       

        };

        <!-- End 2 -->

        // 使用刚指定的配置项和数据显示图表。

        <!-- Begin 3 -->

         myChart.setOption(option);

        <!-- End 3 -->

    </script>

</body>

</html>

第二关 Echarts 绘制折线图

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.simple.min.js -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        <!-- Begin 1 -->

var myChart = echarts.init(document.getElementById('main'));

        <!-- End 1 -->

        // 指定图表的配置项和数据

        <!-- Begin 2 -->

        var option = {

 title: {

                text: 'Educoder 实训统计'

            },

            tooltip: {},

            legend: {

                data:['实训数量']

            },

            xAxis: {

                data: ["2008年","2010年","2012年","2014年","2016年","2018年"]

            },

            yAxis: {},

            series: [{

                name: '实训数量',

                type: 'line',

                data: [300, 800, 2400, 3600, 5600, 8000]

            }]

           

       

        };

        <!-- End 2 -->

        // 使用刚指定的配置项和数据显示图表。

        <!-- Begin 3 -->

        myChart.setOption(option);

        <!-- End 3 -->

    </script>

</body>

</html>

第3关 Echarts 绘制饼图

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.simple.min.js -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        <!-- Begin 1 -->

var myChart = echarts.init(document.getElementById('main'));

        <!-- End 1 -->

        // 指定图表的配置项和数据

        <!-- Begin 2 -->

        var option = {

  title: {

                text: 'Educoder 实训统计'

            },

            tooltip : {

  trigger: 'item',

  formatter: "{a} <br/>{b} : {c} ({d}%)"

},


 

            series : [{

   name: '实训数量',

   type: 'pie',

   radius : '55%',                //设置整个圆的大小

   center: ['40%', '50%'],        //设置整个圆的位置

   data:[

       {value:300, name:'Java'},

       {value:280, name:'Python'},

       {value:386, name:'Linux'},

       {value:180, name:'数据库'},

       {value:210, name:'HTML'},

       {value:50, name:'Web'}

   ]

}]

       

        };

        <!-- End 2 -->

        // 使用刚指定的配置项和数据显示图表。

        <!-- Begin 3 -->

        myChart.setOption(option);

        <!-- End 3 -->

    </script>

</body>

</html>

第四关 散点图

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.simple.min.js -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript">

    // 基于准备好的dom，完成散点图的绘制

    <!---------- Begin ---------->

    var myChart = echarts.init(document.getElementById('main'));

     option = {

        title: {

            text: '线性回归',

            left: 'center'

        },

        xAxis: {},

        yAxis: {},

        tooltip: {

  trigger: 'axis',

  axisPointer: {

      type: 'cross'

  }

},

        series: [{

  name:"",

  symbolSize: 12,

  emphasis: {

      label: {

          show: false,

          position: 'left',

          color: 'blue',

          fontSize: 16

      }

  },

  data: [

        [1, 4862.4],

        [2, 5294.7],

        [3, 5934.5],

        [4, 7171.0],

        [5, 8964.4],

        [6, 10202.2],

        [7, 11962.5],

        [8, 14928.3],

        [9, 16909.2],

        [10, 18547.9],

        [11, 21617.8],

        [12, 26638.1],

        [13, 34634.4],

        [14, 46759.4],

        [15, 58478.1],

        [16, 67884.6],

        [17, 74462.6],

        [18, 79395.7]

  ],

  type: 'scatter'

}]

    };

myChart.setOption(option);

    <!---------- End ---------->

</script>

</body>

</html>

第五关  雷达图

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.simple.min.js -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts.js"></script>

</head>

<body>

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

<center>

    <div id="main" style="width: 800px;height:800px;"></div>

</center>

<script type="text/javascript">

    // 基于准备好的dom，完成雷达图的绘制

    // -------- Begin --------

    var myChart = echarts.init(document.getElementById('main'));

option = {

    title: {

            text: '考试成绩图',

        },

        legend: {

            data: ['理想成绩', '实际成绩']

        },

radar: {

    shape: 'circle',

 name: {

      textStyle: {

          color: 'black',

      }

  },

  indicator: [

      {name: '语文', max: 150},

      {name: '数学', max: 150},

      {name: '英语', max: 150},

      {name: '物理', max: 110},

      {name: '化学', max: 100},

      {name: '生物', max: 90}

      ]

},

series: [{

      name: '理想成绩 vs 实际成绩',

      type: 'radar',

      symbol: 'circle',

      symbolSize: 12,

      data: [

          {

              value: [120, 120, 120, 90, 80, 80],

              name: '理想成绩'

          },

          {

              value: [128, 105, 85, 75, 88, 89],

              name: '实际成绩'

          }

      ]

     

  }]

};

    myChart.setOption(option);

    // -------- End --------

</script>

</body>

</html>

randyAT
关注
  • 19
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts实现数据可视化入门教程
m0_69674158的博客
07-03 1838
Echarts数据可视化图表案例（拿来即用）
echarts结合echarts-gl实现3D飞线地球可视化
08-05
而ECharts-GL是ECharts的一个扩展，专门为大型数据集和3D可视化设计，使得在Web上实现高级三维图表成为可能。 本案例主要关注的是如何利用ECharts和ECharts-GL来实现3D飞线地球可视化。首先，你需要确保已安装...
Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图
谢谢你们的关注
03-05 1105
Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图
Echarts开源可视化库学习(二)常用图表的实现与效果
半岛铁盒的博客
12-07 1248
一.柱状图 一.Echarts最基本的代码结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&gt.
21套-Echarts大屏HTML源码-数据可视化展板模板.zip
06-19
Echarts大屏HTML源码：数据可视化新篇章 在数字时代，数据可视化已成为沟通信息、洞察趋势的关键工具。为此，我们精心整理了一系列多套Echarts大屏HTML源码，旨在为您提供前沿的数据可视化展板模板。 这些源码基于...
30套-Echarts大屏HTML源码-数据可视化展板模板.zip
06-19
Echarts大屏HTML源码：数据可视化新篇章 在数字时代，数据可视化已成为沟通信息、洞察趋势的关键工具。为此，我们精心整理了一系列多套Echarts大屏HTML源码，旨在为您提供前沿的数据可视化展板模板。 这些源码基于...
数据可视化--Echarts库.rar
12-08
智能看板---数据可视化展示案例---插件动态换算rem值+Echarts库（一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11XQ，Chrome，Firefox，Safari等...
ECharts-GL 3D可视化库-其他
06-12
ECharts-GL是Apache ECharts（正在孵化）的扩展包，它提供3D绘图，地球仪可视化和WebGL加速。 特色： 1、混搭 ECharts 里的混搭功能很强大，作为 ECharts 的扩展，ECharts-X 自然也需要支持。ECharts-X 能跟 ECharts...
Pandas数据可视化宝典：解锁图形绘制与样式自定义的奥秘
eclipsercp的博客
07-11 978
数据可视化是将数据以图形或图像的形式展示出来，使复杂的数据更容易被人类理解和分析。在数据分析、商业智能、科学研究等领域，数据可视化都扮演着至关重要的角色。Pandas作为一个强大的Python数据处理库，不仅提供了丰富的数据结构和处理功能，还通过与Matplotlib等可视化库的集成，使得数据可视化变得简单高效。本文将详细介绍如何使用Pandas结合Matplotlib等库绘制各种图形，并通过实战代码帮助读者掌握Pandas在数据可视化中的应用。Pandas允许通过参数自定义图形的颜色、线型、标签等样式。
IPython：提升Python编程效率的实用技巧与案例
运维人生
07-12 681
IPython凭借其丰富的功能和高效的交互性，成为了Python编程和数据科学领域的得力助手。通过掌握上述技巧，你可以显著提升编程效率和数据分析的便捷性。希望本文能为你开启IPython的高效使用之旅提供有力支持。
数据可视化在智慧医疗中的重要应用
Shanhaibi的博客
07-16 198
在现代智慧医疗的推动下，数据可视化技术正日益成为医疗领域的重要工具。通过将复杂的医疗数据转换为直观的图表和图形，数据可视化不仅提升了医疗服务的效率，还极大地改善了患者的就医体验。
全国大学生数据建模比赛c题——基于蔬菜类商品的自动定价与补货决策的研究分析
weixin_66547608的博客
07-12 962
商超蔬菜不易保存，其质量会随着销售时间的增加而变差，影响商超收益，因此，基于各蔬菜品类的历史销售数据，制定合理的销售策略和补货决策对商超的营收十分关键。针对问题一，首先对附件2中的数据进行预处理；其次基于处理的数据对蔬菜品类销售量及影响因素进行相关性分析；最后运用最小二乘法进行相关性求解，并生成热力图模型。相关性分析结果表明：花叶类蔬菜销售数量最好，茄类、水生根类和辣椒类受价格波动较小，食用菌类受销售价格影响较大，且这些蔬菜都与销售价格成正相关。针对问题二，
阿里云通义千
2301_81771576的博客
07-12 691
尤其在中文能力方面，一直处于业界领先地位[^4^]。- **多模态模型**：通义千问不仅仅限于文本处理，它还具备多模态处理能力，例如其视觉理解模型Qwen-VL-Max在多项标准测试中得分超群，已被多家企业采用[^4^]。3. **技术创新**阿里云通义千问是阿里巴巴集团旗下的一款先进的人工智能大模型，具有强大的理解和生成能力，广泛应用于内容创作、翻译服务、文本摘要等多种场景**。- **翻译服务**：通义千问具备强大的翻译服务能力，能够提供多种语言的翻译，满足用户的跨语言交流需求[^5^]。
旅游数据可视化：免费工具让复杂数据变得简单易懂
m0_69539167的博客
07-16 221
想象一下，当你不再需要埋头于密密麻麻的表格和图表中，而是通过一块色彩斑斓、动态交互的数据看板跟可视化的大数据屏，就能瞬间洞悉旅游市场的风云变幻，那是一种怎样的体验？然而，如何将这些复杂的数据转化为直观、易懂的信息，为旅游企业精准决策、为消费者提供更加个性化的服务，成为了行业内外共同关注的焦点。在旅游消费数据日益丰富的今天，可视化工具为旅游业的发展注入了新的活力，它们让数据不再是冰冷的数字，而是成为推动旅游产业升级、提升服务质量、增强游客满意度的强大动力。在山海鲸可视化中，像这样的项目可以。
python爬取天气数据并实现数据可视化
最新发布
2301_78096295的博客
07-16 839
书籍的好处就在于权威和体系健全，刚开始学习的时候你可以只看视频或者听某个人讲课，但等你学完之后，你觉得你掌握了，这时候建议还是得去看一下书籍，看权威技术书籍也是每个程序员必经之路。Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。在数据存储前，对数据进行处理，便于后期的数据分析。光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。
【D3.js in Action 3 精译_015】1.3 D3 视角下的数据可视化最佳实践（下）
PeacefulWinter的博客
07-11 1194
本篇为《D3.js in Action》全新第三版第 1.3 小节的后半部分，是正文内容后作者对两位数据可视化资深从业者的人物专访记录。里面提到了很多关于 D3 的学习方法与实践过程。最后对第一章所有内容要点进行了梳理。参考性和可读性俱佳，建议收藏。
数据采集监控平台：挖掘数据价值 高效高速生产！
qq_41695441的博客
07-16 389
它不仅是数据的收集者，更是洞察生产的智慧之眼，高效高速处理产线的各种数据，挖掘数据深层次的价值，为企业带来了前所未有的使用价值。引入数据采集监控平台后，实现了从数据采集、数据整合、数据计算、数据对比、数据分析、数据监测、数据存储、数据传输等多项功能。它以惊人的速度采集和处理数据，无论是设备产生的各项数据，还是数据的各种分析信息，都能在瞬间呈现在您的眼前。它是企业在数字化浪潮中航行的指南针，帮助企业驾驭数据的力量，实现生产效率的增加和创新发展，开启数字化转型的新篇章！六、提高效率，降低成本，安全可靠。
AI人工智能-区块链-物联网-大数据可视化平台建设综合解决方案完整版.pptx
11-14
在AI人工智能-区块链-物联网-大数据可视化平台建设综合解决方案中，AI人工智能是核心驱动力，通过机器学习、深度学习等技术，实现数据的智能分析和决策。区块链技术则提供了基于分布式账本的数据安全和信任，可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值