echart图表

简介: echart图表

首先我们要知道ECharts是什么,它是怎么用的?

ECharts是一个使用JavaScript实现的开源可视化库,它涵盖各行业图表,满足各种需求。它提供了丰富的图表类型和交互能力,使用户能够通过国简单的配置生成各种各样的图表,包括折线图,柱状图,散点图,饼图,雷达图,地图等等

一.引入方式

Apache ECharts 支持多种下载方式,我们来介绍一下快速安装。我们将刚才保存的echarts.js的目录以script标签的形式引入。

二. 绘制一个简单的图表

我们先在body里创建一个DOM容器,并给予它宽高,然后就可以通过echarts。init方法初始化一个echarts实例并通过setOption方法生成一个简单的柱状图啦。

先设置一个容器

<body>
    <div id="main" style="width: 600px;height:400px;"></div>
  </body>
// 柱状图
    var myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: 'ECharts 入门示例'
      },
    tooltip: {
      trigger: 'item'
      },
    legend: {
      origin: 'vertical',
      data: ['销量', '收入']
      },
    xAxis: {},
    yAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
    series: [{
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
        }, ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

然后就会显示了,我们可以通过不同的type类型来定义图表,请多多学习把!

目录
相关文章
|
Java 数据库连接 mybatis
Mybatis使用in并返回返回List
Mybatis使用in并返回返回List
379 2
|
4月前
|
机器学习/深度学习 人工智能 前端开发
终端里的 AI 编程助手:OpenCode 使用指南
OpenCode 是开源的终端 AI 编码助手,支持 Claude、GPT-4 等模型,可在命令行完成代码编写、Bug 修复、项目重构。提供原生终端界面和上下文感知能力,适合全栈开发者和终端用户使用。
42239 11
|
7月前
|
Linux 虚拟化 iOS开发
macOS Tahoe 26 beta 5 (25A5327h) Boot ISO 原版可引导镜像下载
macOS Tahoe 26 beta 5 (25A5327h) Boot ISO 原版可引导镜像下载
256 0
macOS Tahoe 26 beta 5 (25A5327h) Boot ISO 原版可引导镜像下载
【Echarts】Echarts 柱形图实现从右向左滚动
【Echarts】Echarts 柱形图实现从右向左滚动
658 0
|
Java Maven
构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)
这篇文章详细介绍了构建SpringBoot项目的过程,包括新建工程、选择环境配置、添加依赖、项目结构说明,并演示了如何编写一个简单的Controller控制器实现输出功能,最后讲解了如何使用Maven将项目打包成可执行的JAR包,并提供了运行JAR包的命令和测试效果。
构建Springboot项目、实现简单的输出功能、将项目打包成可以执行的JAR包(详细图解过程)
|
SQL 前端开发 Java
编译JSqlParser4.6-4.7最新源代码
编译JSqlParser4.6-4.7最新源代码
466 0
|
弹性计算 固态存储 大数据
阿里服务器租用多少钱一年?阿里云租用收费标准价格表(2024年更新)
阿里云服务器租用费用在2024年有多项优惠。轻量应用服务器2核2G3M带宽年费82元,折合每月6.8元;新老用户可享99元一年的2核2G3M带宽ECS经济型e实例;2核4G5M带宽的企业级ECS u1实例则为199元一年。4核16G10M带宽服务器月费70元,3个月210元;8核32G10M带宽服务器月费160元,3个月480元。此外,GPU服务器如gn6v与gn6i等也有大幅折扣。云服务器ECS实例规格多样,覆盖从经济型到高性能的各种需求,并提供不同类型的云盘选择。具体价格与配置详情请参考阿里云官网获取最新信息。
1859 6
阿里服务器租用多少钱一年?阿里云租用收费标准价格表(2024年更新)
|
编解码 数据可视化 前端开发
ECharts 对比 Highcharts 使用教程
ECharts 对比 Highcharts 使用教程
690 1
uiu
Echarts 快速入门折线图
Echarts 快速入门折线图
uiu
963 0
Echarts 快速入门折线图