关于ECharts 简单好用的数据可视化工具

最新推荐文章于 2024-03-28 09:00:49 发布
最新推荐文章于 2024-03-28 09:00:49 发布
阅读量1.9k 收藏 2
点赞数 1
文章标签： echarts javascript ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_61896295/article/details/125587078
版权

什么是ECharts

官网

ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表

简介

  1. 跟wow这类一个性质 是一个插件
  2. 提供可自定义的图表
  3. 加载快 兼容性强

ECharts的使用

既然是一个插件 那么必不可少的当然就是引入

先贴一个官网教程

1.下载插件

npm安装或者文件直接导入

npm install echarts   //npm安装代码

<script src="js/echarts.min.js"></script> //js导入代码
2.绘制一个最简单的可视化图表
<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <!-- 引入刚刚下载的 ECharts 文件 -->
  <script src="echarts.js"></script>
	<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量'],
          type: ['scroll']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    </script>
	
</body>

解释

属性名称大致作用举例方法
title标题组件，包含主标题和副标题。包含是否显示（show）标题超链接（ link）等多种属性
legend图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。legend. type（图列类型）legend. left （图例组件离容器左侧的距离。）等
tooltip提示框组件。可以设置全局 坐标系等多个地方
xAxisx轴的设置xAxis. position x轴的位置 xAxis. type = ‘category’ 坐标轴类型
yAxisy轴的设置yAxis. position y轴的位置 yAxis. type = ‘category’ 坐标轴类型
series你的数据type 类型 是折线图还是柱形图 data 具体的数据

自主查询 才是王道

官网有一篇官方文档 可以帮助你实现你想要的个性化效果，修改颜色 具体位置大小跟不在话下，用法也是相当简单，想修改那一条，就先去他的主页面 再在里面查找他的属性值比如我想修改图列的类型

进入legend主属性在这里插入图片描述 #### 查找或者相关属性用法

请添加图片描述

在html中使用

请添加图片描述

今天只着手与一点 自定义皮肤

在官方 会有官方已经配置好的很多好看的主题 你大可以直接使用 也可以用 dark这种不需要引入直接.dark就可以的主题你要记住，别人配置的就是最好看的，自己配的配到最后永远是花里胡哨，就跟你打游戏捏脸一样 默认的挺好
不过还是要说说用法的
  1. 进入官网 下载 主题下载就可以看到主题配置工具了 跟这个插件一样 非常的可视化
  2. 对自己的主题进行各种配置 捏出你喜欢的主题吧
  3. 配置完成后直接点击下载主题，然后把里面的js内容直接复制一份到你的js文件夹里面，他就跟一个插件一样 直接引入
  4. 将该文件在 HTML 中引用；
  5. 使用 echarts.init(dom, ‘roma’) 创建图表，第二个参数即为 *.js 文件中注册的主题名字。
