使用echarts图练习(一）

最新推荐文章于 2024-05-12 16:59:09 发布
最新推荐文章于 2024-05-12 16:59:09 发布
阅读量242 收藏
点赞数 1
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44017091/article/details/124849776
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div  id='aa' style="width: 600px; height: 400px;">
    </div>
    <div id='bb' style="width: 600px; height: 400px;">
    </div>
    <script src="js/echarts.js"></script>
    <script>
        var myecharts=echarts.init(document.querySelector('#aa'))
        var xDataArr=['张三','李四','王五','闰土','猪小明','蘑菇头','王炸']
        var yDateArr=[67,43,55,77,22,88,55,77]
        var option={
            title:{
                text:'语文成绩表'
            },
           
            xAxis:{
                type:'value',             
            },
            tooltip:{
                trigger:'item'
            },
            yAxis:{
                type:'category',
                data:xDataArr
            },
            label:{
                show:true,
                // color:greenyellow
            },
            barWidth:'30%',
            series:[
                {
                    name:'语文',
                    type:'bar',
                    data:yDateArr,
                    markPoint:{
                        data:[
                            {
                                type: 'max',name:'最大值'
                            },{
                                type:'min',name:'最小值'
                            }
                        ]
                    },
                    markLine:{
                      data:[
                          {
                              type:'average',name:'平均值'
                          }
                      ]  
                    },

                
                }
            ]
        };
        myecharts.setOption(option)
    </script>
</body>
</html>

在这里插入图片描述

codetimev
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts 图表使用（一）
uj
04-16 1682
折线图和柱状图对比通过点击Echart 图表右上角的 色块 可以控制对应图表的显隐。但在多条柱状图中，对应的图形复杂（可以调整柱状图之间的距离解决），不符合图表直观清晰的特征，所以通过改写成折线图的方式更有利。在只有两支柱状图时，使用柱状图较好。2. 多图表展示一般一个option 对应一张图表，但是也可以将多张图表通过一个option 展示
echarts的使用(一)
qq_40872826的博客
01-18 286
在nuxt中使用ECharts一、安装1、安装最新版本2、安装指定版本二、在项目中配置echarts1、在plugins中新建echarts.js文件2、在nuxt.config.js中配置新建的echarts文件三、创建echarts组件1、在components文件夹中创建InitEcharts.vue文件2、在index文件中引入InitEcharts并使用四、运行效果![在这里插入图片描述](https://img-blog.csdnimg.cn/20210118113405380.png?x-os
echarts入门练习——零基础小白首次尝试
weixin_44353999的博客
09-13 433
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>柱状.
echarts 图表展示 练习一 （基础页面加载数据）
happyvx的专栏
08-06 1992
1.下载echarts.zip包   当然你选择哪个都行只要能下载下来。 2. 解压查看内部构建 build 文件夹 我们需要这里的东西 当然里面也有其他东西你也需要看看比如doc 3.这一步比较关键  是在jsp页面加载echarts所需框架，否者echarts就不能使用了      3.1首先将build文件夹拷贝到eclispe项目下 然后加载echa
2024年前端最全Vue 使用 echarts 散点图在区域内标点(1)，阿里前端面试题库
最新发布
2401_84447149的博客
05-12 359
推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Echarts 小练习
唐都恩了的博客
11-23 606
<div id="total-orders-chart"></div> mounted() { const chartDom = document.getElementById("total-orders-chart"); // 初始化echarts const chart = this.$echarts.init(chartDom); chart.setOption({ xAxis: { type: "c...
【Python+Flask+Echarts】可视化练习题 ---- 餐饮数据雷达图
懂得一千零一种,赋予你失败的方法！
01-15 999
文章目录数据集案例① 需求② 代码实现▶ 读取数据集整体浏览▶ 统计每个区不同餐饮类型销售表现▶ 可视化③ 效果展示 数据集 本篇的数据来源 https://www.kaggle.com/datasets 该数据集是关于可以向北京居民提供外卖服务的餐馆信息，包括北京的哪个地区，餐​​馆的食品类别，餐馆的品牌，餐馆的地址以及外卖的联系电话，通过一些简单的数据清洗处理绘制简单的图像 ☆ﾐ(o*･ω･)ﾉ 返回顶部 案例 ① 需求 通过对数据集的分析，提出以下需求：统计北京各类型餐饮的雷达图~ ..
Echarts --- 可视化练习（bar01）
懂得一千零一种,赋予你失败的方法！
11-13 667
Echarts — 可视化练习（bar01） 冬醒来，变魔术似的为大地盖上了厚厚的素色“棉被”。极目远望，洁白一片。茫茫四野，似乎没有了色彩，没有了生机，唯有寂静——这也许是人们对冬天的最初印象吧。请千万不要这么认为！其实冬天就是一幅大写意的泼墨画，朴素中透露着高雅；冬天，是一曲别样动听的歌，此处无声胜有声。冬天的骨子里，仍然潜涌着不息的生命活力！看到雪地里那不远处的农屋窗户里亮出的灯光了吗？你不难想象，也许在屋内的灯光下，一家人此时此刻正围着火炉，品一壶热茶，悠闲地唠叨着一年四季所经历的风风雨雨和大
echarts练习笔记
03-11
在“echarts练习笔记”这个项目中，我们可以看到两个主要的文件夹：`templates`和`static`。这表明项目是围绕着构建一个Web应用进行的，其中`templates`通常用于存放HTML模板文件，而`static`则用于存放不随应用程序...
Echarts多柱状图练习demo
06-14
在这个“Echarts多柱状图练习demo”中，我们将深入探讨如何利用ECharts创建一个包含多种分类的多柱状图，以及如何处理本地数据。 一、ECharts简介 ECharts是一款开源的、免费的、跨浏览器的数据可视化库，支持多种...
echarts练习笔记-图表模板
03-11
**ECharts练习笔记-图表模板** ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，支持自定义交互和视觉效果，广泛应用于Web数据可视化场景。...
echarts图表简单使用
08-02
通过echarts.js文件，简单设置一些图表。。。。。。。
Echarts连接数据库实例
01-29
Echarts是由百度开发的一款基于JavaScript的开源图表库，支持丰富的图表类型，如折线图、柱状图、饼图等，非常适合用于Web应用中的数据可视化。 首先，我们需要理解的是Echarts本身并不直接处理后端数据，它主要...
ECharts实训案例
发财糕
03-18 722
2.实现实录及步骤（1）在 VS Code 中依次创建3个.html 文件，分别为 stackBar.html、standBar.html 和（2）绘制堆积柱状图。首先，在 stackBar.html 文件中引入 echarts.js 库文件。其次，准备一个具备大小（weight 与height）的 div 容器，并使用 initO方法初始化容器。最后设置堆积柱状图的配置项、“性别”与“入会方式”数据完成堆积柱状图绘制。（3） 绘制标准条形图。
Echarts --- 可视化练习（radar01）
懂得一千零一种,赋予你失败的方法！
11-13 485
Echarts — 可视化练习（radar01） 落画素描，入景山水。平仄韵达的诗意，畅悠了季节的孤漠，拾起淡漠唐风的音符，装在七弦琴上，拨弹着日月，校音着声律。花落流水春风绿，一捧桃花醉月光。一笺长长的心卷，任凭风吹过往，一夜风流记否几页故事，长鸣萧声书时光。昏沉的灯光，朦胧了善良的心灵，沉沦了一段暗黑的歌舞。迷离中，风干了人性，吹瘦了人心。 # -*- coding: utf-8 # @Time : 2020/11/11 16:43 # @Author : ZYX # @File
Echarts的使⽤、进阶使用、练习
王和平的第三个果园
12-23 818
Echarts的使⽤ 1.引⼊Echarts <!-- 引⼊ ECharts ⽂件 --> <script src="js/echarts.js"></script> 2. 准备⼀个具备⾼宽的 DOM 容器 <body> <!-- 为 ECharts 准备⼀个具备⼤⼩（宽⾼）的 DOM --> <div id="main" style="width: 600px;height:400px;"></div> </bod
Echarts练习
cmyglsk的博客
12-19 1182
这两天简单学习了下Echarts，学习资料是官网和网络搜索，并写了一个简单的练习demo。       源码地址：https://github.com/chengmingyueGLSK/footprint              求star   嘿嘿！！！       先介绍下Echarts，Echarts是一个国产的优秀的纯Javascript的图表库，提供了常规的折线图，柱状图，散点图，
3.18作业，绘制Echarts的常用图表
2301_81685623的博客
03-18 582
实现思路及步骤(1）在 Eclipse 中依次创建3个。html 文件，分别为堆积柱状图． html 、标准条形图． html 和瀑布图． html。(2）绘制堆积柱状图。首先，在堆积柱状图． html 文件中引人 echarts . js 库文件。其次，准备一个指定了大小的 div 容器，并使用init0方法初始化容器。最后，设置堆积柱状图的配置项、“性别”“年龄段”数据，完成堆积柱状图绘制。(3）绘制标准条形图。首先，在标准条形图． html 文件中引人 echarts . js 库文件。
Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）
懂得一千零一种,赋予你失败的方法！
01-04 2060
Echarts — 可视化练习（pie06 — 环形嵌套饼图） 别人想什么，我们控制不了；别人做什么，我们也强求不了。唯一可以做的，就是尽心尽力做好自己的事，走自己的路，按自己的原则，好好生活。即使有人亏待了你，时间也不会亏待你，人生更加不会亏待你！善待别人，就是善待自己。 ----- 摘自知乎 Flask: # -*- coding: utf-8 # @Author : ZYX # @File : pie06_嵌套环形饼图.py # @software: PyChar
echarts折线图练习
09-22
echarts是一个强大的图表库，它可以用来创建各种类型的图表，包括折线图。要练习echarts折线图，你可以按照以下步骤进行： 1. 首先，你需要在页面中...以上是一个基本的echarts折线图的练习步骤。希望对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值