首页 > 其他分享 >Apache ECharts的用法——通过直观的图表来展示数据

Apache ECharts的用法——通过直观的图表来展示数据

时间:2024-03-24 10:31:14浏览次数:23  
标签:展示 ECharts 图表 Apache data echarts

定义

Apache ECharts 是一款基于 Javascript 的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。
官网地址:https://echarts.apache.org/zh/index.html
为了通过直观的图表来展示数据

入门案例

Apache Echarts官方提供的快速入门:点击跳转

网盘下载

下载链接:点击跳转
提取码:8888

代码

<!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: '销量数据展示'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [50, 20, 36, 10, 10, 20]
          }
        ]
      };

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

展示图

总结

使用Echarts,重点在于研究当前图表所需的数据格式。通常是需要后端提供符合格式要求的动态数据,然后响应给前端来展示图表。

标签:展示,ECharts,图表,Apache,data,echarts
From: https://blog.csdn.net/qq_60396437/article/details/136983284

相关文章

  • python基础——异常、模块和包、pyecharts
    文章目录一、异常1、异常捕获2、异常传递二、python模块1、概念2、导入方式3、自定义模块4、python包5、导入第三方包三、pyecharts1、概念2、JSON数据格式一、异常1、异常捕获1.基本语法try: 可能发生错误的代码except: 如果出现异常应该执行的代码try: ......
  • Apache Hudi从零到一:存储格式初探
    在花了大约4年时间致力于ApacheHudi(其中包括3年Committer身份)之后,我决定开始这个博客系列,旨在以有组织且适合初学者的方式展示Hudi的设计和用法。我的目标是确保对分布式数据系统有一定了解的人能够轻松地理解该系列。该系列将包含10篇文章,每篇文章都会深入探讨Hudi......
  • Error: Could not find or load main class org.apache.hadoop.hbase.util.GetJavaPro
    Hbase没有将其自身的依赖包添加到classpath配置路径所以才会导致找不到自身主类的报错vim/usr/local/hbase/bin/hbase 在161行出修改CLASSPATH="${HBASE_CONF_DIR}"CLASSPATH=${CLASSPATH}:$JAVA_HOME/lib/tools.jar:/usr/local/hbase/lib/*修改成功后,不再报错......
  • 一篇搞定ECharts的基本使用,赶快收藏起来学习吧~
    准备工作引入声明一个有宽高的dDOM元素echarts.init(DOM)option配置对象echarts.setOptions(option)基础配置option类似于一个容器,那么里面的属性就相当于组件:xAxis(直角坐标系X轴)、yAxis(直角坐标系Y轴)、grid(直角坐标系底板)、angleAxis(极坐标系角度轴)、radiusAxi......
  • echarts 实现漏斗图中心、右侧同时显示
    效果图:代码实现:letoption={ tooltip:{ trigger:'item', formatter:'{b}:{c}%' }, labelLine:{ show:true }, series:[{ name:'漏斗', type:'funnel', top:10, ......
  • 【数据可视化】Echarts中的其它图表
    个人主页:zxctscl如有转载请先通知文章目录1.前言2.绘制散点图2.1绘制基本散点图2.2绘制两个序列的散点图2.3绘制带涟漪特效的散点图3.绘制气泡图3.1绘制标准气泡图3.2绘制各国人均寿命与GDP气泡图3.3绘制城市A、城市B、城市C三个城市空气污染指数气泡图......
  • 数据可视化-ECharts Html项目实战
    项目实践一.会员基本信息及消费能力对比分析1.训练要点掌握堆积柱状图的绘制。掌握标准条形图的绘制。掌握瀑布图的绘制。2.需求说明 “会员信息表.xlsx”文件记录了某鲜花店销售系统上的会员信息,具体内容包括会“华面员编号、姓名、性别、年龄、城市、入会方式、会......
  • Dubbo23_Apache Dubbo概述2
    一、Dubbo简介ApacheDubbo是一款高性能的JavaRPC框架。其前身是阿里巴巴公司开源的一个高性能、轻量级的开源JavaRPC框架,可以和Spring框架无缝集成。什么是RPC?RPC全称为remoteprocedurecall,即**远程过程调用**。比如两台服务器A和B,A服务器上部署一个应用,B服务器上......
  • linux apache 使用记录
    1、安装集成phpyuminstallhttpdyuminstallphpsystemctlrestarthttpd2、开启url重写功能修改/etc/httpd/conf/httpd.conf:A开启重写模块:LoadModulerewrite_modulemodules/mod_rewrite.soIncludeconf.modules.d/*.confB修改参数 AllowOverrideAllC网站根目录添......
  • VUE3 ECharts5 快速上手(附详细步骤)
    安装pnpminstallecharts引入EChartsimport*asechartsfrom'echarts';设置容器注意:虽然echarts可以在配置时设置宽高,但还是推荐在配置前直接为容器设置宽高<template><divid="main"class="echart-style"></div></template><style......