SaiKa563
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于hadoop和echarts的教育大数据可视化系统
05-04
在线教育平台现在是教育体系的重要组成部分，在当前大数据时代的背景下，促进教育机构建立统一平台、统一资源管理的数字化教学系统。如何评估系统平台的健康程度、学生的学习体验和在线课程的质量对于课程的教师和学校的管理人员都是非常重要的，这是进行数据分析的主要目的。可视化是一个重要的途径，它能够帮助大数据获得完整的数据图表并挖掘数据的价值，大数据分析离不开可视化这一工具的推动。 基于hadoop和echarts的教育大数据可视化系统，以B/S模式开发。通过Hadoop中Sqoop进行数据导入转换。以MapReduce构建数据分析，数据分析维度包括每日登录人数分析、平均学习时长分析、学习行为次数分析、每日活跃情况分析和分时段学习人数分析。最终使用ECharts可视化工具来对在线教育平台在学习过程中产生的数据进行可视化大屏展现,让更多人感受到可视化大数据的魅力。
基于 flask 和 echarts 的数据可视化工具.zip
02-20
【项目资源】： 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python、web、C#、EDA、proteus、RTOS等项目的源码。 【项目质量】： 所有源码都经过严格测试，可以直接运行。 功能在确认正常工作后才上传。 【适用人群】： 适用于希望学习不同技术领域的小白或进阶学习者。 可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【附加价值】： 项目具有较高的学习借鉴价值，也可直接拿来修改复刻。 对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同进步。
【数据可视化】Echarts的高级功能
zxctsclrjjjcph的博客
03-28 1751
主题是ECharts图表的风格抽象，用于统一多个图表的风格样式。为了顺应不同的绘图风格需求，需要下载ECharts官方提供的default、infographic、shine、roma、macarons、vintage等主题，并利用某大学各专业招生数据实现动态主题的切换。此外，为了让图表整体换装，还需要制作自定义主题。ECharts除了默认主题样式之外，还可以使用主题在线构建工具，根据需求快速直观地生成主题配置文件，并在ECharts中使用自定义的主题样式。自定义主题的步骤如下。
百度开源绘图工具——echarts的使用
weixin_42213622的博客
02-23 1万+
推荐学习网址：https://echarts.baidu.com/echarts2/doc/example.html 使用前需要先进行模块的安装： pip install pyecharts pip install pyecharts-snapshot 条形图的绘制 ——Bar 需求1： 假设你获取到了某年内地电影票房前几的电影(列表a)和电影票房数据(列表b),那么如何更加直观的展示该数据...
Echarts简介
qq_44718666的博客
08-25 9009
一.简述数据可视化技术 什么是数据可视化技术 借助图形化的数段，清晰有效的传递和沟通信息，以视觉的方式展现数据，便于用户的认知，偏于图表的样式，相对于文字说明更加直观 科学可视化（出现最早，最成熟） 处理科学数据，面向科学和工程数据方面，研究带有空间坐标和几何信息的三维空间，如何呈现数据中的几何特征 主要面向自然科技中产生数据的建模操作和处理 应用于医疗（透析，CT），科研，航天，天气，生物等技术 信息可视化（更常见，接触更多） 科学可视化演变而来，主要处理非结构化，非几何的数据 金融交易，社交网络，文本数
百度ECharts图形报表的介绍以及应用案例理解
PIKapikaaaa的博客
07-07 2553
百度ECharts图形报表的介绍以及应用案例理解
ECharts如何在pycharm中运行
BTYE的博客
09-24 2270
这篇文章主要介绍“ECharts如何在pycharm中运行”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“ECharts如何在pycharm中运行”文章能帮助大家解决问题。将整个 dist 目录复制到你的项目中去，可重命名为 echarts。2、echarts 库放在解压后文件夹中的 dist 目录里，ECharts在pycharm中运行的方法。1、首先我们进入官网，把压缩包下载下来。3、然后就可以绘制柱状图了。
Echarts的安装以及简单使用
Harald
04-17 2354
建议去官方网站直接安装，网址如下：界面如下，单击“在线定制”，里面可以选择你想要的图标，坐标系，组件等。选择完成后，单击“下载”。等待官网“Buliding”，待末行出现“Completed”字样则表示安装完成。
图表制作办公首选--实用图表工具Echars
CODEING一场空的博客
06-24 1433
由于工作的需要，在写材料的时候需要使用到柱状图、饼状图、折线图等等展示数据，可以使用PPT等办公软件构建出图表，在这里可以使用更加方便、更加美观的工具Echars。
数据可视化echarts介绍
phoebemeng的博客
07-29 603
数据可视化echarts介绍
echarts工具的介绍和使用
Lin_25937的博客
10-27 1644
echarts ，前端好用的图标可视化工具
大屏演示 echarts 地图 数据 可视化.zip
最新发布
04-20
以下是一些关于使用 ECharts 进行数据可视化的关键特性、图表类型和基本使用步骤： ### 关键特性 1. **开源免费**：ECharts 是开源软件，可以免费用于个人和商业项目，无需支付任何费用。 2. **广泛兼容**：支持...
vue+echarts+DataV数据可视化系统源码.zip
06-08
vue+echarts+DataV数据可视化系统源码.zip
ECharts：赋能数据可视化，探索数据的无限可能
04-10
ECharts，一个基于JavaScript的数据可视化图表库，正是为了解决这一问题而诞生的。它不仅是一个强大的可视化工具，更是一个能够激发无限创意和探索欲望的平台。 ECharts提供了极为丰富的图表类型，以满足用户在各种...
数据可视化-Echarts 大屏数据可视化展示
04-04
1、资源内容：数据可视化-Echarts 大屏数据可视化展示 2、适用人群：计算机，电子信息工程、数学等专业的学习者，作为“参考资料”参考学习使用。 3、解压说明：本资源需要电脑端使用WinRAR、7zip等解压工具进行解压...
ECharts入门
赈川
12-09 827
文章目录ECharts简介Echarts特性Echarts五分钟入门获取 ECharts引入 EChartsECharts详细学习 ECharts简介 ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观...
GIS可视化数据库Echarts介绍
gis_witch的博客
01-19 2694
本文主要介绍ECharts的基本概念和GIS中的应用场景
Python可视化神器——pyecharts的超详细使用指南！
热门推荐
程序员之家
09-28 3万+
 源 | 机器之心  文 | wengJJpyecharts是一款将python与echarts结合的强大的数据可视化工具，本文将为你阐述pyecharts的使用细则前言...
