Apache ECharts简介和相关操作

这篇具有很好参考价值的文章主要介绍了Apache ECharts简介和相关操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、Apache ECharts介绍

Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
官网地址:https://echarts.apache.org/zh/index.html
Apache ECharts简介和相关操作,Java,apache,echarts,前端
常见效果展示:
1.柱形图:
Apache ECharts简介和相关操作,Java,apache,echarts,前端
2.饼形图:
Apache ECharts简介和相关操作,Java,apache,echarts,前端
3.折线图
Apache ECharts简介和相关操作,Java,apache,echarts,前端
不管是那种图形,其本质就是数据

二、快速入门

Apache Echarts官方提供的快速入门:https://echarts.apache.org/handbook/zh/get-started/

1.下载echarts.js文件

echarts.js文件下载链接:https://www.jsdelivr.com/package/npm/echarts
Apache ECharts简介和相关操作,Java,apache,echarts,前端

2.新建index.html文件

代码如下(示例):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
</html>

Apache ECharts简介和相关操作,Java,apache,echarts,前端

3.准备一个DOM容器用于显示图表

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 600px;height:400px;"></div>
</body>

Apache ECharts简介和相关操作,Java,apache,echarts,前端

4.完整代码展示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
  </head>
  <body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
      // 基于准备好的dom,初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

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

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

5.相关配置

  • xAxis
    直角坐标系 中的 x 轴, 如果 type 属性的值为 category ,那么需要配置 data 数据, 代表在 x 轴的
    呈现
  • yAxis
    直角坐标系 中的 y轴, 如果 type 属性配置为 value , 那么无需配置 data , 此时 y 轴会自动去
    series 下找数据进行图表的绘制
  • series
    系列列表。每个系列通过 type 决定自己的图表类型, data 来设置每个系列的数据

三、演示效果

Apache ECharts简介和相关操作,Java,apache,echarts,前端


四、总结

使用Echarts,重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据,然后响应给前端来展示图表。文章来源地址https://www.toymoban.com/news/detail-740724.html

到了这里,关于Apache ECharts简介和相关操作的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Apache Echarts(智能生成图表)-数据可视化

    Apache ECharts 是一款基于Javascript的数据可视化图表库,提供直观生动可交互,可个行化定制的数据可视化图表 Apache ECharts是一个基于JavaScript的开源可视化库,用于创建交互式的、可定制的图表和数据可视化。它是由百度前端开发团队开发和维护的,于2013年首次发布,现在已成

    2024年04月11日
    浏览(42)
  • SpringBoot+SSM项目实战 苍穹外卖(11) Apache ECharts

    继续上一节的内容,本节学习Apache ECharts,实现营业额统计、用户统计、订单统计和销量排名Top10功能。 数据统计效果图: Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。 常见效果:柱形图、饼形图、折线图

    2024年01月17日
    浏览(42)
  • 苍穹外卖day11——数据统计图形报表(Apache ECharts)

    常见图表     快速上手 - Handbook - Apache ECharts   VO设计 对应的映射文件     对应的映射文件     对应的映射文件         对应的映射文件    

    2024年02月14日
    浏览(42)
  • 苍穹外卖 Spring Task 来单提醒 催单Apache ECharts day10~11

    Spring Task 订单状态定时处理 WebSocket 来单提醒 客户催单 功能实现: 订单状态定时处理 、 来单提醒 和 客户催单 订单状态定时处理: 来单提醒: 客户催单: 1.1 介绍 Spring Task 是Spring框架提供的 任务调度工具 ,可以按照约定的时间自动执行某个代码逻辑。 定位: 定时任务框

    2024年02月14日
    浏览(44)
  • 前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作

    效果图如下:    代码如下: 运行3D项目要安装一下echarts-gl依赖: 引入的jiangsu文件要单独下载json文件,附上两个网址: DataV.GeoAtlas地理小工具系列 POI数据|高德POI|高德兴趣点|高德POI数据|高德POI下载|高德POI数据库|高德POI分类|高德北京市POI|高德上海市POI|高德广州市POI|高德

    2024年02月11日
    浏览(47)
  • Apache POI | Java操作Excel文件

    目录 1、介绍 2、代码示例 2.1、将数据写入Excel文件 2.2、读取Excel文件中的数据 🍃作者介绍:双非本科大三网络工程专业在读,阿里云专家博主,专注于Java领域学习,擅长web应用开发、数据结构和算法,初步涉猎Python人工智能开发和前端开发。 🦅主页:@逐梦苍穹 📕您的一

    2024年02月20日
    浏览(57)
  • echarts 配置相关

     echarts更多模板链接  ECharts 作品集 1、echarts.clear()是清空当前实例,会移除实例中所有的组件和图表。      echarts.dispose()是销毁实例,销毁后实例无法再被使用。 2、series虽然是[] 数组,但是仍然会保留上次查询所得结果,使用myChart.setOption(option,true)语句可以更新页面效果

    2024年02月09日
    浏览(24)
  • Java 基于Apache POI实现Excel读写操作

    Win10 Java JDK1.8 pom.xml配置 代码实现 exmple.xml 补充说明 创建工作簿 POI创建工作簿的API有3种: HSSFWorkbook : 此API用于操作Excel 2003及之前的版本(文件扩展名 .xls ),优点是导出速度快,缺点是导出的行数有局限性,最多为65535行,超出65536条后系统就会报错。对内存消耗比较大,容

    2024年02月15日
    浏览(40)
  • 【ECharts】从零实现echarts地图完整代码(纯前端,包含地图资源)

    这里忽略创建vue项目的操作过程,请自行搭建 vue2 项目 、 less 环境 安装下载 echarts 这里我们选择npm下载 安装成功后,在 main.js 中把echarts配置到this上 这里我建立了一个地图的组件,放在 hnMap 中 获取地图渲染json文件 这里我是通过下述的网址下载需要的地图 json 文件到本地

    2024年02月03日
    浏览(55)
  • 简单聊聊Echarts伪3D地图实现的相关配置

    知识和技能真的是用进废退,还是得多实践,才不至于遗忘。 目录 前言 二、实现原理 三、从0开始实现 1.目录结构 2.地图JSON数据获取 3.具体实现,重头戏 3.一些常见问题的解决方法 总结 本文简单来聊一聊Echarts伪3D地图的实现,只分离出最底层的伪3D效果,删除了其余的上层

    2024年02月06日
    浏览(131)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包