ECharts的简单入门
jdk_wangtaida的博客
09-05 755
前言： 如果我们开发的项目中涉及到大量的数据分析，干巴巴的数据展示肯定不是用户想看到的，怎么把数据更加形象生动的展示给用户，就变得十分重要了。那么就不得不说今天的主角ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRend...
Echarts用于Python数据可视化，2000字
05-14
Echarts是一种基于JavaScript的数据可视化库，它提供了丰富的图表和交互式功能，可以帮助用户通过图表更好地理解和分析数据。虽然Echarts最初是为Web应用程序设计的，但是现在也可以通过Python使用它。本文将介绍如何使用Echarts进行Python数据可视化。 一、安装Echarts 在使用Echarts之前，需要先安装Echarts的Python库，可以通过pip进行安装： ``` pip install pyecharts ``` 二、创建图表 在使用Echarts创建图表之前，需要先导入pyecharts中的相关类。在pyecharts中，主要有两个类：`Charts`和`Page`。`Charts`类用于创建具体的图表，如折线图、柱状图、饼图等；`Page`类用于将多个图表组合在一起，形成一个页面。 下面是使用Echarts创建一个简单的柱状图的示例代码： ``` from pyecharts.charts import Bar from pyecharts import options as opts # 创建柱状图实例 bar = Bar() # 添加数据 bar.add_xaxis(["A", "B", "C", "D", "E"]) bar.add_yaxis("数量", [5, 20, 36, 10, 75]) # 设置全局配置项 bar.set_global_opts(title_opts=opts.TitleOpts(title="柱状图")) # 渲染图表 bar.render("bar.html") ``` 在这个例子中，我们首先创建了一个`Bar`实例，然后通过`add_xaxis`和`add_yaxis`方法添加了数据，最后通过`set_global_opts`方法设置了全局配置项。最后，我们调用`render`方法将图表渲染成HTML文件。 三、常见图表类型 Echarts支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图、热力图等。下面是一些常见图表类型的示例代码。 1. 折线图 ``` from pyecharts.charts import Line from pyecharts import options as opts # 创建折线图实例 line = Line() # 添加数据 line.add_xaxis(["A", "B", "C", "D", "E"]) line.add_yaxis("数量", [5, 20, 36, 10, 75]) # 设置全局配置项 line.set_global_opts(title_opts=opts.TitleOpts(title="折线图")) # 渲染图表 line.render("line.html") ``` 2. 饼图 ``` from pyecharts.charts import Pie from pyecharts import options as opts # 创建饼图实例 pie = Pie() # 添加数据 pie.add("", [("A", 5), ("B", 20), ("C", 36), ("D", 10), ("E", 75)]) # 设置全局配置项 pie.set_global_opts(title_opts=opts.TitleOpts(title="饼图")) # 渲染图表 pie.render("pie.html") ``` 3. 散点图 ``` from pyecharts.charts import Scatter from pyecharts import options as opts # 创建散点图实例 scatter = Scatter() # 添加数据 scatter.add_xaxis([10, 20, 30, 40, 50]) scatter.add_yaxis("", [25, 20, 15, 10, 5]) # 设置全局配置项 scatter.set_global_opts(title_opts=opts.TitleOpts(title="散点图")) # 渲染图表 scatter.render("scatter.html") ``` 4. 柱状图 ``` from pyecharts.charts import Bar from pyecharts import options as opts # 创建柱状图实例 bar = Bar() # 添加数据 bar.add_xaxis(["A", "B", "C", "D", "E"]) bar.add_yaxis("数量", [5, 20, 36, 10, 75]) # 设置全局配置项 bar.set_global_opts(title_opts=opts.TitleOpts(title="柱状图")) # 渲染图表 bar.render("bar.html") ``` 四、交互式功能 Echarts支持多种交互式功能，如缩放、拖拽、提示框等。下面是一个例子，展示如何使用Echarts实现一个带有提示框和缩放功能的折线图。 ``` from pyecharts.charts import Line from pyecharts import options as opts # 创建折线图实例 line = Line() # 添加数据 line.add_xaxis(["A", "B", "C", "D", "E"]) line.add_yaxis("数量", [5, 20, 36, 10, 75]) # 设置全局配置项 line.set_global_opts(title_opts=opts.TitleOpts(title="折线图"), toolbox_opts=opts.ToolboxOpts(), datazoom_opts=[opts.DataZoomOpts()]) # 设置提示框 line.set_series_opts(tooltip_opts=opts.TooltipOpts(trigger="axis")) # 渲染图表 line.render("line.html") ``` 在这个例子中，我们通过`toolbox_opts`设置了工具箱，可以在图表中显示放大缩小按钮和还原按钮。使用`datazoom_opts`设置了缩放功能。还通过`set_series_opts`设置了提示框。 五、总结 本文介绍了如何使用Echarts进行Python数据可视化。我们首先介绍了如何安装Echarts库，然后介绍了如何使用`Charts`和`Page`类创建图表，包括折线图、柱状图、饼图、散点图等。最后，我们还介绍了如何使用Echarts实现交互式功能，如缩放和提示框。Echarts提供了丰富的图表类型和交互式功能，可以帮助我们更好地理解和分析数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值